"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  X,
  Upload,
  Database,
  Trash2,
  RefreshCcw,
  Loader2,
  CheckCircle2,
  AlertTriangle,
  Pencil,
  Check,
} from "lucide-react";

type TableInfo = { name: string; rows: number | null; columns: string[] };

export function KnowledgeBaseModal({
  open,
  onClose,
  onChange,
}: {
  open: boolean;
  onClose: () => void;
  onChange?: (version: number) => void;
}) {
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [version, setVersion] = useState<number>(0);
  const [loading, setLoading] = useState(false);
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const [renameTarget, setRenameTarget] = useState<string | null>(null);
  const [renameValue, setRenameValue] = useState("");
  const [uploadMode, setUploadMode] = useState<"replace" | "append">("replace");
  const [tableNameOverride, setTableNameOverride] = useState("");
  const [dragOver, setDragOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const fetchTables = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch("/api/backend/kb/tables");
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const d = await res.json();
      setTables(d.tables ?? []);
      setVersion(d.version ?? 0);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (open) fetchTables();
  }, [open, fetchTables]);

  // Auto-clear toast messages
  useEffect(() => {
    if (!success) return;
    const t = setTimeout(() => setSuccess(null), 3000);
    return () => clearTimeout(t);
  }, [success]);

  const notifyChange = useCallback(
    (v: number) => {
      onChange?.(v);
      // Broadcast a window-level event so other components (LiveDashboard,
      // chat results, etc.) can refetch when the KB changes.
      try {
        window.dispatchEvent(new CustomEvent("finai:kb-changed", { detail: { version: v } }));
      } catch {}
    },
    [onChange]
  );

  const doUpload = useCallback(
    async (file: File) => {
      setBusy(`upload:${file.name}`);
      setError(null);
      setSuccess(null);
      try {
        const fd = new FormData();
        fd.append("file", file);
        if (tableNameOverride.trim()) fd.append("table", tableNameOverride.trim());
        const url = `/api/backend/kb/upload?mode=${uploadMode}${
          tableNameOverride.trim() ? `&table=${encodeURIComponent(tableNameOverride.trim())}` : ""
        }`;
        const res = await fetch(url, { method: "POST", body: fd });
        const d = await res.json().catch(() => ({}));
        if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
        setSuccess(`Loaded ${d.rows} rows into ${d.table}`);
        setTableNameOverride("");
        await fetchTables();
        notifyChange(d.version ?? version + 1);
      } catch (e) {
        setError(e instanceof Error ? e.message : String(e));
      } finally {
        setBusy(null);
        if (fileInputRef.current) fileInputRef.current.value = "";
      }
    },
    [tableNameOverride, uploadMode, fetchTables, notifyChange, version]
  );

  const doDelete = useCallback(
    async (name: string) => {
      if (!confirm(`Drop table "${name}"? This cannot be undone.`)) return;
      setBusy(`delete:${name}`);
      setError(null);
      try {
        const res = await fetch(`/api/backend/kb/tables/${encodeURIComponent(name)}`, {
          method: "DELETE",
        });
        const d = await res.json().catch(() => ({}));
        if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
        setSuccess(`Dropped ${name}`);
        await fetchTables();
        notifyChange(d.version ?? version + 1);
      } catch (e) {
        setError(e instanceof Error ? e.message : String(e));
      } finally {
        setBusy(null);
      }
    },
    [fetchTables, notifyChange, version]
  );

  const doRename = useCallback(
    async (oldName: string, newName: string) => {
      if (!newName.trim() || newName === oldName) {
        setRenameTarget(null);
        return;
      }
      setBusy(`rename:${oldName}`);
      setError(null);
      try {
        const res = await fetch("/api/backend/kb/rename", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify({ old_name: oldName, new_name: newName.trim() }),
        });
        const d = await res.json().catch(() => ({}));
        if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
        setSuccess(`Renamed ${oldName} → ${newName}`);
        setRenameTarget(null);
        await fetchTables();
        notifyChange(d.version ?? version + 1);
      } catch (e) {
        setError(e instanceof Error ? e.message : String(e));
      } finally {
        setBusy(null);
      }
    },
    [fetchTables, notifyChange, version]
  );

  if (!open) return null;

  return (
    <AnimatePresence>
      <motion.div
        key="kb-overlay"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm"
        onClick={onClose}
      >
        <motion.div
          key="kb-panel"
          initial={{ opacity: 0, y: 14, scale: 0.97 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 14, scale: 0.97 }}
          transition={{ duration: 0.2 }}
          onClick={(e) => e.stopPropagation()}
          className="flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-mb-amber-200/60 bg-white shadow-2xl"
        >
          {/* Header */}
          <div className="flex items-center justify-between border-b border-mb-amber-100 bg-gradient-to-r from-mb-amber-50/60 to-white px-5 py-3.5">
            <div className="flex items-center gap-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-sm">
                <Database className="h-4.5 w-4.5 text-white" />
              </div>
              <div>
                <h2 className="text-base font-semibold text-mb-ink leading-tight">
                  Knowledge Base
                </h2>
                <p className="text-[11px] text-mb-slate/60">
                  Add, rename, or remove tables · changes propagate everywhere
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-[10px] font-mono text-slate-600">
                v{version}
              </span>
              <button
                type="button"
                onClick={fetchTables}
                disabled={loading}
                suppressHydrationWarning
                className="rounded-md p-1.5 text-mb-slate/60 hover:bg-mb-amber-50 hover:text-mb-amber-700 disabled:opacity-50"
                title="Refresh"
              >
                <RefreshCcw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
              </button>
              <button
                type="button"
                onClick={onClose}
                suppressHydrationWarning
                className="rounded-md p-1.5 text-mb-slate/60 hover:bg-rose-50 hover:text-rose-600"
                title="Close"
              >
                <X className="h-4 w-4" />
              </button>
            </div>
          </div>

          {/* Toasts */}
          {(error || success) && (
            <div className="border-b border-mb-amber-100 px-5 py-2">
              {error && (
                <div className="flex items-start gap-2 rounded-md bg-rose-50 px-3 py-2 text-[12px] text-rose-800">
                  <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                  <span className="break-words">{error}</span>
                </div>
              )}
              {success && (
                <div className="flex items-start gap-2 rounded-md bg-emerald-50 px-3 py-2 text-[12px] text-emerald-800">
                  <CheckCircle2 className="h-3.5 w-3.5 shrink-0 mt-0.5" />
                  <span>{success}</span>
                </div>
              )}
            </div>
          )}

          {/* Body */}
          <div className="grid flex-1 overflow-hidden md:grid-cols-[1fr_360px]">
            {/* Tables list */}
            <div className="flex flex-col overflow-hidden">
              <div className="border-b border-mb-amber-100 bg-mb-paper/40 px-5 py-2 text-[11px] font-semibold uppercase tracking-wider text-mb-slate/60">
                Tables ({tables.length})
              </div>
              <div className="flex-1 overflow-y-auto px-3 py-2">
                {loading && tables.length === 0 ? (
                  <div className="flex items-center justify-center py-10 text-mb-slate/50">
                    <Loader2 className="h-5 w-5 animate-spin" />
                  </div>
                ) : tables.length === 0 ? (
                  <div className="px-3 py-8 text-center text-sm text-mb-slate/50">
                    No tables yet. Upload a CSV to get started →
                  </div>
                ) : (
                  <ul className="space-y-1">
                    {tables.map((t) => (
                      <li
                        key={t.name}
                        className="group flex items-start gap-2 rounded-lg border border-transparent px-3 py-2 transition hover:border-mb-amber-200/60 hover:bg-mb-amber-50/40"
                      >
                        <Database className="h-4 w-4 shrink-0 mt-0.5 text-mb-amber-700" />
                        <div className="min-w-0 flex-1">
                          {renameTarget === t.name ? (
                            <div className="flex items-center gap-1">
                              <input
                                autoFocus
                                title="New table name"
                                placeholder="new_table_name"
                                value={renameValue}
                                onChange={(e) => setRenameValue(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") doRename(t.name, renameValue);
                                  else if (e.key === "Escape") setRenameTarget(null);
                                }}
                                className="min-w-0 flex-1 rounded-md border border-mb-amber-300 px-2 py-0.5 text-[13px] outline-none focus:border-mb-amber-500"
                              />
                              <button
                                type="button"
                                onClick={() => doRename(t.name, renameValue)}
                                suppressHydrationWarning
                                className="rounded-md p-1 text-emerald-600 hover:bg-emerald-50"
                                title="Confirm"
                              >
                                <Check className="h-3.5 w-3.5" />
                              </button>
                            </div>
                          ) : (
                            <div className="flex items-center justify-between gap-2">
                              <code className="truncate text-[13px] font-medium text-mb-ink">
                                {t.name}
                              </code>
                              <span className="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600">
                                {t.rows == null ? "—" : t.rows.toLocaleString("en-IN")} rows
                              </span>
                            </div>
                          )}
                          {t.columns.length > 0 && renameTarget !== t.name && (
                            <p className="mt-0.5 truncate text-[10px] text-mb-slate/55">
                              {t.columns.slice(0, 8).join(", ")}
                              {t.columns.length > 8 ? ` … +${t.columns.length - 8}` : ""}
                            </p>
                          )}
                        </div>
                        {renameTarget !== t.name && (
                          <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                            <button
                              type="button"
                              onClick={() => {
                                setRenameTarget(t.name);
                                setRenameValue(t.name);
                              }}
                              suppressHydrationWarning
                              disabled={busy != null}
                              className="rounded-md p-1 text-mb-slate/60 hover:bg-mb-amber-100 hover:text-mb-amber-700 disabled:opacity-50"
                              title="Rename"
                            >
                              <Pencil className="h-3.5 w-3.5" />
                            </button>
                            <button
                              type="button"
                              onClick={() => doDelete(t.name)}
                              suppressHydrationWarning
                              disabled={busy != null}
                              className="rounded-md p-1 text-mb-slate/60 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
                              title="Drop table"
                            >
                              {busy === `delete:${t.name}` ? (
                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
                              ) : (
                                <Trash2 className="h-3.5 w-3.5" />
                              )}
                            </button>
                          </div>
                        )}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>

            {/* Upload pane */}
            <div className="flex flex-col border-t border-mb-amber-100 md:border-l md:border-t-0">
              <div className="border-b border-mb-amber-100 bg-mb-paper/40 px-5 py-2 text-[11px] font-semibold uppercase tracking-wider text-mb-slate/60">
                Upload CSV
              </div>
              <div className="flex-1 overflow-y-auto p-5 space-y-4">
                <div>
                  <label className="block text-[11px] font-medium text-mb-slate mb-1">
                    Table name (optional)
                  </label>
                  <input
                    value={tableNameOverride}
                    onChange={(e) => setTableNameOverride(e.target.value)}
                    placeholder="auto-derived from filename"
                    className="w-full rounded-md border border-mb-amber-200 px-2.5 py-1.5 text-[13px] outline-none focus:border-mb-amber-500"
                  />
                </div>

                <div>
                  <label className="block text-[11px] font-medium text-mb-slate mb-1">
                    Mode
                  </label>
                  <div className="flex rounded-md border border-mb-amber-200 p-0.5">
                    {(["replace", "append"] as const).map((m) => (
                      <button
                        key={m}
                        type="button"
                        suppressHydrationWarning
                        onClick={() => setUploadMode(m)}
                        className={`flex-1 rounded px-3 py-1 text-[12px] font-medium transition ${
                          uploadMode === m
                            ? "bg-mb-amber-100 text-mb-amber-800"
                            : "text-mb-slate/70 hover:bg-mb-paper"
                        }`}
                      >
                        {m === "replace" ? "Replace" : "Append"}
                      </button>
                    ))}
                  </div>
                  <p className="mt-1 text-[10px] text-mb-slate/55">
                    {uploadMode === "replace"
                      ? "Drops existing table (if any) and creates a new one."
                      : "Appends rows to the existing table (must already exist)."}
                  </p>
                </div>

                <label
                  onDragOver={(e) => {
                    e.preventDefault();
                    setDragOver(true);
                  }}
                  onDragLeave={() => setDragOver(false)}
                  onDrop={(e) => {
                    e.preventDefault();
                    setDragOver(false);
                    const f = e.dataTransfer.files?.[0];
                    if (f) doUpload(f);
                  }}
                  className={`flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-8 text-center transition cursor-pointer ${
                    dragOver
                      ? "border-emerald-400 bg-emerald-50/50"
                      : "border-mb-amber-200 hover:border-mb-amber-400 hover:bg-mb-amber-50/30"
                  } ${busy?.startsWith("upload:") ? "pointer-events-none opacity-60" : ""}`}
                >
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept=".csv,.tsv,text/csv"
                    className="hidden"
                    onChange={(e) => {
                      const f = e.target.files?.[0];
                      if (f) doUpload(f);
                    }}
                  />
                  {busy?.startsWith("upload:") ? (
                    <>
                      <Loader2 className="h-6 w-6 animate-spin text-emerald-600" />
                      <span className="text-[12px] text-mb-slate/70">Loading…</span>
                    </>
                  ) : (
                    <>
                      <Upload className="h-6 w-6 text-mb-amber-600" />
                      <span className="text-[12px] font-medium text-mb-ink">
                        Click or drag CSV here
                      </span>
                      <span className="text-[10px] text-mb-slate/55">
                        Max 50MB · TSV also supported
                      </span>
                    </>
                  )}
                </label>

                <div className="rounded-lg bg-sky-50/60 px-3 py-2 text-[11px] text-sky-800/80 leading-relaxed">
                  Once you upload, the dashboard, chat suggestions, and query
                  engine all see the new tables instantly — no restart needed.
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </AnimatePresence>
  );
}