"use client";

import Link from "next/link";
import {
  ArrowLeft,
  CheckCircle2,
  FileText,
  Loader2,
  ScanEye,
  Trash2,
  Upload,
} from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import {
  Badge,
  Button,
  Card,
  EmptyState,
  ErrorState,
  TextInput,
  LoadingBlock,
  Select,
} from "@/components/admin/ui";
import { adminApi, errMessage } from "@/lib/admin-api";
import { buildKnowledgeForm, knowledgeApi, type KnowledgeDocument, type UploadPreview } from "@/lib/knowledge-api";
import { isAdmin } from "@/lib/roles";

/** 切分策略，与后端 KnowledgeUploadService 支持的策略保持一致。 */
const STRATEGIES = [
  { value: "default", label: "默认（按段落递归切分）" },
  { value: "fixed", label: "固定长度切分" },
  { value: "sentence", label: "按句子切分" },
];

export default function KnowledgePage() {
  const [state, setState] = useState<"loading" | "ready" | "denied" | "error">("loading");
  const [items, setItems] = useState<KnowledgeDocument[]>([]);

  const [file, setFile] = useState<File | null>(null);
  const [title, setTitle] = useState("");
  const [strategy, setStrategy] = useState("default");
  const [chunkSize, setChunkSize] = useState("");
  const [chunkOverlap, setChunkOverlap] = useState("");

  const [preview, setPreview] = useState<UploadPreview | null>(null);
  const [uploading, setUploading] = useState(false);
  const [removing, setRemoving] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [notice, setNotice] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setItems(await knowledgeApi.list());
    } catch (err) {
      setError(errMessage(err, "知识库加载失败"));
    }
  }, []);

  useEffect(() => {
    let alive = true;
    (async () => {
      try {
        const user = await adminApi.me();
        if (!alive) return;
        if (!isAdmin(user)) {
          setState("denied");
          return;
        }
        setState("ready");
        await load();
      } catch (err) {
        if (!alive) return;
        // 401 时 apiFetch 已跳转登录页，这里只兜底其余失败
        setError(errMessage(err, "请先登录管理员账号"));
        setState("error");
      }
    })();
    return () => {
      alive = false;
    };
  }, [load]);

  const resetUpload = () => {
    setFile(null);
    setTitle("");
    setChunkSize("");
    setChunkOverlap("");
    setPreview(null);
  };

  const runPreview = async () => {
    if (!file || uploading) return;
    setUploading(true);
    setError(null);
    setNotice(null);
    try {
      const result = await knowledgeApi.preview(
        buildKnowledgeForm(file, {
          strategy,
          chunk_size: chunkSize ? Number(chunkSize) : null,
          chunk_overlap: chunkOverlap ? Number(chunkOverlap) : null,
        })
      );
      setPreview(result);
      if (!title) setTitle(file.name);
    } catch (err) {
      setError(errMessage(err, "预览失败，请检查文件格式"));
    } finally {
      setUploading(false);
    }
  };

  const runConfirm = async () => {
    if (!file || uploading) return;
    setUploading(true);
    setError(null);
    setNotice(null);
    try {
      await knowledgeApi.confirm(
        buildKnowledgeForm(file, {
          title: title || file.name,
          doc_id: preview?.doc_id ? String(preview.doc_id) : undefined,
          strategy,
          chunk_size: chunkSize ? Number(chunkSize) : null,
          chunk_overlap: chunkOverlap ? Number(chunkOverlap) : null,
        })
      );
      setNotice(`《${title || file.name}》已入库`);
      resetUpload();
      await load();
    } catch (err) {
      setError(errMessage(err, "入库失败，请稍后重试"));
    } finally {
      setUploading(false);
    }
  };

  const remove = async (doc: KnowledgeDocument) => {
    const docId = doc.doc_id ?? doc.id ?? "";
    if (!docId) return;
    if (!window.confirm(`确认删除《${doc.title ?? doc.filename ?? docId}》？该操作不可撤销。`)) {
      return;
    }
    setRemoving(docId);
    setError(null);
    try {
      await knowledgeApi.remove(docId);
      setNotice("文档已删除");
      await load();
    } catch (err) {
      setError(errMessage(err, "删除失败，请稍后重试"));
    } finally {
      setRemoving(null);
    }
  };

  return (
    <main className="min-h-screen bg-slate-50 px-6 py-8">
      <div className="mx-auto max-w-5xl space-y-5">
        <Link
          href="/admin"
          className="inline-flex items-center gap-2 text-sm text-slate-500 transition-colors hover:text-slate-800"
        >
          <ArrowLeft className="h-4 w-4" />
          返回统一工作台
        </Link>

        <div>
          <h1 className="text-2xl font-semibold text-slate-900">知识库管理</h1>
          <p className="mt-1 text-sm text-slate-500">
            上传投顾 / 客服 Agent 可检索的文档，入库前可先预览切分效果
          </p>
        </div>

        {state === "loading" && <LoadingBlock text="正在校验权限..." />}

        {state === "denied" && (
          <div className="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">
            知识库管理仅对管理员开放。当前账号无操作权限，如有需要请联系系统管理员。
          </div>
        )}

        {state === "error" && <ErrorState message={error ?? "加载失败"} onRetry={() => location.reload()} />}

        {state === "ready" && (
          <>
            <Card
              title="上传文档"
              description="先预览切分效果，确认无误后再入库"
            >
              <div className="space-y-4">
                <div className="flex flex-wrap items-center gap-3">
                  <label className="cursor-pointer">
                    <input
                      type="file"
                      className="hidden"
                      onChange={(event) => {
                        const picked = event.target.files?.[0] ?? null;
                        setFile(picked);
                        setPreview(null);
                        if (picked) setTitle(picked.name);
                      }}
                    />
                    <span className="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3.5 py-2 text-sm text-slate-600 transition-colors hover:border-indigo-300 hover:text-indigo-600">
                      <Upload className="h-4 w-4" />
                      选择文件
                    </span>
                  </label>
                  <span className="text-sm text-slate-500">
                    {file ? file.name : "未选择文件"}
                  </span>
                </div>

                <div className="grid gap-3 sm:grid-cols-3">
                  <label className="space-y-1.5">
                    <span className="text-xs text-slate-500">标题</span>
                    <TextInput
                      value={title}
                      onChange={(event) => setTitle(event.target.value)}
                      placeholder="用于检索展示的标题"
                    />
                  </label>
                  <label className="space-y-1.5">
                    <span className="text-xs text-slate-500">切分策略</span>
                    <Select
                      value={strategy}
                      onChange={(event) => setStrategy(event.target.value)}
                    >
                      {STRATEGIES.map((item) => (
                        <option key={item.value} value={item.value}>
                          {item.label}
                        </option>
                      ))}
                    </Select>
                  </label>
                  <div className="grid grid-cols-2 gap-2">
                    <label className="space-y-1.5">
                      <span className="text-xs text-slate-500">分片长度</span>
                      <TextInput
                        value={chunkSize}
                        onChange={(event) => setChunkSize(event.target.value.replace(/\D/g, ""))}
                        placeholder="留空用默认"
                        inputMode="numeric"
                      />
                    </label>
                    <label className="space-y-1.5">
                      <span className="text-xs text-slate-500">重叠长度</span>
                      <TextInput
                        value={chunkOverlap}
                        onChange={(event) => setChunkOverlap(event.target.value.replace(/\D/g, ""))}
                        placeholder="留空用默认"
                        inputMode="numeric"
                      />
                    </label>
                  </div>
                </div>

                <div className="flex flex-wrap items-center gap-2">
                  <Button
                    variant="ghost"
                    disabled={!file}
                    loading={uploading && !preview}
                    onClick={() => void runPreview()}
                  >
                    <ScanEye className="h-4 w-4" />
                    预览切分
                  </Button>
                  <Button
                    variant="primary"
                    disabled={!file}
                    loading={uploading && !!preview}
                    onClick={() => void runConfirm()}
                  >
                    <CheckCircle2 className="h-4 w-4" />
                    确认入库
                  </Button>
                  {file && (
                    <Button variant="ghost" onClick={resetUpload}>
                      取消
                    </Button>
                  )}
                </div>

                {preview && (
                  <div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-slate-500">
                      <Badge tone="info">{preview.strategy || strategy}</Badge>
                      {preview.chunk_size != null && <span>分片 {preview.chunk_size}</span>}
                      {preview.chunk_overlap != null && <span>重叠 {preview.chunk_overlap}</span>}
                      <span className="font-medium text-slate-700">
                        共切出 {preview.chunks?.length ?? 0} 段
                      </span>
                    </div>
                    <div className="max-h-48 space-y-1.5 overflow-y-auto">
                      {(preview.chunks ?? []).slice(0, 20).map((chunk, index) => (
                        <p
                          key={index}
                          className="rounded bg-white px-3 py-2 text-xs leading-6 text-slate-600"
                        >
                          {typeof chunk === "string" ? chunk : JSON.stringify(chunk)}
                        </p>
                      ))}
                      {(preview.chunks?.length ?? 0) > 20 && (
                        <p className="px-3 text-xs text-slate-400">
                          仅展示前 20 段，共 {preview.chunks?.length} 段
                        </p>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </Card>

            {error && <ErrorState message={error} />}
            {notice && (
              <div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                {notice}
              </div>
            )}

            <Card title="已入库文档" description={`共 ${items.length} 篇`}>
              {items.length === 0 ? (
                <EmptyState text="暂无知识库文档，上传后可被投顾与客服 Agent 检索" />
              ) : (
                <div className="divide-y divide-slate-100">
                  {items.map((item) => {
                    const docId = item.doc_id ?? item.id ?? "";
                    const busy = removing === docId;
                    return (
                      <div
                        key={docId}
                        className="flex items-center justify-between gap-4 py-3.5"
                      >
                        <div className="flex min-w-0 items-start gap-3">
                          <FileText className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
                          <div className="min-w-0">
                            <p className="truncate text-sm font-medium text-slate-800">
                              {item.title ?? item.filename ?? docId}
                            </p>
                            <p className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-400">
                              {item.collection_name && <span>{item.collection_name}</span>}
                              {item.chunk_count != null && <span>{item.chunk_count} 段</span>}
                              {item.create_time && <span>{item.create_time}</span>}
                              <span className="font-mono">{docId}</span>
                            </p>
                          </div>
                        </div>
                        <button
                          onClick={() => void remove(item)}
                          disabled={busy}
                          aria-label="删除文档"
                          className="shrink-0 rounded p-1.5 text-slate-400 transition-colors hover:bg-rose-50 hover:text-rose-500 disabled:opacity-50"
                        >
                          {busy ? (
                            <Loader2 className="h-4 w-4 animate-spin" />
                          ) : (
                            <Trash2 className="h-4 w-4" />
                          )}
                        </button>
                      </div>
                    );
                  })}
                </div>
              )}
            </Card>
          </>
        )}
      </div>
    </main>
  );
}