import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { useServerFn } from "@tanstack/react-start";
import { useState } from "react";
import ReactMarkdown from "react-markdown";
import { supabase } from "@/integrations/supabase/client";
import { generateRecommendations, generateFinancialDNA, generateStory } from "@/lib/ai.functions";
import { GlassCard, SectionLabel } from "@/components/GlassCard";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from "sonner";
import {
  Brain, Sparkles, RefreshCw, Loader2, AlertTriangle, TrendingUp, Info,
  ShieldAlert, BookOpen, Fingerprint, ChevronLeft, X,
} from "lucide-react";
import { formatCurrency } from "@/lib/format";
import { DisclaimerNote } from "@/components/legal/DisclaimerNote";

export const Route = createFileRoute("/_authenticated/intelligence")({
  head: () => ({
    meta: [
      { title: "Intelligence — PRUDENTIA" },
      { name: "description", content: "Proactive AI recommendations, your Financial DNA behaviour profile, and weekly or monthly money stories." },
      { property: "og:title", content: "Intelligence — PRUDENTIA" },
      { property: "og:description", content: "Proactive recommendations, Financial DNA, and narrative money stories." },
    ],
  }),
  component: IntelligencePage,
});

const SEVERITY: Record<string, { icon: any; cls: string; label: string }> = {
  info: { icon: Info, cls: "text-electric", label: "Insight" },
  success: { icon: TrendingUp, cls: "text-success", label: "Opportunity" },
  warning: { icon: AlertTriangle, cls: "text-warning", label: "Watch" },
  critical: { icon: ShieldAlert, cls: "text-destructive", label: "Urgent" },
};

function IntelligencePage() {
  const { user } = Route.useRouteContext();
  const qc = useQueryClient();
  const recFn = useServerFn(generateRecommendations);
  const dnaFn = useServerFn(generateFinancialDNA);
  const storyFn = useServerFn(generateStory);

  const [busy, setBusy] = useState<string | null>(null);
  const [storyPeriod, setStoryPeriod] = useState<"week" | "month">("week");

  const profileQ = useQuery({
    queryKey: ["profile", user.id],
    queryFn: async () => (await supabase.from("profiles").select("currency").eq("id", user.id).maybeSingle()).data,
  });
  const currency = profileQ.data?.currency ?? "USD";

  const insightsQ = useQuery({
    queryKey: ["insights", user.id],
    queryFn: async () =>
      (await supabase.from("ai_insights").select("*").eq("user_id", user.id)
        .order("created_at", { ascending: false })).data ?? [],
  });

  const all = insightsQ.data ?? [];
  const recs = all.filter((i: any) => i.kind === "recommendation" && !i.dismissed);
  const dna = all.find((i: any) => i.kind === "dna");
  const stories = all.filter((i: any) => i.kind === "story_week" || i.kind === "story_month");
  const latestStory = stories.find((s: any) => s.kind === (storyPeriod === "week" ? "story_week" : "story_month"));

  async function run(key: string, fn: () => Promise<unknown>, okMsg: string) {
    setBusy(key);
    try {
      await fn();
      qc.invalidateQueries({ queryKey: ["insights", user.id] });
      toast.success(okMsg);
    } catch (e: any) {
      toast.error(e?.message ?? "Something went wrong");
    } finally { setBusy(null); }
  }

  async function dismiss(id: string) {
    const { error } = await supabase.from("ai_insights").update({ dismissed: true }).eq("id", id);
    if (error) return toast.error(error.message);
    qc.invalidateQueries({ queryKey: ["insights", user.id] });
  }

  const traits = (dna?.data as any)?.traits;

  return (
    <div className="px-4 pt-8 space-y-6 pb-4">
      <header className="flex items-end justify-between px-1">
        <div>
          <Link to="/coach" className="text-[11px] text-muted-foreground flex items-center gap-1">
            <ChevronLeft className="size-3" /> Coach
          </Link>
          <h1 className="text-2xl font-semibold mt-1 flex items-center gap-2">
            <Brain className="size-5 text-electric" />
            <span className="text-gradient-brand">Intelligence</span>
          </h1>
        </div>
      </header>

      {/* Proactive recommendations */}
      <section className="space-y-3">
        <div className="flex items-center justify-between">
          <SectionLabel>Proactive Recommendations</SectionLabel>
          <button
            onClick={() => run("rec", () => recFn(), "Recommendations refreshed")}
            disabled={busy === "rec"}
            className="text-[11px] text-electric flex items-center gap-1 disabled:opacity-50"
          >
            {busy === "rec" ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
            {recs.length ? "Refresh" : "Generate"}
          </button>
        </div>

        {insightsQ.isLoading ? (
          <GlassCard className="space-y-2"><Skeleton className="h-4 w-2/3" /><Skeleton className="h-4 w-full" /></GlassCard>
        ) : recs.length === 0 ? (
          <GlassCard>
            <p className="text-sm text-muted-foreground">
              PRUDENTIA scans your income, spending, budgets and goals for actions worth taking. Generate your first set.
            </p>
          </GlassCard>
        ) : (
          recs.map((r: any) => {
            const sev = SEVERITY[r.severity] ?? SEVERITY.info;
            const Icon = sev.icon;
            return (
              <GlassCard key={r.id} className="space-y-2">
                <div className="flex items-start gap-2">
                  <Icon className={`size-4 mt-0.5 shrink-0 ${sev.cls}`} />
                  <div className="flex-1">
                    <p className={`text-[10px] uppercase tracking-widest ${sev.cls}`}>{sev.label}</p>
                    <p className="text-sm font-medium mt-0.5">{r.title}</p>
                    <p className="text-[13px] text-foreground/85 leading-relaxed mt-1">{r.body}</p>
                    {(r.data as any)?.impact && (
                      <p className="text-[11px] text-muted-foreground mt-1.5">Expected impact: {(r.data as any).impact}</p>
                    )}
                  </div>
                  <button onClick={() => dismiss(r.id)} className="text-muted-foreground hover:text-foreground" aria-label="Dismiss">
                    <X className="size-3.5" />
                  </button>
                </div>
              </GlassCard>
            );
          })
        )}
      </section>

      {/* Financial DNA */}
      <section className="space-y-3">
        <div className="flex items-center justify-between">
          <SectionLabel>Financial DNA</SectionLabel>
          <button
            onClick={() => run("dna", () => dnaFn(), "Financial DNA updated")}
            disabled={busy === "dna"}
            className="text-[11px] text-electric flex items-center gap-1 disabled:opacity-50"
          >
            {busy === "dna" ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
            {dna ? "Re-learn" : "Analyze"}
          </button>
        </div>

        {dna ? (
          <GlassCard className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="size-11 rounded-2xl bg-gradient-to-br from-electric to-purple grid place-items-center glow-electric shrink-0">
                <Fingerprint className="size-5 text-primary-foreground" />
              </div>
              <div>
                <p className="text-[10px] uppercase tracking-widest text-muted-foreground">Your archetype</p>
                <p className="text-lg font-semibold leading-tight">{dna.title}</p>
              </div>
            </div>
            {dna.body && <p className="text-[13px] leading-relaxed text-foreground/90">{dna.body}</p>}

            {traits && (
              <div className="grid grid-cols-2 gap-2">
                <Trait label="Avg transaction" value={formatCurrency(traits.avg_transaction ?? 0, currency)} />
                <Trait label="Savings rate" value={`${traits.savings_rate ?? 0}%`} />
                <Trait label="Weekend spend" value={`${traits.weekend_share ?? 0}%`} />
                <Trait label="Small/impulse buys" value={`${traits.impulse_share ?? 0}%`} />
                <Trait label="Busiest day" value={traits.busiest_day ?? "—"} />
                <Trait label="Top category" value={traits.top_categories?.[0]?.category ?? "—"} />
              </div>
            )}

            {traits?.top_categories?.length > 0 && (
              <div className="space-y-1.5">
                <p className="text-[10px] uppercase tracking-widest text-muted-foreground">Where money goes</p>
                {traits.top_categories.map((c: any) => (
                  <div key={c.category} className="space-y-1">
                    <div className="flex justify-between text-[11px]">
                      <span>{c.category}</span>
                      <span className="text-muted-foreground">{formatCurrency(c.amount, currency)} · {c.share}%</span>
                    </div>
                    <div className="h-1.5 rounded-full bg-white/10 overflow-hidden">
                      <div className="h-full rounded-full bg-gradient-to-r from-electric to-purple transition-all duration-700" style={{ width: `${Math.min(100, c.share)}%` }} />
                    </div>
                  </div>
                ))}
              </div>
            )}

            <DnaList label="Strengths" items={(dna.data as any)?.strengths} tone="text-success" />
            <DnaList label="Patterns" items={(dna.data as any)?.patterns} tone="text-electric" />
            <DnaList label="Blind spots" items={(dna.data as any)?.blind_spots} tone="text-warning" />
          </GlassCard>
        ) : (
          <GlassCard>
            <p className="text-sm text-muted-foreground">
              PRUDENTIA learns how you actually behave with money — timing, categories, impulse patterns — and turns it into a profile.
            </p>
          </GlassCard>
        )}
      </section>

      {/* Stories */}
      <section className="space-y-3">
        <div className="flex items-center justify-between">
          <SectionLabel>Money Story</SectionLabel>
          <button
            onClick={() => run("story", () => storyFn({ data: { period: storyPeriod } }), "Story written")}
            disabled={busy === "story"}
            className="text-[11px] text-electric flex items-center gap-1 disabled:opacity-50"
          >
            {busy === "story" ? <Loader2 className="size-3 animate-spin" /> : <Sparkles className="size-3" />}
            Write {storyPeriod}ly
          </button>
        </div>

        <div className="flex gap-1.5">
          {(["week", "month"] as const).map((p) => (
            <button
              key={p}
              onClick={() => setStoryPeriod(p)}
              className={`rounded-full px-3 py-1.5 text-[11px] font-medium ${storyPeriod === p ? "bg-gradient-to-br from-electric to-purple text-primary-foreground" : "glass text-muted-foreground"}`}
            >
              {p === "week" ? "This week" : "This month"}
            </button>
          ))}
        </div>

        {latestStory ? (
          <GlassCard className="space-y-3">
            <div className="flex items-center gap-2 text-purple">
              <BookOpen className="size-4" />
              <span className="text-[11px] font-semibold tracking-[0.25em] uppercase">Story</span>
            </div>
            <p className="text-[17px] font-medium leading-snug">{latestStory.title}</p>
            <div className="markdown-chat text-[13px] leading-relaxed text-foreground/90">
              <ReactMarkdown>{latestStory.body ?? ""}</ReactMarkdown>
            </div>
            {(latestStory.data as any)?.highlight && (
              <div className="rounded-2xl bg-white/5 border border-white/10 p-3">
                <p className="text-[10px] uppercase tracking-widest text-success">Highlight</p>
                <p className="text-[13px] mt-1">{(latestStory.data as any).highlight}</p>
              </div>
            )}
            {(latestStory.data as any)?.watch && (
              <div className="rounded-2xl bg-white/5 border border-white/10 p-3">
                <p className="text-[10px] uppercase tracking-widest text-warning">Watch</p>
                <p className="text-[13px] mt-1">{(latestStory.data as any).watch}</p>
              </div>
            )}
            <p className="text-[10px] text-muted-foreground">
              {latestStory.period_start} → {latestStory.period_end}
            </p>
          </GlassCard>
        ) : (
          <GlassCard>
            <p className="text-sm text-muted-foreground">
              A plain-language narrative of your {storyPeriod}: what came in, what went out, and what it means.
            </p>
          </GlassCard>
        )}

        {stories.length > 1 && (
          <div className="space-y-2">
            <p className="text-[10px] uppercase tracking-widest text-muted-foreground px-1">Earlier stories</p>
            {stories.slice(1, 6).map((s: any) => (
              <GlassCard key={s.id} className="py-3">
                <p className="text-[13px] font-medium">{s.title}</p>
                <p className="text-[10px] text-muted-foreground mt-0.5">
                  {s.kind === "story_week" ? "Weekly" : "Monthly"} · {new Date(s.created_at).toLocaleDateString()}
                </p>
              </GlassCard>
            ))}
          </div>
        )}
      </section>

      <DisclaimerNote className="px-1 pt-1" />
    </div>
  );
}

function Trait({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-2xl bg-white/5 border border-white/10 px-3 py-2">
      <p className="text-[10px] uppercase tracking-widest text-muted-foreground">{label}</p>
      <p className="text-sm font-medium mt-0.5">{value}</p>
    </div>
  );
}

function DnaList({ label, items, tone }: { label: string; items?: string[]; tone: string }) {
  if (!items?.length) return null;
  return (
    <div className="space-y-1">
      <p className={`text-[10px] uppercase tracking-widest ${tone}`}>{label}</p>
      <ul className="space-y-1">
        {items.map((i) => (
          <li key={i} className="text-[13px] text-foreground/85 flex gap-2">
            <span className={tone}>·</span>
            {i}
          </li>
        ))}
      </ul>
    </div>
  );
}