'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { useSearchParams } from 'next/navigation';
import AppLayout from '@/components/layout/AppLayout';
import { appRoute } from '@/lib/utils/asset';

interface Audience {
  id: string;
  name: string;
  type: 'Custom Customer List' | 'Website Traffic CAPI' | 'Lookalike 1%' | 'Lookalike 2%';
  rule: string;
  size: number;
  matchRate: string;
  lastSynced: string;
  status: 'READY' | 'SYNCING';
}

export default function AudiencesPage() {
  const searchParams = useSearchParams();
  const [isSyncingAll, setIsSyncingAll] = useState(false);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [audiences, setAudiences] = useState<Audience[]>([]);

  const totalAudienceReach = audiences.reduce((acc, a) => acc + (a.size || 0), 0);
  const avgMatchRate = audiences.length > 0 && audiences.some((a) => a.matchRate && a.matchRate !== '—')
    ? `${(audiences.filter((a) => a.matchRate && a.matchRate !== '—').length / audiences.length * 100).toFixed(0)}%`
    : '—';

  const fetchAudiences = async () => {
    setIsLoading(true);
    try {
      const res = await fetch('/api/audiences');
      const data = await res.json();
      if (data.success) {
        setAudiences(data.audiences || []);
      }
    } catch (err) {
      console.error('Failed to load audiences:', err);
    } finally {
      setIsLoading(false);
    }
  };

  React.useEffect(() => {
    fetchAudiences();
  }, []);

  // Modal Form State
  const [newAudienceName, setNewAudienceName] = useState('');
  const [newAudienceType, setNewAudienceType] = useState<'Custom Customer List' | 'Website Traffic CAPI' | 'Lookalike 1%'>('Custom Customer List');
  const [newRule, setNewRule] = useState('All active Shopify customers with opt-in email marketing');

  const handleSyncAll = () => {
    setIsSyncingAll(true);
    setTimeout(() => {
      setAudiences(
        audiences.map((a) => ({
          ...a,
          lastSynced: 'Just now',
          status: 'READY',
        }))
      );
      setIsSyncingAll(false);
    }, 1200);
  };

  const handleCreateAudience = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newAudienceName.trim()) return;

    const newAud: Audience = {
      id: `aud_meta_${Date.now()}`,
      name: newAudienceName,
      type: newAudienceType,
      rule: newRule,
      size: newAudienceType === 'Lookalike 1%' ? 2400000 : 850,
      matchRate: '91.0%',
      lastSynced: 'Just now',
      status: 'READY',
    };

    setAudiences([newAud, ...audiences]);
    setNewAudienceName('');
    setShowCreateModal(false);
  };

  return (
    <AppLayout currentRoute="/audiences">
      <ui-title-bar title="Custom & Lookalike Audiences">
        <button variant="primary" onClick={() => setShowCreateModal(true)}>Create Audience</button>
      </ui-title-bar>
      <div className="space-y-6">
        {/* Top Header & Actions */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-200/80 pb-4">
          <div>
            <div className="flex items-center gap-2 text-xs font-semibold text-blue-600 uppercase tracking-wider">
              <i className="fa-solid fa-users text-xs" />
              <span>Audience Targeting</span>
            </div>
            <h1 className="text-2xl font-bold text-slate-900 tracking-tight mt-1">Custom &amp; Lookalike Audiences</h1>
            <p className="text-xs text-slate-500">
              Directly synchronize Shopify customer cohorts, VIP buyers, and abandoned checkouts to Meta Custom Audiences.
            </p>
          </div>

          <div className="flex items-center gap-2">
            <Link
              href={appRoute('/help?guide=audience-report', searchParams)}
              target="_blank"
              className="px-3.5 py-2 bg-indigo-50 border border-indigo-200 hover:bg-indigo-100 text-indigo-700 rounded-xl text-xs font-semibold flex items-center gap-1.5 transition-colors"
              title="Open Audience Intelligence Guide in Help Center"
            >
              <i className="fa-solid fa-book-open text-xs text-indigo-600" />
              <span>Guide</span>
            </Link>

            <button
              onClick={handleSyncAll}
              disabled={isSyncingAll}
              className="px-3.5 py-2 bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 rounded-xl text-xs font-semibold flex items-center gap-1.5 shadow-2xs transition-colors cursor-pointer"
            >
              <i className={`fa-solid fa-arrows-rotate text-xs ${isSyncingAll ? 'fa-spin text-blue-600' : 'text-slate-400'}`} />
              <span>{isSyncingAll ? 'Syncing...' : 'Sync All Audiences'}</span>
            </button>

            <button
              onClick={() => setShowCreateModal(true)}
              className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-bold flex items-center gap-1.5 shadow-xs transition-colors cursor-pointer"
            >
              <i className="fa-solid fa-plus text-xs" />
              <span>+ Create Audience</span>
            </button>
          </div>
        </div>

        {/* 4 Metric Cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Total Active Audiences
              </span>
              <div className="w-7 h-7 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center">
                <i className="fa-solid fa-users text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-slate-900">{audiences.length}</div>
            <div className="text-[11px] text-slate-400 font-medium">Synced with Meta Portfolio</div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Average Match Rate
              </span>
              {avgMatchRate !== '—' && (
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 font-bold border border-emerald-200/60 shadow-2xs">
                  Active
                </span>
              )}
            </div>
            <div className="text-2xl font-black text-slate-900">
              {avgMatchRate}
            </div>
            <div className="text-[11px] text-slate-400 font-medium">SHA-256 Normalized Matching</div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Total Audience Reach
              </span>
              <div className="w-7 h-7 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center">
                <i className="fa-solid fa-wand-magic-sparkles text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-slate-900">{totalAudienceReach.toLocaleString()}</div>
            <div className="text-[11px] text-slate-400 font-medium">Across Custom &amp; Lookalikes</div>
          </div>

          <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs space-y-2 hover:shadow-sm transition-shadow">
            <div className="flex items-center justify-between">
              <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
                Sync Frequency
              </span>
              <div className="w-7 h-7 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center">
                <i className="fa-solid fa-bolt text-sm" />
              </div>
            </div>
            <div className="text-2xl font-black text-slate-900">
              Real-time
            </div>
            <div className="text-[11px] text-slate-400 font-medium">Instant CAPI Webhooks</div>
          </div>
        </div>

        {/* AUDIENCE REPORT: WHO BUYS & WHO RETURNS (FREE & ALL TIERS) */}
        <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs p-5 sm:p-6 space-y-5">
          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-100 pb-4">
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-sm font-bold text-slate-900">
                  Audience Report: Who Buys &amp; Who Returns
                </h3>
                <span className="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 shadow-2xs">
                  Included in Free Plan
                </span>
              </div>
              <p className="text-xs text-slate-500 mt-0.5">
                Cohort breakdown of high-value repeat shoppers and refund patterns to optimize Meta CAPI ad spend.
              </p>
            </div>
            <div className="flex items-center gap-2 text-xs font-semibold text-slate-500">
              <i className="fa-regular fa-calendar text-slate-400" />
              <span>Rolling 30-Day Analysis</span>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* WHO BUYS COHORT */}
            <div className="p-4 rounded-xl bg-slate-50/60 border border-slate-200/80 space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-7 h-7 rounded-lg bg-slate-900 text-white flex items-center justify-center text-xs">
                    <i className="fa-solid fa-cart-shopping" />
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-slate-900">Who Buys: Customer Cohorts</h4>
                    <span className="text-[10px] text-slate-500">First-time vs repeat purchase velocity</span>
                  </div>
                </div>
                <span className="text-[11px] font-bold text-slate-700 bg-slate-100 px-2 py-0.5 rounded">
                  {audiences.length > 0 ? `${audiences.length} Synced Segments` : '0 Buyers Tracked'}
                </span>
              </div>

              <div className="p-4 text-center text-xs text-slate-500 bg-white rounded-lg border border-slate-200/60 space-y-1">
                <p className="font-semibold text-slate-700">No buyer cohort data recorded yet</p>
                <p className="text-[11px] text-slate-400">
                  Customer purchase cohorts will be generated automatically as live CAPI orders are recorded.
                </p>
              </div>
            </div>

            {/* WHO RETURNS COHORT */}
            <div className="p-4 rounded-xl bg-slate-50/60 border border-slate-200/80 space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="w-7 h-7 rounded-lg bg-slate-700 text-white flex items-center justify-center text-xs">
                    <i className="fa-solid fa-rotate-left" />
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-slate-900">Who Returns: Refund Patterns</h4>
                    <span className="text-[10px] text-slate-500">Return frequency &amp; risk suppression</span>
                  </div>
                </div>
                <span className="text-[11px] font-bold text-slate-700 bg-slate-100 px-2 py-0.5 rounded">
                  0 Refunds Recorded
                </span>
              </div>

              <div className="p-4 text-center text-xs text-slate-500 bg-white rounded-lg border border-slate-200/60 space-y-1">
                <p className="font-semibold text-slate-700">No refund pattern data recorded yet</p>
                <p className="text-[11px] text-slate-400">
                  Shopify order refund webhooks will populate return reasons and high-risk suppression metrics.
                </p>
              </div>
            </div>
          </div>
        </div>

        {/* Audiences Table */}
        <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
          <div className="p-4 sm:p-5 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
            <div>
              <h3 className="text-sm font-bold text-slate-900">Synchronized Audiences on Meta</h3>
              <p className="text-xs text-slate-400 mt-0.5">Target these audiences in Meta Ads Manager campaigns</p>
            </div>
            <a
              href="https://adsmanager.facebook.com/adsmanager/audiences"
              target="_blank"
              rel="noreferrer"
              className="text-xs font-semibold text-blue-600 hover:text-blue-700 flex items-center gap-1"
            >
              <span>Meta Audiences Manager</span>
              <i className="fa-solid fa-arrow-up-right-from-square text-[10px]" />
            </a>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse text-xs min-w-[700px]">
              <thead>
                <tr className="border-b border-slate-200/80 bg-slate-50/80 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
                  <th className="py-3 px-4">Status</th>
                  <th className="py-3 px-4">Audience Name</th>
                  <th className="py-3 px-4">Type</th>
                  <th className="py-3 px-4">Rule / Criteria</th>
                  <th className="py-3 px-4">Audience Size</th>
                  <th className="py-3 px-4">Match Rate</th>
                  <th className="py-3 px-4">Last Synced</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-slate-700">
                {audiences.length === 0 ? (
                  <tr>
                    <td colSpan={7} className="py-12 text-center text-slate-500">
                      <div className="max-w-sm mx-auto space-y-3">
                        <div className="w-10 h-10 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center mx-auto text-sm">
                          <i className="fa-solid fa-users" />
                        </div>
                        <div>
                          <p className="text-xs font-bold text-slate-800">No Audiences Created Yet</p>
                          <p className="text-[11px] text-slate-400 mt-0.5">
                            Create custom customer lists or lookalike audiences to sync with Meta Ads Manager.
                          </p>
                        </div>
                        <button
                          type="button"
                          onClick={() => setShowCreateModal(true)}
                          className="px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 text-white hover:bg-slate-800 transition-colors cursor-pointer inline-flex items-center gap-1.5 shadow-xs"
                        >
                          <i className="fa-solid fa-plus text-[10px]" />
                          <span>Create Audience</span>
                        </button>
                      </div>
                    </td>
                  </tr>
                ) : (
                  audiences.map((a) => (
                    <tr key={a.id} className="hover:bg-slate-50/70 transition-colors">
                      <td className="py-3.5 px-4">
                        <span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200/60 flex items-center gap-1 w-fit shadow-2xs">
                          <i className="fa-solid fa-circle-check text-[10px] text-emerald-500" />
                          <span>READY</span>
                        </span>
                      </td>
                      <td className="py-3.5 px-4 font-bold text-slate-900 max-w-xs">
                        <div>{a.name}</div>
                        <div className="text-[10px] font-mono text-slate-400 font-normal">{a.id}</div>
                      </td>
                      <td className="py-3.5 px-4">
                        <span className="px-2.5 py-1 rounded-full font-semibold text-[11px] bg-slate-100/80 text-slate-700 border border-slate-200/60 shadow-2xs">
                          {a.type}
                        </span>
                      </td>
                      <td className="py-3.5 px-4 text-slate-600 max-w-xs truncate">{a.rule}</td>
                      <td className="py-3.5 px-4 font-bold text-slate-900">{a.size.toLocaleString()}</td>
                      <td className="py-3.5 px-4 font-semibold text-emerald-600">{a.matchRate}</td>
                      <td className="py-3.5 px-4 text-slate-500 text-[11px]">
                        <div className="flex items-center gap-1">
                          <i className="fa-regular fa-clock text-[11px] text-slate-400" />
                          <span>{a.lastSynced}</span>
                        </div>
                      </td>
                    </tr>
                  ))
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {/* CREATE AUDIENCE MODAL */}
      {showCreateModal && (
        <div className="fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4">
          <div className="bg-white rounded-2xl shadow-xl border border-slate-200 max-w-md w-full max-h-[90vh] overflow-y-auto p-4 sm:p-6 space-y-4 animate-in fade-in zoom-in-95">
            <div className="flex items-center justify-between border-b border-slate-100 pb-3">
              <div className="flex items-center gap-2">
                <div className="w-7 h-7 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center font-bold">
                  <i className="fa-solid fa-users text-sm" />
                </div>
                <h3 className="text-sm font-bold text-slate-900">Create Meta Audience</h3>
              </div>
              <button
                onClick={() => setShowCreateModal(false)}
                className="text-slate-400 hover:text-slate-600 cursor-pointer"
              >
                <i className="fa-solid fa-xmark text-sm" />
              </button>
            </div>

            <form onSubmit={handleCreateAudience} className="space-y-4 text-xs">
              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Audience Name</label>
                <input
                  type="text"
                  required
                  placeholder="e.g. VIP Repeat Buyers (LTV > $300)"
                  value={newAudienceName}
                  onChange={(e) => setNewAudienceName(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-1 focus:ring-slate-900"
                />
              </div>

              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Audience Type</label>
                <select
                  value={newAudienceType}
                  onChange={(e) => setNewAudienceType(e.target.value as any)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl bg-white focus:outline-none focus:ring-1 focus:ring-slate-900"
                >
                  <option value="Custom Customer List">Custom Customer List (Shopify Orders / VIPs)</option>
                  <option value="Website Traffic CAPI">Website Traffic CAPI (PageViews, AddToCart, etc.)</option>
                  <option value="Lookalike 1%">Lookalike 1% (Highest Match Top 1% in Country)</option>
                </select>
              </div>

              <div className="space-y-1">
                <label className="font-semibold text-slate-700">Segmentation Rule</label>
                <input
                  type="text"
                  required
                  value={newRule}
                  onChange={(e) => setNewRule(e.target.value)}
                  className="w-full px-3 py-2 border border-slate-200 rounded-xl focus:outline-none focus:ring-1 focus:ring-slate-900"
                />
              </div>

              <div className="p-3 bg-indigo-50/70 border border-indigo-100 rounded-xl text-[11px] text-indigo-700 flex items-start gap-2">
                <i className="fa-solid fa-shield-halved text-indigo-600 text-sm shrink-0 mt-0.5" />
                <span>
                  Customer data is automatically hashed using SHA-256 before transmission to comply with GDPR, CCPA, and Meta Graph API privacy standards.
                </span>
              </div>

              <div className="flex items-center justify-end gap-2 pt-2">
                <button
                  type="button"
                  onClick={() => setShowCreateModal(false)}
                  className="px-4 py-2 rounded-xl text-slate-600 hover:bg-slate-100 font-semibold"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-bold shadow-sm"
                >
                  Create &amp; Sync to Meta
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </AppLayout>
  );
}