/**
 * AudienceSegments — reusable audiences with consent count, suppression count,
 * export/sync status, refresh, AND an editable segment builder with a live preview
 * count that always applies opt-out + suppression filtering (spec §4, §8, §12 E1/E2).
 * Exports/syncs only permitted, consented, suppression-filtered contacts.
 */
import React, { useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import {
    Users, RefreshCw, Download, Upload, ShieldCheck, ShieldX, UserCheck,
    Plus, Pencil, X, Target, MapPin, Lock, ShieldQuestion, Sparkles, SlidersHorizontal,
    CheckCircle2, ChevronDown, CircleDashed,
} from 'lucide-react';
import { useSocialAds } from '../SocialAdsContext.jsx';
import { FILTER_OPTIONS, previewSegment, DEFAULT_FILTER_DEF } from '../data/contactPool.js';
import { AUDIENCE_SUGGESTIONS } from '../ai/audienceAdvisor.js';
import { Card, SectionHeader, Btn } from '../components/ui.jsx';
import { toast } from 'sonner';

const SEGMENT_LABEL = {
    storm_geo: 'Storm geo', crm_stage: 'CRM stage', reactivation: 'Reactivation',
    b2b: 'B2B', referral: 'Referral',
};
const LAST_JOB_OPTIONS = [['', 'Any time'], ['90', '< 90 days'], ['180', '< 180 days'], ['365', '< 1 year'], ['540', '< 18 months']];

export default function AudienceSegments() {
    const { audiences, createAudience, updateAudience, syncAudience, refreshAudience } = useSocialAds();
    const [editing, setEditing] = useState(null); // { audience } edit · { preset } new-from-AI · {} blank new · null closed
    const [dismissed, setDismissed] = useState([]);

    // Hide a suggestion once a segment with that name exists, or the user dismisses it.
    const existingNames = useMemo(() => new Set(audiences.map(a => a.name)), [audiences]);
    const suggestions = AUDIENCE_SUGGESTIONS.filter(s => !existingNames.has(s.name) && !dismissed.includes(s.key));

    const exportCsv = (a) => toast.success(`Exported ${(a.eligibleCount ?? a.consentCount).toLocaleString()} eligible contacts from "${a.name}" to CSV`);
    const handleSync = (a, dest) => {
        const tid = toast.loading(`Syncing "${a.name}" to ${dest}…`);
        setTimeout(() => { toast.dismiss(tid); syncAudience(a.id, dest); }, 700);
    };

    return (
        <div>
            <SectionHeader icon={Users} title="Audience Segments" description="Reusable CRM audiences. Only consented contacts sync, and suppression lists are always applied — including for retargeting.">
                <Btn icon={Plus} onClick={() => setEditing({})}>New segment</Btn>
            </SectionHeader>

            {/* AI audience suggestions (spec §6) */}
            {suggestions.length > 0 && (
                <div className="rounded-xl border border-purple-200 dark:border-purple-500/20 bg-purple-50/60 dark:bg-purple-500/5 p-3 mb-5">
                    <div className="flex items-center gap-2 mb-3">
                        <Sparkles size={15} className="text-purple-500 shrink-0" />
                        <p className="text-xs text-zinc-600 dark:text-zinc-300">AI suggested segments — consent + suppression always applied; no sensitive-attribute targeting.</p>
                    </div>
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
                        {suggestions.map(s => (
                            <SuggestionCard key={s.key} s={s}
                                onCreate={() => createAudience({ name: s.name, segmentType: s.segmentType, filterDef: s.filterDef })}
                                onCustomize={() => setEditing({ preset: s })}
                                onDismiss={() => setDismissed(d => [...d, s.key])} />
                        ))}
                    </div>
                </div>
            )}

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {audiences.map(a => {
                    const eligible = a.eligibleCount ?? a.consentCount;
                    const eligiblePct = a.totalCount ? Math.round((eligible / a.totalCount) * 100) : 0;
                    return (
                        <Card key={a.id} className="!h-auto" pad="p-4">
                            <div className="flex items-start justify-between mb-2 gap-2">
                                <div className="min-w-0">
                                    <h4 className="font-bold text-sm text-zinc-900 dark:text-white">{a.name}</h4>
                                    <p className="text-[11px] text-zinc-400">{a.filters}</p>
                                </div>
                                <span className="text-[10px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-white/10 text-zinc-500 shrink-0">
                                    {SEGMENT_LABEL[a.segmentType] || a.segmentType}
                                </span>
                            </div>

                            {/* Count breakdown */}
                            <div className="grid grid-cols-3 gap-2 my-3">
                                <Stat icon={Users} label="Total" value={a.totalCount} color="text-zinc-500" />
                                <Stat icon={ShieldCheck} label="Consented" value={a.consentCount} color="text-emerald-500" />
                                <Stat icon={ShieldX} label="Suppressed" value={a.suppressionCount} color="text-red-500" />
                            </div>

                            {/* Eligible bar (consent ∩ not-suppressed) */}
                            <div className="mb-3">
                                <div className="flex items-center justify-between text-[10px] text-zinc-400 mb-1">
                                    <span className="flex items-center gap-1"><UserCheck size={11} /> Eligible to sync (consent + suppression)</span>
                                    <span className="font-mono font-semibold text-emerald-600 dark:text-emerald-400">{eligible.toLocaleString()} · {eligiblePct}%</span>
                                </div>
                                <div className="h-2 rounded-full bg-zinc-200 dark:bg-zinc-700 overflow-hidden">
                                    <div className="h-full bg-gradient-to-r from-emerald-400 to-emerald-500" style={{ width: `${eligiblePct}%` }} />
                                </div>
                            </div>

                            <div className="flex items-center justify-between gap-2 mb-2">
                                <span className="text-[10px] text-zinc-400">Updated {a.lastCount}{a.frequencyCap ? ` · freq cap ${a.frequencyCap}/wk` : ''}</span>
                                <SyncStatusChip audience={a} />
                            </div>

                            <div className="flex flex-wrap items-center gap-1.5 pt-3 border-t border-zinc-100 dark:border-white/5">
                                <Btn size="sm" variant="ghost" icon={Pencil} onClick={() => setEditing({ audience: a })}>Edit</Btn>
                                <Btn size="sm" variant="ghost" icon={RefreshCw} onClick={() => refreshAudience(a.id)}>Refresh</Btn>
                                <div className="flex items-center gap-1.5 ml-auto">
                                    <Btn size="sm" variant="outline" icon={Download} onClick={() => exportCsv(a)}>CSV</Btn>
                                    <SyncMenu onSync={(dest) => handleSync(a, dest)} />
                                </div>
                            </div>
                        </Card>
                    );
                })}
            </div>

            {editing && (
                <SegmentBuilder
                    audience={editing.audience}
                    preset={editing.preset}
                    onClose={() => setEditing(null)}
                    onSave={(def) => {
                        if (editing.audience) updateAudience(editing.audience.id, def);
                        else createAudience(def);
                        setEditing(null);
                    }}
                />
            )}
        </div>
    );
}

function Stat({ icon: Icon, label, value, color }) {
    return (
        <div className="rounded-lg bg-zinc-50 dark:bg-white/5 p-2 text-center">
            {Icon && <Icon size={14} className={`${color} mx-auto mb-0.5`} />}
            <p className="text-sm font-mono font-bold text-zinc-800 dark:text-zinc-100">{value.toLocaleString()}</p>
            <p className="text-[9px] uppercase tracking-wider text-zinc-400">{label}</p>
        </div>
    );
}

// ── Sync status + destination menu (spec §8 "export/sync status"; §12 E2) ──────
const SYNC_DESTINATIONS = ['Meta Custom Audience', 'Google Customer Match', 'LinkedIn Matched Audiences'];

function SyncStatusChip({ audience }) {
    if (audience.syncStatus === 'synced') {
        const when = audience.lastSyncedAt
            ? new Date(audience.lastSyncedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
            : '';
        const short = (audience.syncDestination || '').split(' ')[0];
        return (
            <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full" title={`Synced to ${audience.syncDestination}`}>
                <CheckCircle2 size={11} /> Synced · {short}{when ? ` · ${when}` : ''}
            </span>
        );
    }
    return (
        <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-zinc-400 bg-zinc-100 dark:bg-white/5 px-2 py-0.5 rounded-full">
            <CircleDashed size={11} /> Not synced
        </span>
    );
}

function SyncMenu({ onSync }) {
    const [open, setOpen] = useState(false);
    return (
        <div className="relative">
            <button onClick={() => setOpen(o => !o)}
                className="inline-flex items-center justify-center gap-1 font-semibold rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-amber-500 px-2.5 py-1.5 text-xs bg-gradient-to-r from-amber-400 to-orange-500 text-white shadow-lg shadow-amber-500/25 hover:shadow-amber-500/40">
                <Upload size={14} /> Sync <ChevronDown size={13} />
            </button>
            {open && (
                <>
                    <div className="fixed inset-0 z-10" onClick={() => setOpen(false)} />
                    <div className="absolute right-0 mt-1 w-52 rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 shadow-xl z-20 p-1">
                        <p className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-zinc-400">Sync to platform</p>
                        {SYNC_DESTINATIONS.map(d => (
                            <button key={d} onClick={() => { onSync(d); setOpen(false); }}
                                className="w-full text-left px-3 py-2 rounded-lg text-xs text-zinc-700 dark:text-zinc-200 hover:bg-amber-500/10 hover:text-amber-600 dark:hover:text-amber-400 transition-colors">
                                {d}
                            </button>
                        ))}
                    </div>
                </>
            )}
        </div>
    );
}

// ── AI suggestion card (spec §6): reasons visible, one-click create, opt-out aware ──
function SuggestionCard({ s, onCreate, onCustomize, onDismiss }) {
    const SIcon = s.icon;
    const reach = useMemo(() => previewSegment(s.filterDef), [s.filterDef]);
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-3 flex flex-col">
            <div className="flex items-start justify-between gap-2 mb-1.5">
                <div className="flex items-center gap-2 min-w-0">
                    <span className="p-1.5 rounded-lg bg-purple-500/10 text-purple-500 shrink-0">{SIcon && <SIcon size={15} />}</span>
                    <div className="min-w-0">
                        <h4 className="font-bold text-sm text-zinc-900 dark:text-white truncate">{s.name}</h4>
                        <span className="text-[10px] font-bold uppercase tracking-wide text-purple-500">AI · {Math.round(s.confidence * 100)}% match</span>
                    </div>
                </div>
                <button onClick={onDismiss} title="Dismiss" className="p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 shrink-0"><X size={14} /></button>
            </div>

            <p className="text-[11px] text-zinc-500 dark:text-zinc-400 mb-2">{s.rationale}</p>

            {/* AI reasons visible (spec §12 E1) */}
            <ul className="space-y-1 mb-2">
                {s.reasons.map((r, i) => (
                    <li key={i} className="text-[11px] text-zinc-600 dark:text-zinc-300 flex items-start gap-1.5">
                        <span className="text-purple-400 mt-1.5 w-1 h-1 rounded-full bg-purple-400 shrink-0" /> {r}
                    </li>
                ))}
            </ul>

            <div className="flex items-center gap-1.5 text-[11px] text-zinc-400 mb-3 mt-auto pt-2 border-t border-zinc-100 dark:border-white/5">
                <UserCheck size={12} className="text-emerald-500" />
                <span className="text-emerald-600 dark:text-emerald-400 font-mono font-semibold">{reach.eligible.toLocaleString()}</span> eligible after consent + suppression
            </div>

            <div className="flex items-center gap-2">
                <Btn size="sm" variant="primary" icon={Plus} onClick={onCreate}>Create</Btn>
                <Btn size="sm" variant="outline" icon={SlidersHorizontal} onClick={onCustomize}>Customize</Btn>
            </div>
        </div>
    );
}

// ── Segment builder modal: filter CRM contacts with a live, opt-out-aware count ──
function SegmentBuilder({ audience, preset, onClose, onSave }) {
    const init = audience || preset; // edit an existing audience, or seed a new one from an AI suggestion
    const [name, setName] = useState(init?.name || '');
    const [segmentType, setSegmentType] = useState(init?.segmentType || 'crm_stage');
    const [f, setF] = useState(() => ({ ...DEFAULT_FILTER_DEF, ...(init?.filterDef || {}) }));

    const set = (patch) => setF(prev => ({ ...prev, ...patch }));
    const toggleZip = (z) => set({ geo: f.geo.includes(z) ? f.geo.filter(x => x !== z) : [...f.geo, z] });

    const preview = useMemo(() => previewSegment(f), [f]);
    const optOuts = preview.matched - preview.consented;

    return createPortal(
        <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4" onClick={onClose}>
            <div className="absolute inset-0 bg-black/50 backdrop-blur-[1px]" />
            <div onClick={e => e.stopPropagation()} className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl border border-zinc-200 dark:border-white/10 animate-in zoom-in-95">
                {/* Header */}
                <div className="sticky top-0 z-10 bg-white/95 dark:bg-zinc-900/95 backdrop-blur border-b border-zinc-200 dark:border-white/10 px-5 py-3 flex items-center justify-between gap-3">
                    <div className="flex items-center gap-2">
                        <Target size={18} className="text-amber-500" />
                        <h3 className="font-bold text-sm text-zinc-900 dark:text-white">{audience ? 'Edit segment' : 'New segment'}</h3>
                    </div>
                    <button onClick={onClose} className="p-1.5 rounded-lg text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/10"><X size={18} /></button>
                </div>

                <div className="p-5 space-y-4">
                    {/* Name + type */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <Field label="Segment name">
                            <input value={name} onChange={e => setName(e.target.value)} placeholder="e.g. Plano storm — past 30 days"
                                className={inCls} />
                        </Field>
                        <Field label="Segment type">
                            <select value={segmentType} onChange={e => setSegmentType(e.target.value)} className={inCls}>
                                {Object.entries(SEGMENT_LABEL).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
                            </select>
                        </Field>
                    </div>

                    {/* CRM filters (spec §12 E1) */}
                    <div>
                        <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-2">Filter CRM contacts</p>
                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                            <Field label="Lifecycle stage">
                                <select value={f.stage} onChange={e => set({ stage: e.target.value })} className={inCls}>
                                    <option value="any">Any stage</option>
                                    {FILTER_OPTIONS.stages.map(s => <option key={s} value={s}>{s}</option>)}
                                </select>
                            </Field>
                            <Field label="Source">
                                <select value={f.source} onChange={e => set({ source: e.target.value })} className={inCls}>
                                    <option value="any">Any source</option>
                                    {FILTER_OPTIONS.sources.map(s => <option key={s} value={s}>{s}</option>)}
                                </select>
                            </Field>
                            <Field label="Service">
                                <select value={f.service} onChange={e => set({ service: e.target.value })} className={inCls}>
                                    <option value="any">Any service</option>
                                    {FILTER_OPTIONS.services.map(s => <option key={s} value={s}>{s}</option>)}
                                </select>
                            </Field>
                            <Field label="Last job within">
                                <select value={f.lastJobWithinDays || ''} onChange={e => set({ lastJobWithinDays: e.target.value ? Number(e.target.value) : null })} className={inCls}>
                                    {LAST_JOB_OPTIONS.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
                                </select>
                            </Field>
                            <Field label="Frequency cap (per week)">
                                <input type="number" min={0} max={14} value={f.frequencyCap ?? ''} onChange={e => set({ frequencyCap: e.target.value ? Number(e.target.value) : null })} className={inCls} />
                            </Field>
                        </div>
                    </div>

                    {/* Geography */}
                    <Field label={<span className="flex items-center gap-1"><MapPin size={11} /> Geography (service-area ZIPs)</span>}>
                        <div className="flex flex-wrap gap-1.5">
                            {FILTER_OPTIONS.zips.map(z => (
                                <button key={z} onClick={() => toggleZip(z)}
                                    className={`px-2.5 py-1 rounded-lg text-xs font-mono font-semibold transition-colors ${f.geo.includes(z) ? 'bg-amber-500 text-white' : 'bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10'}`}>
                                    {z}
                                </button>
                            ))}
                            {f.geo.length > 0 && <button onClick={() => set({ geo: [] })} className="px-2.5 py-1 rounded-lg text-xs text-zinc-400 hover:text-red-500">clear</button>}
                        </div>
                    </Field>

                    {/* Mandatory consent + suppression (spec §6) */}
                    <div className="rounded-xl border border-emerald-200 dark:border-emerald-500/20 bg-emerald-50/60 dark:bg-emerald-500/5 p-3 space-y-1.5">
                        <p className="text-[11px] font-semibold text-emerald-700 dark:text-emerald-400 flex items-center gap-1.5"><Lock size={12} /> Always applied (mandatory)</p>
                        <p className="text-[11px] text-zinc-600 dark:text-zinc-300 flex items-center gap-1.5"><ShieldCheck size={12} className="text-emerald-500" /> Consent filter — only opted-in contacts are reachable.</p>
                        <p className="text-[11px] text-zinc-600 dark:text-zinc-300 flex items-center gap-1.5"><ShieldX size={12} className="text-red-500" /> Suppression list — opt-outs/DNC removed, including for retargeting.</p>
                        <p className="text-[11px] text-zinc-500 flex items-start gap-1.5 pt-1 border-t border-emerald-200/50 dark:border-emerald-500/10"><ShieldQuestion size={12} className="text-zinc-400 mt-0.5 shrink-0" /> No sensitive-attribute targeting — only the CRM fields above can be used.</p>
                    </div>

                    {/* Live preview (spec §8 / §12 E2: count respects opt-outs + suppressions) */}
                    <div className="rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.02] p-4">
                        <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-400 mb-3">Estimated reach (live)</p>
                        <div className="flex items-center justify-between gap-2 flex-wrap">
                            <FunnelStep label="Matched" value={preview.matched} />
                            <FunnelArrow note={`− ${optOuts.toLocaleString()} no consent`} />
                            <FunnelStep label="Consented" value={preview.consented} />
                            <FunnelArrow note={`− ${preview.suppressed.toLocaleString()} suppressed`} />
                            <FunnelStep label="Eligible" value={preview.eligible} highlight />
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className="sticky bottom-0 bg-white/95 dark:bg-zinc-900/95 backdrop-blur border-t border-zinc-200 dark:border-white/10 px-5 py-3 flex justify-end gap-2">
                    <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
                    <Btn variant="primary" icon={Target} onClick={() => onSave({ name, segmentType, filterDef: f })}>
                        {audience ? 'Save segment' : 'Create segment'} · {preview.eligible.toLocaleString()} eligible
                    </Btn>
                </div>
            </div>
        </div>,
        document.body,
    );
}

const inCls = 'w-full rounded-lg border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-2.5 py-2 text-sm text-zinc-800 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-amber-500';

function Field({ label, children }) {
    return (
        <label className="block">
            <span className="text-[11px] font-semibold text-zinc-500 dark:text-zinc-400 mb-1 block">{label}</span>
            {children}
        </label>
    );
}

function FunnelStep({ label, value, highlight }) {
    return (
        <div className="text-center">
            <p className={`text-xl font-mono font-bold ${highlight ? 'text-emerald-600 dark:text-emerald-400' : 'text-zinc-800 dark:text-zinc-100'}`}>{value.toLocaleString()}</p>
            <p className="text-[10px] uppercase tracking-wider text-zinc-400">{label}</p>
        </div>
    );
}

function FunnelArrow({ note }) {
    return (
        <div className="flex flex-col items-center text-zinc-400 min-w-0">
            <span className="text-lg leading-none">→</span>
            <span className="text-[9px] text-red-400 whitespace-nowrap">{note}</span>
        </div>
    );
}