import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Bot, Trash2, Save, Plus, Power, ThumbsUp, ThumbsDown, RefreshCw } from "lucide-react";
import { useServerFn } from "@tanstack/react-start";
import { refreshAiKnowledge } from "@/lib/admin.functions";

import { supabase } from "@/integrations/supabase/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/ai")({
  head: () => ({ meta: [{ title: "AI Assistant — Admin" }, { name: "description", content: "Manage the Flexflares AI assistant." }] }),
  component: AdminAI,
});

type Faq = { id: string; question: string; answer: string; active: boolean; sort_order: number };
type Conversation = { id: string; user_id: string | null; title: string | null; updated_at: string };
type Message = { id: string; role: string; content: string; rating: number | null; flagged_unanswered: boolean; created_at: string };

function AdminAI() {
  const [enabled, setEnabled] = useState(true);
  const [faqs, setFaqs] = useState<Faq[]>([]);
  const [newFaq, setNewFaq] = useState({ question: "", answer: "" });
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [activeConv, setActiveConv] = useState<string | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [stats, setStats] = useState({ total: 0, up: 0, down: 0, unanswered: 0 });
  const [reindexing, setReindexing] = useState(false);
  const [lastIndex, setLastIndex] = useState<{ indexedAt: string; counts: { services: number; faqs: number; activeFaqs: number; announcements: number } } | null>(null);
  const runRefresh = useServerFn(refreshAiKnowledge);

  const reindex = async () => {
    setReindexing(true);
    try {
      const res = await runRefresh();
      setLastIndex({ indexedAt: res.indexedAt, counts: res.counts });
      toast.success(`Knowledge base refreshed — ${res.counts.services} services, ${res.counts.activeFaqs} FAQs, ${res.counts.announcements} announcements.`);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Failed to refresh knowledge base");
    } finally {
      setReindexing(false);
    }
  };

  const loadAll = async () => {
    const [s, f, c] = await Promise.all([
      supabase.from("business_settings").select("ai_enabled").eq("id", 1).maybeSingle(),
      supabase.from("ai_faqs").select("*").order("sort_order"),
      supabase.from("ai_conversations").select("*").order("updated_at", { ascending: false }).limit(50),
    ]);
    setEnabled(((s.data as { ai_enabled: boolean } | null)?.ai_enabled) ?? true);
    setFaqs((f.data ?? []) as Faq[]);
    setConversations((c.data ?? []) as Conversation[]);

    const { count: total } = await supabase.from("ai_messages").select("*", { count: "exact", head: true }).eq("role", "assistant");
    const { count: up } = await supabase.from("ai_messages").select("*", { count: "exact", head: true }).eq("rating", 1);
    const { count: down } = await supabase.from("ai_messages").select("*", { count: "exact", head: true }).eq("rating", -1);
    setStats({ total: total ?? 0, up: up ?? 0, down: down ?? 0, unanswered: down ?? 0 });
  };

  useEffect(() => {
    loadAll();
  }, []);

  useEffect(() => {
    if (!activeConv) return;
    supabase
      .from("ai_messages")
      .select("*")
      .eq("conversation_id", activeConv)
      .order("created_at")
      .then(({ data }) => setMessages((data ?? []) as Message[]));
  }, [activeConv]);

  const toggleEnabled = async (v: boolean) => {
    setEnabled(v);
    const { error } = await supabase.from("business_settings").update({ ai_enabled: v }).eq("id", 1);
    if (error) toast.error(error.message);
    else toast.success(`AI assistant ${v ? "enabled" : "disabled"}`);
  };

  const addFaq = async () => {
    if (!newFaq.question.trim() || !newFaq.answer.trim()) return toast.error("Fill both fields");
    const { error } = await supabase.from("ai_faqs").insert({
      question: newFaq.question.trim(),
      answer: newFaq.answer.trim(),
      sort_order: faqs.length,
    });
    if (error) return toast.error(error.message);
    setNewFaq({ question: "", answer: "" });
    toast.success("FAQ added");
    loadAll();
  };

  const saveFaq = async (f: Faq) => {
    const { error } = await supabase
      .from("ai_faqs")
      .update({ question: f.question, answer: f.answer, active: f.active })
      .eq("id", f.id);
    if (error) toast.error(error.message);
    else toast.success("Saved");
  };

  const deleteFaq = async (id: string) => {
    if (!confirm("Delete this FAQ?")) return;
    const { error } = await supabase.from("ai_faqs").delete().eq("id", id);
    if (error) return toast.error(error.message);
    setFaqs((prev) => prev.filter((f) => f.id !== id));
  };

  return (
    <div className="space-y-6">
      <div>
        <h1 className="flex items-center gap-2 text-2xl font-bold"><Bot className="h-6 w-6" /> AI Assistant</h1>
        <p className="text-sm text-muted-foreground">Manage Flexi, your 24/7 customer support assistant.</p>
      </div>

      <Card>
        <CardHeader><CardTitle className="text-base">Knowledge base</CardTitle></CardHeader>
        <CardContent className="flex flex-wrap items-center justify-between gap-3">
          <div className="text-sm">
            <p className="text-muted-foreground">The assistant reads services, FAQs, announcements & business settings live. Click refresh to re-index and confirm all sources are reachable.</p>
            {lastIndex && (
              <p className="mt-1 text-xs">
                Last indexed {new Date(lastIndex.indexedAt).toLocaleString()} — {lastIndex.counts.services} services · {lastIndex.counts.activeFaqs}/{lastIndex.counts.faqs} FAQs active · {lastIndex.counts.announcements} announcements
              </p>
            )}
          </div>
          <Button onClick={reindex} disabled={reindexing}>
            <RefreshCw className={`mr-2 h-4 w-4 ${reindexing ? "animate-spin" : ""}`} />
            {reindexing ? "Refreshing…" : "Refresh knowledge base"}
          </Button>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-4">
        <Card><CardContent className="p-4"><div className="text-xs text-muted-foreground">AI status</div><div className="mt-1 flex items-center gap-2"><Power className={enabled ? "h-4 w-4 text-emerald-500" : "h-4 w-4 text-muted-foreground"} /><span className="text-lg font-semibold">{enabled ? "Enabled" : "Disabled"}</span></div></CardContent></Card>
        <Card><CardContent className="p-4"><div className="text-xs text-muted-foreground">Total responses</div><div className="text-2xl font-bold">{stats.total}</div></CardContent></Card>
        <Card><CardContent className="p-4"><div className="text-xs text-muted-foreground">👍 Positive</div><div className="text-2xl font-bold text-emerald-600">{stats.up}</div></CardContent></Card>
        <Card><CardContent className="p-4"><div className="text-xs text-muted-foreground">👎 Needs review</div><div className="text-2xl font-bold text-destructive">{stats.down}</div></CardContent></Card>
      </div>

      <Card>
        <CardHeader><CardTitle className="text-base">Assistant settings</CardTitle></CardHeader>
        <CardContent className="flex items-center justify-between">
          <div>
            <Label className="text-sm font-medium">Enable AI assistant</Label>
            <p className="text-xs text-muted-foreground">When off, the chat widget is hidden across the site.</p>
          </div>
          <Switch checked={enabled} onCheckedChange={toggleEnabled} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader><CardTitle className="text-base">Custom FAQs (knowledge base)</CardTitle></CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-2 rounded-lg border border-dashed p-3">
            <Input placeholder="Question" value={newFaq.question} onChange={(e) => setNewFaq({ ...newFaq, question: e.target.value })} />
            <Textarea placeholder="Answer" rows={2} value={newFaq.answer} onChange={(e) => setNewFaq({ ...newFaq, answer: e.target.value })} />
            <Button size="sm" onClick={addFaq} className="w-fit"><Plus className="mr-1 h-4 w-4" /> Add FAQ</Button>
          </div>
          <div className="space-y-3">
            {faqs.map((f) => (
              <div key={f.id} className="rounded-lg border p-3">
                <Input value={f.question} onChange={(e) => setFaqs((prev) => prev.map((x) => x.id === f.id ? { ...x, question: e.target.value } : x))} className="mb-2 font-medium" />
                <Textarea value={f.answer} rows={2} onChange={(e) => setFaqs((prev) => prev.map((x) => x.id === f.id ? { ...x, answer: e.target.value } : x))} />
                <div className="mt-2 flex items-center justify-between">
                  <label className="flex items-center gap-2 text-xs"><Switch checked={f.active} onCheckedChange={(v) => setFaqs((prev) => prev.map((x) => x.id === f.id ? { ...x, active: v } : x))} /> Active</label>
                  <div className="flex gap-2">
                    <Button size="sm" variant="outline" onClick={() => saveFaq(f)}><Save className="mr-1 h-3 w-3" /> Save</Button>
                    <Button size="sm" variant="ghost" onClick={() => deleteFaq(f.id)}><Trash2 className="h-3 w-3" /></Button>
                  </div>
                </div>
              </div>
            ))}
            {faqs.length === 0 && <p className="text-sm text-muted-foreground">No custom FAQs yet.</p>}
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader><CardTitle className="text-base">Recent conversations</CardTitle></CardHeader>
        <CardContent>
          <div className="grid gap-3 md:grid-cols-[280px_1fr]">
            <div className="max-h-[500px] space-y-1 overflow-y-auto rounded-md border p-2">
              {conversations.map((c) => (
                <button
                  key={c.id}
                  onClick={() => setActiveConv(c.id)}
                  className={`w-full rounded-md p-2 text-left text-xs hover:bg-muted ${activeConv === c.id ? "bg-muted" : ""}`}
                >
                  <div className="font-medium truncate">{c.title ?? "Conversation"}</div>
                  <div className="text-[10px] text-muted-foreground">{new Date(c.updated_at).toLocaleString()}</div>
                </button>
              ))}
              {conversations.length === 0 && <p className="p-2 text-xs text-muted-foreground">No conversations yet.</p>}
            </div>
            <div className="max-h-[500px] space-y-2 overflow-y-auto rounded-md border p-3">
              {!activeConv && <p className="text-sm text-muted-foreground">Select a conversation to view messages.</p>}
              {messages.map((m) => (
                <div key={m.id} className={`rounded-lg p-2 text-sm ${m.role === "user" ? "bg-primary/10 ml-8" : "bg-muted mr-8"}`}>
                  <div className="mb-1 flex items-center gap-2">
                    <Badge variant="outline" className="text-[10px]">{m.role}</Badge>
                    {m.rating === 1 && <ThumbsUp className="h-3 w-3 text-emerald-500" />}
                    {m.rating === -1 && <ThumbsDown className="h-3 w-3 text-destructive" />}
                  </div>
                  <div className="whitespace-pre-wrap">{m.content}</div>
                </div>
              ))}
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}