"use client";

/*
 * Curator-Portrait tab — shows everything about the agent that learns
 * Daphna's style:
 *   1. Snapshot stats (curator findings to date, % applied)
 *   2. Recent curator findings (last 10) — linked by decision number
 *   3. The hermes-curator system prompt, rendered + linked to Gitea
 *   4. The style_analyzer training prompts (different lifecycle — runs
 *      over the corpus at training time, not per-decision)
 *   5. Propose-change form — writes a markdown file to disk for chair
 *      review (no auto-commit)
 *
 * The prompts are deliberately read-only here: they're symlinked into
 * Paperclip and load-bearing for every curator wake. Editing them from
 * the UI would silently fork the source of truth.
 */

import { useState } from "react";
import {
  Sparkles, ExternalLink, Send, Loader2, FileText, Brain,
  CheckCircle2, Clock,
} from "lucide-react";
import { toast } from "sonner";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Markdown } from "@/components/ui/markdown";
import {
  useCuratorPrompt,
  useCuratorStats,
  useStyleAnalyzerPrompts,
  useSubmitCuratorProposal,
} from "@/lib/api/training";

export function CuratorPortraitPanel() {
  return (
    <div className="space-y-6">
      <StatsCard />
      <RecentFindings />

      <div className="bg-info-bg border border-info/40 rounded-lg px-4 py-3 flex items-start gap-2.5 text-[0.78rem] text-ink-soft leading-relaxed">
        <span>🔒</span>
        <div>
          <b className="text-navy">שער-היו״ר (INV-LRN1 / G10):</b> כל הערוצים <b>מציעים</b> בלבד.
          ממצא או לקח משפיע על הכתיבה רק אחרי שדפנה אישרה אותו. האוצֵר עצמו read-only על התוכן —
          מזהה דפוסים ומגיש, לעולם לא משנה קבצים או סגנון בעצמו.
        </div>
      </div>

      <Tabs defaultValue="curator-prompt" dir="rtl">
        <TabsList className="bg-rule-soft/60">
          <TabsTrigger value="curator-prompt">פרומפט ה-Curator</TabsTrigger>
          <TabsTrigger value="analyzer-prompt">פרומפט אימון הסגנון</TabsTrigger>
          <TabsTrigger value="propose">הצעת שינוי</TabsTrigger>
        </TabsList>
        <TabsContent value="curator-prompt" className="mt-4">
          <CuratorPromptCard />
        </TabsContent>
        <TabsContent value="analyzer-prompt" className="mt-4">
          <StyleAnalyzerPromptCard />
        </TabsContent>
        <TabsContent value="propose" className="mt-4">
          <ProposeChangeForm />
        </TabsContent>
      </Tabs>
    </div>
  );
}

// ── stats card ─────────────────────────────────────────────────────

function SectionLabel({ children }: { children: React.ReactNode }) {
  return (
    <div className="text-[0.72rem] uppercase tracking-wider text-gold-deep font-bold mb-3">
      {children}
    </div>
  );
}

/** One of the three learning channels — engine, backing store, count, flow gate. */
function ChannelCard({
  letter, title, engine, target, store, value, unit, flows, flowLabel, meta,
}: {
  letter: string; title: string; engine: string; target: string; store: string;
  value: number; unit: string; flows: boolean; flowLabel: string; meta: string;
}) {
  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-[18px] py-4 flex flex-col gap-2.5">
        <div className="flex items-baseline gap-2">
          <span className="w-[22px] h-[22px] rounded-md flex items-center justify-center font-bold text-xs text-parchment shrink-0 bg-navy">
            {letter}
          </span>
          <div>
            <h3 className="text-[0.9rem] text-navy font-semibold leading-tight">{title}</h3>
            <div className="text-[0.72rem] text-ink-muted">{engine}</div>
          </div>
        </div>
        <div className="text-[0.72rem] text-ink-soft bg-rule-soft rounded-md px-2.5 py-1.5">
          ← {target} <code className="text-[0.68rem] text-gold-deep">{store}</code>
        </div>
        <div className="flex items-baseline gap-1.5">
          <span className="text-[1.9rem] leading-none font-bold text-navy tabular-nums">{value}</span>
          <span className="text-[0.78rem] text-ink-muted">{unit}</span>
        </div>
        <span
          className={`inline-flex items-center gap-1.5 rounded-full text-[0.72rem] font-semibold px-2.5 py-0.5 w-fit border ${
            flows
              ? "bg-success-bg text-success border-success/40"
              : "bg-gold-wash text-gold-deep border-gold/40"
          }`}
        >
          <span className="text-[0.5rem]">●</span>{flowLabel}
        </span>
        <div className="text-[0.72rem] text-ink-muted leading-relaxed">{meta}</div>
      </CardContent>
    </Card>
  );
}

function StatsCard() {
  const { data, isPending } = useCuratorStats();

  if (isPending) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-16 w-full" />
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {[...Array(3)].map((_, i) => <Skeleton key={i} className="h-44 w-full" />)}
        </div>
      </div>
    );
  }
  if (!data) return null;

  const { distillation: a, panel: b, curator: c } = data.channels;

  return (
    <div className="space-y-5">
      <div className="bg-gold-wash border border-gold rounded-lg px-5 py-4 flex items-start gap-3">
        <span className="text-gold-deep text-xl leading-tight">★</span>
        <p className="text-ink-soft text-sm leading-relaxed">
          הלמידה זורמת לכותב ב<b className="text-gold-deep font-semibold">שלושה ערוצים נפרדים</b>, כל אחד
          מופעל כשדפנה מסמנת החלטה כסופית. הכרטיס מראה כמה כל ערוץ תרם ומה כבר עובר בפועל לכותב —
          רק ידע ש<b className="text-gold-deep font-semibold">אושר בשער-היו״ר</b> משפיע על הטיוטות (INV-LRN1).
        </p>
      </div>

      <div>
        <SectionLabel>שלושת ערוצי-ההזנה לכותב</SectionLabel>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <ChannelCard
            letter="א" title="דיסטילציה" engine="Claude · השוואת טיוטה↔סופי"
            target="כללי-מתודולוגיה" store="appeal_type_rules"
            value={a.items_total} unit="פריטים זורמים"
            flows={a.items_total > 0} flowLabel="זורם לכותב"
            meta={`${a.discussion_rules} כללי-דיון + ${a.transition_phrases} ביטויי-מעבר · אושרו ב-${a.pairs_folded} זוגות דרך טאב ״למידה״.`}
          />
          <ChannelCard
            letter="ב" title="פאנל דו-סוכני" engine="DeepSeek + Gemini · הצבעה 2/2"
            target="לקחי-סגנון" store="decision_lessons"
            value={b.total} unit="לקחים"
            flows={b.approved > 0} flowLabel={`${b.approved} אושרו · ${b.proposed} ממתינים`}
            meta={`על פני ${b.decisions} החלטות · אישור per-החלטה בטאב הקורפוס.`}
          />
          <ChannelCard
            letter="ג" title="ממצאי-אוצֵר" engine="האוצֵר · קריאת הסופי + דפוסים"
            target="ממצאי-סגנון" store="source=curator"
            value={c.total} unit="ממצאים"
            flows={c.approved > 0} flowLabel={`${c.approved} אושרו · ${c.proposed} ממתינים`}
            meta="3–5 דפוסים מתויגים להחלטה (סגנון/מבנה/לקסיקון/טבלאי) — נתפסים מבנית, לא רק כהערה."
          />
        </div>
      </div>

      <div>
        <SectionLabel>ערוץ האוצֵר — מבט מקרוב</SectionLabel>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <Kpi label="סך ממצאי-אוצֵר" value={c.total} icon={<Sparkles className="w-4 h-4" />} />
          <Kpi label="החלטות שנסקרו" value={`${c.decisions_reviewed}/${data.decisions_total}`} icon={<FileText className="w-4 h-4" />} />
          <Kpi label="מאושרים · זורמים לכותב" value={c.approved} tone="success" icon={<CheckCircle2 className="w-4 h-4" />} />
          <Kpi label="ממתינים לאישור" value={c.proposed} tone="gold" icon={<Brain className="w-4 h-4" />} />
        </div>
      </div>
    </div>
  );
}

function Kpi({
  label, value, icon, tone,
}: { label: string; value: string | number; icon: React.ReactNode; tone?: "success" | "gold" }) {
  const valueCls = tone === "success" ? "text-success" : tone === "gold" ? "text-gold-deep" : "text-navy";
  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-4 py-3">
        <div className="flex items-center gap-2 text-ink-muted text-[0.78rem]">
          {icon}
          <span>{label}</span>
        </div>
        <p className={`text-2xl font-semibold tabular-nums mt-1 ${valueCls}`}>{value}</p>
      </CardContent>
    </Card>
  );
}

// ── recent findings ────────────────────────────────────────────────

function RecentFindings() {
  const { data, isPending } = useCuratorStats();

  if (isPending) {
    return <Skeleton className="h-40 w-full" />;
  }
  if (!data || data.recent_findings.length === 0) {
    return (
      <Card className="bg-rule-soft/40 border-rule">
        <CardContent className="px-6 py-5 text-center text-ink-muted text-sm leading-relaxed">
          אין עדיין ממצאי-אוצֵר. כשדפנה מסמנת החלטה כסופית, האוצֵר קורא את הסופי, מזהה
          3–5 דפוסי-סגנון, ושומר אותם כ-<code>decision_lessons</code> (source=&quot;curator&quot;)
          הממתינים לאישורה — בנפרד מלקחי-הפאנל ומכללי-המתודולוגיה שלמעלה.
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-4 py-3">
        <h3 className="text-[0.78rem] uppercase tracking-wider text-gold-deep font-semibold mb-3">
          ממצאים אחרונים של ה-Curator
        </h3>
        <ul className="space-y-2">
          {data.recent_findings.map((f) => (
            <li key={f.id} className="border-b border-rule pb-2 last:border-0 last:pb-0">
              <div className="flex items-center gap-2 text-[0.72rem] mb-1">
                <Badge variant="outline"
                  className="bg-info-bg text-info border-info/40">
                  {f.category}
                </Badge>
                <span className="text-navy font-semibold tabular-nums">
                  {f.decision_number || "—"}
                </span>
                {f.review_status === "approved" && (
                  <Badge variant="outline"
                    className="bg-success-bg text-success border-success/40">
                    <CheckCircle2 className="w-3 h-3 me-0.5" />
                    מאושר
                  </Badge>
                )}
                <span className="grow text-ink-muted text-end">
                  <Clock className="w-3 h-3 inline me-1" />
                  {new Date(f.created_at).toLocaleDateString("he-IL")}
                </span>
              </div>
              <p className="text-sm text-ink leading-relaxed">{f.lesson_text}</p>
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}

// ── prompts ────────────────────────────────────────────────────────

function CuratorPromptCard() {
  const { data, isPending, error } = useCuratorPrompt();

  if (isPending) return <Skeleton className="h-96 w-full" />;
  if (error) {
    return (
      <Card className="bg-danger-bg border-danger/40">
        <CardContent className="px-6 py-4 text-danger">{error.message}</CardContent>
      </Card>
    );
  }
  if (!data) return null;

  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-5 py-4 space-y-3">
        <div className="flex items-center justify-between gap-2 flex-wrap">
          <div>
            <h3 className="text-navy font-semibold">{data.filename}</h3>
            <p className="text-[0.72rem] text-ink-muted">
              {data.bytes.toLocaleString("he-IL")} בייטים ·
              עודכן: {new Date(data.last_modified * 1000).toLocaleString("he-IL")}
            </p>
          </div>
          <Button asChild variant="outline" size="sm">
            <a href={data.gitea_url} target="_blank" rel="noopener noreferrer">
              <ExternalLink className="w-3 h-3 me-1" />
              ערוך ב-Gitea
            </a>
          </Button>
        </div>
        <ScrollArea className="h-[520px] pe-2 border border-rule rounded p-3 bg-rule-soft/30">
          <Markdown content={data.content} />
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

function StyleAnalyzerPromptCard() {
  const { data, isPending } = useStyleAnalyzerPrompts();

  if (isPending) return <Skeleton className="h-96 w-full" />;
  if (!data) return null;

  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-5 py-4 space-y-3">
        <div>
          <h3 className="text-navy font-semibold">פרומפטים של style_analyzer.py</h3>
          <p className="text-[0.72rem] text-ink-muted">
            רץ ב-Claude Opus (1M context, עד {data.max_input_tokens.toLocaleString("he-IL")} tokens
            input) דרך claude CLI מקומי — חינמי, ללא API. נקרא ע&quot;י
            <code className="px-1 mx-1 bg-rule-soft rounded">POST /api/training/analyze-style</code>
            ומכניס דפוסים ל-<code className="px-1 bg-rule-soft rounded">style_patterns</code>.
          </p>
        </div>

        <Tabs defaultValue="analysis" dir="rtl">
          <TabsList className="bg-rule-soft/60">
            <TabsTrigger value="analysis">Single-pass (כל הקורפוס)</TabsTrigger>
            <TabsTrigger value="single">Multi-pass (החלטה אחת)</TabsTrigger>
            <TabsTrigger value="synthesis">Synthesis</TabsTrigger>
          </TabsList>
          <TabsContent value="analysis" className="mt-3">
            <PromptBlock content={data.analysis_prompt} />
          </TabsContent>
          <TabsContent value="single" className="mt-3">
            <PromptBlock content={data.single_decision_prompt} />
          </TabsContent>
          <TabsContent value="synthesis" className="mt-3">
            <PromptBlock content={data.synthesis_prompt} />
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  );
}

function PromptBlock({ content }: { content: string }) {
  return (
    <ScrollArea className="h-[420px] pe-2 border border-rule rounded p-3 bg-rule-soft/30">
      <pre className="text-[0.78rem] whitespace-pre-wrap font-mono text-ink leading-relaxed"
        dir="rtl">
        {content}
      </pre>
    </ScrollArea>
  );
}

// ── propose change form ────────────────────────────────────────────

function ProposeChangeForm() {
  const [title, setTitle] = useState("");
  const [proposedChange, setProposedChange] = useState("");
  const [rationale, setRationale] = useState("");
  const submit = useSubmitCuratorProposal();

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title.trim() || !proposedChange.trim()) {
      toast.error("חובה כותרת ושינוי מוצע");
      return;
    }
    try {
      const r = await submit.mutateAsync({
        title: title.trim(),
        proposed_change: proposedChange.trim(),
        rationale: rationale.trim(),
      });
      toast.success(`נשמרה הצעה: ${r.filename}`);
      setTitle(""); setProposedChange(""); setRationale("");
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "כשל בשמירה");
    }
  };

  return (
    <Card className="bg-surface border-rule">
      <CardContent className="px-5 py-4">
        <h3 className="text-navy font-semibold mb-2">הצעת שינוי לפרומפט ה-Curator</h3>
        <p className="text-[0.78rem] text-ink-muted mb-4">
          ההצעה תישמר כקובץ Markdown ב-
          <code className="px-1 bg-rule-soft rounded">data/curator-proposals/</code>.
          חיים יבחן ויאשר ידנית — אין שינוי אוטומטי בפרומפט.
        </p>
        <form onSubmit={onSubmit} className="space-y-3">
          <div className="space-y-1">
            <Label htmlFor="proposal-title">כותרת השינוי</Label>
            <Input id="proposal-title" value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="לדוגמה: הוסף קטגוריה [צ׳קליסט תוכן] לממצאי ה-curator"
              dir="rtl" />
          </div>
          <div className="space-y-1">
            <Label htmlFor="proposal-change">השינוי המוצע (Markdown)</Label>
            <Textarea id="proposal-change" value={proposedChange} rows={6}
              onChange={(e) => setProposedChange(e.target.value)}
              placeholder={"תאר במדויק מה לשנות. אפשר להעתיק את הקטע הקיים ולסמן ב-strikethrough + להוסיף את החדש."}
              dir="rtl" />
          </div>
          <div className="space-y-1">
            <Label htmlFor="proposal-rationale">נימוק</Label>
            <Textarea id="proposal-rationale" value={rationale} rows={3}
              onChange={(e) => setRationale(e.target.value)}
              placeholder="למה השינוי הזה חשוב? איזה בעיה הוא פותר?"
              dir="rtl" />
          </div>
          <div className="flex justify-end">
            <Button type="submit" disabled={submit.isPending}
              className="bg-navy text-parchment hover:bg-navy-soft">
              {submit.isPending ? (
                <Loader2 className="w-4 h-4 animate-spin me-1" />
              ) : (
                <Send className="w-4 h-4 me-1" />
              )}
              שלח הצעה
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}
