import { createFileRoute } from "@tanstack/react-router";
import { queryOptions, useSuspenseQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { useServerFn } from "@tanstack/react-start";
import { getAdminCourse, updateTracking } from "@/lib/admin.functions";
import { toast } from "sonner";

const q = queryOptions({ queryKey: ["admin-course"], queryFn: () => getAdminCourse() });

export const Route = createFileRoute("/_authenticated/admin/tracking")({
  loader: ({ context }) => context.queryClient.ensureQueryData(q),
  component: AdminTracking,
});

function AdminTracking() {
  const { data } = useSuspenseQuery(q);
  const qc = useQueryClient();
  const saveFn = useServerFn(updateTracking);
  const s: any = data.settings ?? {};
  const [form, setForm] = useState({
    fb_pixel_id: s.fb_pixel_id ?? "",
    fb_pixel_enabled: !!s.fb_pixel_enabled,
    tiktok_pixel_id: s.tiktok_pixel_id ?? "",
    tiktok_pixel_enabled: !!s.tiktok_pixel_enabled,
    ga_measurement_id: s.ga_measurement_id ?? "",
    ga_enabled: !!s.ga_enabled,
  });

  const save = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      await saveFn({ data: {
        fb_pixel_id: form.fb_pixel_id || null,
        fb_pixel_enabled: form.fb_pixel_enabled,
        tiktok_pixel_id: form.tiktok_pixel_id || null,
        tiktok_pixel_enabled: form.tiktok_pixel_enabled,
        ga_measurement_id: form.ga_measurement_id || null,
        ga_enabled: form.ga_enabled,
      }});
      toast.success("Tracking saved");
      qc.invalidateQueries({ queryKey: ["admin-course"] });
      qc.invalidateQueries({ queryKey: ["landing"] });
    } catch (e: any) { toast.error(e.message); }
  };

  return (
    <div>
      <h1 className="font-display text-3xl font-bold">Tracking &amp; Analytics</h1>
      <p className="mt-1 text-sm text-muted-foreground">
        Add your marketing pixel IDs. Scripts load asynchronously and events fire automatically on page view, signup, checkout, and purchase.
      </p>

      <form onSubmit={save} className="mt-6 max-w-2xl space-y-5">
        <Card title="Facebook Pixel" desc="Used by Facebook & Instagram Ads. Find your Pixel ID in Events Manager.">
          <Toggle checked={form.fb_pixel_enabled} onChange={(v) => setForm({ ...form, fb_pixel_enabled: v })} label="Enable Facebook Pixel" />
          <Field label="Facebook Pixel ID" value={form.fb_pixel_id} onChange={(v) => setForm({ ...form, fb_pixel_id: v })} placeholder="e.g. 1234567890123456" />
        </Card>

        <Card title="TikTok Pixel" desc="Used by TikTok Ads. Find your Pixel ID in TikTok Events Manager.">
          <Toggle checked={form.tiktok_pixel_enabled} onChange={(v) => setForm({ ...form, tiktok_pixel_enabled: v })} label="Enable TikTok Pixel" />
          <Field label="TikTok Pixel ID" value={form.tiktok_pixel_id} onChange={(v) => setForm({ ...form, tiktok_pixel_id: v })} placeholder="e.g. CXXXXXXXXXXXXXXXX" />
        </Card>

        <Card title="Google Analytics 4" desc="Provides traffic & conversion analytics in Google Analytics.">
          <Toggle checked={form.ga_enabled} onChange={(v) => setForm({ ...form, ga_enabled: v })} label="Enable Google Analytics" />
          <Field label="Measurement ID" value={form.ga_measurement_id} onChange={(v) => setForm({ ...form, ga_measurement_id: v })} placeholder="G-XXXXXXXXXX" />
        </Card>

        <button className="rounded-lg bg-gradient-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-glow">Save tracking settings</button>
      </form>

      <div className="mt-8 max-w-2xl rounded-2xl border border-border bg-card/40 p-5 text-xs text-muted-foreground">
        <p className="mb-2 font-semibold text-foreground">Tracked events</p>
        <ul className="space-y-1">
          <li>• PageView — every route change</li>
          <li>• ViewContent — landing & course pages</li>
          <li>• Lead / SubmitForm — payment request submitted</li>
          <li>• CompleteRegistration — new account created</li>
          <li>• InitiateCheckout — buy page opened</li>
          <li>• Purchase / CompletePayment — fires on dashboard once admin approves a payment</li>
        </ul>
      </div>
    </div>
  );
}

function Card({ title, desc, children }: { title: string; desc: string; children: React.ReactNode }) {
  return (
    <div className="rounded-2xl border border-border bg-card p-5">
      <h3 className="font-semibold">{title}</h3>
      <p className="mt-1 text-xs text-muted-foreground">{desc}</p>
      <div className="mt-4 space-y-3">{children}</div>
    </div>
  );
}
function Toggle({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
  return (
    <label className="flex cursor-pointer items-center justify-between rounded-lg bg-muted/40 px-3 py-2 text-sm">
      <span>{label}</span>
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
    </label>
  );
}
function Field({ label, value, onChange, placeholder }: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
  return (
    <label className="block">
      <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</span>
      <input value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} className="mt-1.5 block w-full rounded-lg border border-border bg-input px-3 py-2.5 text-sm outline-none ring-primary/40 focus:ring-2" />
    </label>
  );
}