/**
 * EstimateWizardAdmin — internal admin controls + analytics (spec §14, §16, §18).
 *
 * Tenant-controls (no hard-coded pricing/copy): feature kill-switch, AI toggle,
 * conservative mode, per-package price + base discount + service life, and report
 * branding. Persists as overrides via saveConfigOverrides(). Also shows a funnel
 * summary built from completed-session submissions (spec §16).
 */
import React, { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { Save, RotateCcw, Power, Sparkles, ShieldCheck, BarChart3, Package, History } from 'lucide-react';
import {
    getTenantConfig, loadConfigOverrides, publishConfigOverrides, resetConfigOverrides,
} from './data/tenantConfig';
import { loadSubmissions } from './api/crmHandoff';

const PKG_LABEL = { GOOD: 'Good', BETTER: 'Better', BEST: 'Best' };

const Toggle = ({ label, desc, checked, onChange, icon: Icon }) => (
    <label className="flex items-start justify-between gap-3 rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4 cursor-pointer">
        <div className="flex items-start gap-2.5">
            {Icon && <Icon size={18} className="text-amber-500 mt-0.5" />}
            <div>
                <div className="font-semibold text-zinc-900 dark:text-white">{label}</div>
                <div className="text-xs text-zinc-500 dark:text-zinc-400">{desc}</div>
            </div>
        </div>
        <input type="checkbox" className="mt-1 h-5 w-5 accent-amber-500 shrink-0" checked={checked} onChange={(e) => onChange(e.target.checked)} />
    </label>
);

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

const textInput = numInput;
const areaInput = numInput + ' min-h-[64px] resize-y leading-relaxed';

const EstimateWizardAdmin = () => {
    const initial = useMemo(() => getTenantConfig(), []);
    const [cfg, setCfg] = useState(initial);
    const [versionInfo, setVersionInfo] = useState(() => {
        const o = loadConfigOverrides();
        return { version: initial.version, versionedAt: o.versionedAt || null, history: o.versionHistory || [] };
    });

    const submissions = useMemo(() => loadSubmissions(), []);
    const analytics = useMemo(() => {
        const total = submissions.length;
        const dist = (key) => submissions.reduce((m, s) => { const k = s[key]; if (k) m[k] = (m[k] || 0) + 1; return m; }, {});
        const booked = submissions.filter((s) => s.report?.appointmentBooked).length;
        const addonAttach = total ? (submissions.reduce((n, s) => n + (s.selectedAddons?.length || 0), 0) / total) : 0;
        return { total, recommended: dist('recommendedPackage'), selected: dist('selectedPackage'), booked, addonAttach };
    }, [submissions]);

    const setFlag = (k, v) => setCfg((c) => ({ ...c, [k]: v }));
    const setPkg = (type, field, value) => setCfg((c) => ({
        ...c,
        packages: c.packages.map((p) => (p.type === type ? { ...p, [field]: value } : p)),
    }));
    // Included scope is edited as one item per line.
    const setScope = (type, text) => setPkg(type, 'scope', text.split('\n').map((s) => s.trim()).filter(Boolean));
    const setDiscount = (type, value) => setCfg((c) => ({
        ...c,
        discountScenarios: { ...c.discountScenarios, [type]: { ...c.discountScenarios[type], base: value } },
    }));
    const setBranding = (field, value) => setCfg((c) => ({ ...c, branding: { ...c.branding, [field]: value } }));

    const handleSave = () => {
        const prev = loadConfigOverrides();
        const overrides = {
            ...prev,
            featureEnabled: cfg.featureEnabled,
            aiExplanationsEnabled: cfg.aiExplanationsEnabled,
            conservativeMode: cfg.conservativeMode,
            branding: cfg.branding,
            discountScenarios: cfg.discountScenarios,
            // Full Good/Better/Best content is tenant-controlled (spec §4/§14).
            packages: cfg.packages.map((p) => ({
                type: p.type,
                name: p.name,
                category: p.category,
                warrantyLabel: p.warrantyLabel,
                hailResistance: p.hailResistance,
                position: p.position,
                fit: p.fit,
                scope: p.scope,
                pricePerSquare: p.pricePerSquare,
                serviceLifeYears: p.serviceLifeYears,
            })),
        };
        const saved = publishConfigOverrides(overrides);   // bumps version + history
        setVersionInfo({ version: saved.version, versionedAt: saved.versionedAt, history: saved.versionHistory });
        setCfg((c) => ({ ...c, version: saved.version }));
        toast.success(`Published ${saved.version}`);
    };

    const handleReset = () => {
        resetConfigOverrides();
        const fresh = getTenantConfig();
        setCfg(fresh);
        setVersionInfo({ version: fresh.version, versionedAt: null, history: [] });
        toast.message('Reset to defaults');
    };

    return (
        <div className="h-full overflow-auto bg-zinc-50 dark:bg-[#09090b]">
            <div className="max-w-4xl mx-auto p-4 md:p-6 space-y-6">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div>
                        <h1 className="text-2xl font-bold text-zinc-900 dark:text-white flex items-center gap-2">
                            <span className="w-2 h-6 bg-amber-500 rounded-full" /> Estimate Wizard — Admin
                        </h1>
                        <p className="text-zinc-500 dark:text-zinc-400 text-sm ml-4">
                            Tenant controls for package content, pricing, discounts, AI, branding, and analytics.
                        </p>
                        <div className="ml-4 mt-1.5 flex items-center gap-2 text-[11px]">
                            <span className="inline-flex items-center gap-1 rounded-full bg-zinc-100 dark:bg-white/5 px-2 py-0.5 font-mono font-semibold text-zinc-600 dark:text-zinc-300">
                                <History size={11} /> {versionInfo.version}
                            </span>
                            {versionInfo.versionedAt && (
                                <span className="text-zinc-400">
                                    published {new Date(versionInfo.versionedAt).toLocaleString()}
                                </span>
                            )}
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <button onClick={handleReset} className="rounded-xl border border-zinc-200 dark:border-white/10 px-3 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:border-amber-400 flex items-center gap-1.5">
                            <RotateCcw size={15} /> Reset
                        </button>
                        <button onClick={handleSave} className="rounded-xl bg-gradient-to-r from-amber-400 to-orange-500 text-white px-4 py-2 text-sm font-semibold flex items-center gap-1.5 shadow-lg shadow-amber-500/25">
                            <Save size={15} /> Save &amp; publish
                        </button>
                    </div>
                </div>

                {/* Feature flags */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <Toggle icon={Power} label="Feature enabled" desc="Master kill-switch for the public wizard." checked={cfg.featureEnabled} onChange={(v) => setFlag('featureEnabled', v)} />
                    <Toggle icon={Sparkles} label="AI explanations" desc="Use AI copy (off = deterministic text)." checked={cfg.aiExplanationsEnabled} onChange={(v) => setFlag('aiExplanationsEnabled', v)} />
                    <Toggle icon={ShieldCheck} label="Conservative mode" desc="Hide customer-facing savings claims." checked={cfg.conservativeMode} onChange={(v) => setFlag('conservativeMode', v)} />
                </div>

                {/* Good / Better / Best content — fully tenant-controlled (spec §4/§14) */}
                <section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
                    <h2 className="font-semibold text-zinc-900 dark:text-white mb-1 flex items-center gap-2">
                        <Package size={17} className="text-amber-500" /> Good / Better / Best content
                    </h2>
                    <p className="text-[11px] text-zinc-400 mb-4">
                        Every customer-facing field is editable here — nothing is hard-coded. Saving publishes a new version.
                    </p>
                    <div className="space-y-5">
                        {cfg.packages.map((p) => (
                            <div key={p.type} className="rounded-xl border border-zinc-200 dark:border-white/10 p-3.5">
                                <div className="text-xs font-bold uppercase tracking-wide text-amber-600 dark:text-amber-400 mb-3">{PKG_LABEL[p.type]}</div>
                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Package name
                                        <input className={textInput} value={p.name} onChange={(e) => setPkg(p.type, 'name', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Category / description
                                        <input className={textInput} value={p.category} onChange={(e) => setPkg(p.type, 'category', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Warranty label
                                        <input className={textInput} value={p.warrantyLabel} onChange={(e) => setPkg(p.type, 'warrantyLabel', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Hail resistance label
                                        <input className={textInput} value={p.hailResistance} onChange={(e) => setPkg(p.type, 'hailResistance', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Positioning / upgrade copy
                                        <input className={textInput} value={p.position} onChange={(e) => setPkg(p.type, 'position', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Best-fit description
                                        <textarea className={areaInput} value={p.fit} onChange={(e) => setPkg(p.type, 'fit', e.target.value)} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400 sm:col-span-2">Included scope (one item per line)
                                        <textarea className={areaInput} value={(p.scope || []).join('\n')} onChange={(e) => setScope(p.type, e.target.value)} />
                                    </label>
                                </div>
                                <div className="grid grid-cols-3 gap-3 mt-3">
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Price / square ($)
                                        <input type="number" className={numInput} value={p.pricePerSquare} onChange={(e) => setPkg(p.type, 'pricePerSquare', Number(e.target.value))} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Service life (yrs)
                                        <input type="number" className={numInput} value={p.serviceLifeYears} onChange={(e) => setPkg(p.type, 'serviceLifeYears', Number(e.target.value))} />
                                    </label>
                                    <label className="text-xs text-zinc-500 dark:text-zinc-400">Base discount (%)
                                        <input type="number" className={numInput} value={cfg.discountScenarios[p.type]?.base ?? 0} onChange={(e) => setDiscount(p.type, Number(e.target.value))} />
                                    </label>
                                </div>
                            </div>
                        ))}
                    </div>
                    <p className="text-[11px] text-zinc-400 mt-3">Customer copy always states discounts are illustrative — "ask your carrier to confirm."</p>
                </section>

                {/* Branding */}
                <section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
                    <h2 className="font-semibold text-zinc-900 dark:text-white mb-3">Report branding</h2>
                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                        <label className="text-xs text-zinc-500 dark:text-zinc-400">Company
                            <input className={numInput} value={cfg.branding.company} onChange={(e) => setBranding('company', e.target.value)} />
                        </label>
                        <label className="text-xs text-zinc-500 dark:text-zinc-400">Phone
                            <input className={numInput} value={cfg.branding.phone} onChange={(e) => setBranding('phone', e.target.value)} />
                        </label>
                        <label className="text-xs text-zinc-500 dark:text-zinc-400">Primary color
                            <input className={numInput} value={cfg.branding.primaryColor} onChange={(e) => setBranding('primaryColor', e.target.value)} />
                        </label>
                    </div>
                </section>

                {/* Analytics */}
                <section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
                    <h2 className="font-semibold text-zinc-900 dark:text-white mb-3 flex items-center gap-2">
                        <BarChart3 size={17} className="text-amber-500" /> Funnel analytics
                    </h2>
                    {analytics.total === 0 ? (
                        <p className="text-sm text-zinc-500 dark:text-zinc-400">No completed estimates yet. Finish a wizard run to populate metrics.</p>
                    ) : (
                        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                            <Metric label="Completed reports" value={analytics.total} />
                            <Metric label="Appointments booked" value={analytics.booked} />
                            <Metric label="Avg add-ons / report" value={analytics.addonAttach.toFixed(1)} />
                            <Metric label="Best recommended" value={analytics.recommended.BEST || 0} />
                            <DistRow label="Recommended split" dist={analytics.recommended} />
                            <DistRow label="Customer-selected split" dist={analytics.selected} />
                        </div>
                    )}
                </section>

                {/* Version history */}
                <section className="rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 p-4">
                    <h2 className="font-semibold text-zinc-900 dark:text-white mb-3 flex items-center gap-2">
                        <History size={17} className="text-amber-500" /> Version history
                    </h2>
                    {(!versionInfo.history || versionInfo.history.length === 0) ? (
                        <p className="text-sm text-zinc-500 dark:text-zinc-400">
                            No published changes yet — currently on defaults ({versionInfo.version}).
                            Each save publishes a new version that reports are stamped with.
                        </p>
                    ) : (
                        <ul className="space-y-1.5">
                            {versionInfo.history.map((h) => (
                                <li key={h.version} className="flex items-center justify-between text-sm border-b border-zinc-100 dark:border-white/5 pb-1.5 last:border-0">
                                    <span className="font-mono font-semibold text-zinc-700 dark:text-zinc-200">{h.version}</span>
                                    <span className="text-xs text-zinc-400">{new Date(h.versionedAt).toLocaleString()}</span>
                                </li>
                            ))}
                        </ul>
                    )}
                </section>
            </div>
        </div>
    );
};

const Metric = ({ label, value }) => (
    <div className="rounded-xl bg-zinc-50 dark:bg-white/5 p-3">
        <div className="text-xs text-zinc-400">{label}</div>
        <div className="text-xl font-bold text-zinc-900 dark:text-white mt-0.5">{value}</div>
    </div>
);

const DistRow = ({ label, dist }) => (
    <div className="rounded-xl bg-zinc-50 dark:bg-white/5 p-3 col-span-2">
        <div className="text-xs text-zinc-400 mb-1">{label}</div>
        <div className="flex gap-3 text-sm font-medium text-zinc-700 dark:text-zinc-200">
            {['GOOD', 'BETTER', 'BEST'].map((t) => (
                <span key={t}>{PKG_LABEL[t]}: <span className="text-amber-600 dark:text-amber-400">{dist[t] || 0}</span></span>
            ))}
        </div>
    </div>
);

export default EstimateWizardAdmin;