import {
  BookOpen,
  Database,
  FileText,
  Globe2,
  Loader2,
  Plus,
  RefreshCw,
  Search,
  Settings2,
  Trash2,
} from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import { getStoredAuth } from "@/core/auth";
import {
  type LlmWikiKnowledgeBase,
  type LlmWikiScope,
  searchLlmWiki,
  useLlmWikiActions,
  useLlmWikiKnowledgeBases,
  useLlmWikiSettings,
  useLlmWikiSettingsActions,
} from "@/strategy-components/api/llmwiki";

type WorkspaceTab = "personal" | "public" | "settings";
const LIST_PATH = "/page/workspace/knowledge";

const publicationLabels: Record<string, string> = {
  private: "仅自己",
  pending: "仅自己",
  published: "已公开",
  rejected: "仅自己",
};

function messageOf(error: unknown): string {
  return error instanceof Error ? error.message : "操作失败，请稍后重试";
}

export function WeKnoraKnowledgeWorkspace() {
  const navigate = useNavigate();
  const isAdmin = getStoredAuth()?.system_role === "admin";
  const [tab, setTab] = useState<WorkspaceTab>("personal");
  const scope: LlmWikiScope = tab === "public" ? "public" : "personal";
  const knowledge = useLlmWikiKnowledgeBases(scope, tab !== "settings");
  const actions = useLlmWikiActions();
  const [createOpen, setCreateOpen] = useState(false);
  const [searchText, setSearchText] = useState("");
  const [searching, setSearching] = useState(false);
  const [searchResults, setSearchResults] = useState<Array<{
    chunk_id: string;
    title: string;
    content: string;
    score: number;
    knowledge_base_name: string;
  }>>([]);

  useEffect(() => setSearchResults([]), [tab]);

  const busy = actions.create.isPending || actions.remove.isPending || actions.publication.isPending;
  const openDetails = (item: LlmWikiKnowledgeBase) => {
    if (item.remote_status === "missing") {
      toast.error("该知识库已从知识服务删除，只能清理当前记录");
      return;
    }
    navigate(`${LIST_PATH}/${encodeURIComponent(item.id)}`);
  };

  const runSearch = async () => {
    const query = searchText.trim();
    if (!query) return;
    setSearching(true);
    try {
      setSearchResults(await searchLlmWiki({ query, scope }));
    } catch (error) {
      toast.error(messageOf(error));
    } finally {
      setSearching(false);
    }
  };

  const removeKnowledgeBase = async (item: LlmWikiKnowledgeBase) => {
    const warning = item.remote_status === "missing"
      ? `知识库“${item.name}”已不在知识服务中。确定清理 cmzs 中的这条失效记录吗？`
      : `确定删除知识库“${item.name}”吗？知识服务中的文档和索引也会删除。`;
    if (!window.confirm(warning)) return;
    try {
      await actions.remove.mutateAsync(item.id);
      toast.success("知识库已删除");
    } catch (error) {
      toast.error(messageOf(error));
    }
  };

  const togglePublication = async (item: LlmWikiKnowledgeBase) => {
    const publish = item.publication_status !== "published";
    try {
      await actions.publication.mutateAsync({ id: item.id, publish });
      toast.success(publish ? "知识库已发布到公共 LLMWiki" : "知识库已取消公开");
    } catch (error) {
      toast.error(messageOf(error));
    }
  };

  return (
    <div className="flex h-full min-h-0 flex-col bg-background">
      <div className="border-b bg-gradient-to-r from-primary/8 via-card to-card px-6 py-5">
        <div className="mx-auto flex max-w-[1500px] flex-wrap items-center justify-between gap-4">
          <div>
            <div className="flex items-center gap-2">
              <Database className="size-5 text-primary" />
              <h1 className="text-xl font-semibold">知识库管理</h1>
              <Badge variant="secondary">知识服务</Badge>
            </div>
            <p className="mt-1 text-sm text-muted-foreground">由知识服务负责解析与检索，用户、权限和发布范围由 cmzs 管理。</p>
          </div>
          <div className="flex items-center gap-2 rounded-full border bg-background/80 p-1 shadow-sm backdrop-blur">
            {tab !== "settings" && (
              <Button variant="ghost" size="sm" className="rounded-full" onClick={() => knowledge.refetch()} disabled={knowledge.isFetching}>
                <RefreshCw className={`mr-2 size-4 ${knowledge.isFetching ? "animate-spin" : ""}`} />刷新
              </Button>
            )}
            {tab === "personal" && <Button size="sm" className="rounded-full px-4 shadow-sm" onClick={() => setCreateOpen(true)}><Plus className="mr-2 size-4" />新建知识库</Button>}
          </div>
        </div>
      </div>

      <div className="min-h-0 flex-1 overflow-auto px-6 py-5">
        <div className="mx-auto max-w-[1500px]">
          <Tabs value={tab} onValueChange={(value) => setTab(value as WorkspaceTab)}>
            <div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border bg-card/80 p-3 shadow-sm">
              <TabsList className="rounded-xl bg-muted/70">
                <TabsTrigger value="personal"><BookOpen className="mr-2 size-4" />我的知识库</TabsTrigger>
                <TabsTrigger value="public"><Globe2 className="mr-2 size-4" />公共 LLMWiki</TabsTrigger>
                {isAdmin && <TabsTrigger value="settings"><Settings2 className="mr-2 size-4" />连接配置</TabsTrigger>}
              </TabsList>
              {tab !== "settings" && (
                <div className="flex w-full max-w-xl items-center gap-2 rounded-xl border bg-background/80 p-1 shadow-sm sm:w-auto">
                  <div className="relative min-w-0 flex-1 sm:w-80">
                    <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
                    <Input value={searchText} onChange={(event) => setSearchText(event.target.value)} onKeyDown={(event) => event.key === "Enter" && void runSearch()} placeholder={tab === "public" ? "检索公共知识" : "检索我的知识"} className="border-0 bg-transparent pl-9 shadow-none focus-visible:ring-0" />
                  </div>
                  <Button variant="secondary" className="rounded-lg px-4" onClick={() => void runSearch()} disabled={searching || !searchText.trim()}>{searching ? <Loader2 className="size-4 animate-spin" /> : "检索"}</Button>
                </div>
              )}
            </div>

            <TabsContent value="personal" className="mt-5"><KnowledgeGrid rows={knowledge.data ?? []} loading={knowledge.isLoading} error={knowledge.error} emptyText="还没有个人知识库，点击右上角创建。" busy={busy} onOpen={openDetails} onPublish={togglePublication} onDelete={removeKnowledgeBase} /></TabsContent>
            <TabsContent value="public" className="mt-5"><KnowledgeGrid rows={knowledge.data ?? []} loading={knowledge.isLoading} error={knowledge.error} emptyText="公共 LLMWiki 暂无已发布知识库。" busy={busy} onOpen={openDetails} onPublish={togglePublication} onDelete={removeKnowledgeBase} /></TabsContent>
            {isAdmin && <TabsContent value="settings" className="mt-5"><ConnectionSettings /></TabsContent>}
          </Tabs>

          {searchResults.length > 0 && tab !== "settings" && (
            <Card className="mt-5">
              <CardHeader className="pb-3"><CardTitle className="text-base">检索结果</CardTitle><CardDescription>结果由知识服务检索返回，问答中使用同一授权链路。</CardDescription></CardHeader>
              <CardContent className="space-y-3">{searchResults.map((result) => <div key={result.chunk_id} className="rounded-lg border p-3"><div className="flex items-center justify-between gap-3 text-sm font-medium"><span>{result.title || "未命名来源"}</span><Badge variant="outline">{result.knowledge_base_name}</Badge></div><p className="mt-2 line-clamp-3 whitespace-pre-wrap text-sm text-muted-foreground">{result.content}</p></div>)}</CardContent>
            </Card>
          )}
        </div>
      </div>

      <CreateKnowledgeDialog open={createOpen} pending={actions.create.isPending} onOpenChange={setCreateOpen} onCreate={async (input) => {
        try {
          const created = await actions.create.mutateAsync(input);
          setCreateOpen(false);
          navigate(`${LIST_PATH}/${encodeURIComponent(created.id)}`);
          toast.success("知识库已创建");
        } catch (error) {
          toast.error(messageOf(error));
        }
      }} />
    </div>
  );
}

function KnowledgeGrid({
  rows,
  loading,
  error,
  emptyText,
  busy,
  onOpen,
  onPublish,
  onDelete,
}: {
  rows: LlmWikiKnowledgeBase[];
  loading: boolean;
  error: unknown;
  emptyText: string;
  busy: boolean;
  onOpen: (item: LlmWikiKnowledgeBase) => void;
  onPublish: (item: LlmWikiKnowledgeBase) => void;
  onDelete: (item: LlmWikiKnowledgeBase) => void;
}) {
  if (loading) return <div className="flex h-64 items-center justify-center text-muted-foreground"><Loader2 className="mr-2 size-5 animate-spin" />正在读取知识库</div>;
  if (error) return <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-6 text-sm text-destructive">{messageOf(error)}</div>;
  if (!rows.length) return <div className="flex h-64 items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">{emptyText}</div>;
  return (
    <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
      {rows.map((item) => (
        <Card
          key={item.id}
          className={`group overflow-hidden rounded-2xl transition-all hover:-translate-y-0.5 hover:shadow-lg ${
            item.remote_status === "missing"
              ? "border-amber-500/40 bg-amber-500/[0.03]"
              : "border-border/70 bg-card/95 hover:border-primary/30"
          }`}
        >
          <div className={`h-1 ${item.publication_status === "published" ? "bg-primary" : "bg-muted"}`} />
          <button type="button" disabled={item.remote_status === "missing"} className="w-full text-left outline-none transition-colors enabled:hover:bg-muted/25 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-default" onClick={() => onOpen(item)}>
            <CardHeader className="pb-3 pt-5">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0"><CardTitle className="truncate text-base">{item.name}</CardTitle><CardDescription className="mt-1 line-clamp-2 min-h-10">{item.description || "暂无描述"}</CardDescription></div>
                <div className="flex shrink-0 flex-col items-end gap-1.5">{item.remote_status === "missing" ? <Badge variant="outline" className="border-amber-500/50 text-amber-700 dark:text-amber-300">远端已删除</Badge> : <Badge variant={item.publication_status === "published" ? "default" : "secondary"}>{publicationLabels[item.publication_status] ?? "仅自己"}</Badge>}{item.remote_status !== "missing" && item.indexing_strategy?.wiki_enabled && <Badge className="bg-violet-100 text-violet-700 hover:bg-violet-100 dark:bg-violet-950 dark:text-violet-300">Wiki</Badge>}</div>
              </div>
            </CardHeader>
            <div className="px-6 pb-4"><div className="grid grid-cols-3 gap-2 rounded-xl border bg-muted/35 p-3 text-center text-xs"><div><div className="text-base font-semibold text-foreground">{item.knowledge_count}</div><span className="text-muted-foreground">文档</span></div><div><div className="text-base font-semibold text-foreground">{item.chunk_count}</div><span className="text-muted-foreground">分块</span></div><div><div className="text-base font-semibold text-foreground">{item.processing_count}</div><span className="text-muted-foreground">处理中</span></div></div></div>
          </button>
          <CardContent className="border-t bg-muted/20 px-6 py-4">
            <div className="flex items-center justify-between gap-3">
              <div className="flex min-w-0 flex-wrap items-center gap-2">
                {item.remote_status === "missing" ? <span className="text-xs text-muted-foreground">知识服务资源不存在，可清理本地记录</span> : <Button size="sm" variant="outline" className="rounded-full" onClick={() => onOpen(item)}><FileText className="mr-2 size-4" />查看详情</Button>}
                {item.remote_status !== "missing" && item.is_owner && !item.is_conversation_deposit && <Button size="sm" variant="secondary" className="rounded-full" disabled={busy} onClick={() => void onPublish(item)}>{item.publication_status === "published" ? "取消公开" : "发布公共库"}</Button>}
              </div>
              {item.can_write && !item.is_conversation_deposit && <Button size="icon" variant="ghost" className="size-8 shrink-0 rounded-full text-destructive hover:bg-destructive/10 hover:text-destructive" aria-label={item.remote_status === "missing" ? `清理失效记录 ${item.name}` : `删除知识库 ${item.name}`} title={item.remote_status === "missing" ? "清理失效记录" : "删除知识库"} disabled={busy} onClick={() => void onDelete(item)}><Trash2 className="size-4" /></Button>}
            </div>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}

function CreateKnowledgeDialog({
  open,
  pending,
  onOpenChange,
  onCreate,
}: {
  open: boolean;
  pending: boolean;
  onOpenChange: (value: boolean) => void;
  onCreate: (input: { name: string; description: string; type: "document" | "faq"; wiki_enabled: boolean }) => Promise<void>;
}) {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [wikiEnabled, setWikiEnabled] = useState(true);
  useEffect(() => {
    if (!open) { setName(""); setDescription(""); setWikiEnabled(true); }
  }, [open]);
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader><DialogTitle>新建个人知识库</DialogTitle><DialogDescription>选择知识库模式；模型、切块和存储策略仍由知识服务管理。</DialogDescription></DialogHeader>
        <div className="space-y-4 py-2">
          <div className="space-y-2"><label className="text-sm font-medium" htmlFor="llmwiki-name">名称</label><Input id="llmwiki-name" value={name} onChange={(event) => setName(event.target.value)} maxLength={255} /></div>
          <div className="space-y-2"><label className="text-sm font-medium" htmlFor="llmwiki-description">描述</label><Textarea id="llmwiki-description" value={description} onChange={(event) => setDescription(event.target.value)} rows={4} maxLength={2048} /></div>
          <div className="space-y-2"><div className="text-sm font-medium">知识库模式</div><div className="grid gap-3 sm:grid-cols-2">
            <button type="button" className={`rounded-xl border p-4 text-left transition-colors ${wikiEnabled ? "border-primary bg-primary/5 ring-1 ring-primary" : "hover:bg-muted/40"}`} onClick={() => setWikiEnabled(true)}><div className="flex items-center gap-2 text-sm font-semibold"><BookOpen className="size-4 text-violet-500" />Wiki 知识库</div><p className="mt-2 text-xs leading-5 text-muted-foreground">自动综合资料，生成 Wiki 页面和页面关系图谱。</p></button>
            <button type="button" className={`rounded-xl border p-4 text-left transition-colors ${!wikiEnabled ? "border-primary bg-primary/5 ring-1 ring-primary" : "hover:bg-muted/40"}`} onClick={() => setWikiEnabled(false)}><div className="flex items-center gap-2 text-sm font-semibold"><FileText className="size-4 text-blue-500" />标准知识库</div><p className="mt-2 text-xs leading-5 text-muted-foreground">仅进行文档解析、切块与向量/关键词索引。</p></button>
          </div></div>
        </div>
        <DialogFooter><Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button><Button disabled={pending || !name.trim()} onClick={() => void onCreate({ name: name.trim(), description: description.trim(), type: "document", wiki_enabled: wikiEnabled })}>{pending && <Loader2 className="mr-2 size-4 animate-spin" />}创建</Button></DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export function ConnectionSettings() {
  const settings = useLlmWikiSettings(true);
  const actions = useLlmWikiSettingsActions();
  const [apiUrl, setApiUrl] = useState("");
  const [webUrl, setWebUrl] = useState("");

  useEffect(() => {
    if (!settings.data) return;
    setApiUrl(settings.data.api_base_url || settings.data.file_api_base_url || "");
    setWebUrl(settings.data.web_base_url || settings.data.file_web_base_url || "");
  }, [settings.data]);

  const status = useMemo(() => settings.data?.effective_provider === "weknora" ? "知识服务模式" : "原 LLMWiki 模式", [settings.data]);
  if (settings.isLoading) return <div className="flex h-52 items-center justify-center"><Loader2 className="size-5 animate-spin" /></div>;
  if (settings.error) return <div className="rounded-lg border border-destructive/30 p-5 text-sm text-destructive">{messageOf(settings.error)}</div>;
  return (
    <Card className="max-w-3xl">
      <CardHeader><CardTitle className="flex items-center gap-2 text-base"><Settings2 className="size-5" />知识服务连接</CardTitle><CardDescription>这里只管理 cmzs 到知识服务的连接地址。数据库、Redis、模型、存储和解析器仍在服务端配置中维护。</CardDescription></CardHeader>
      <CardContent className="space-y-5">
        <div className="flex flex-wrap gap-2 text-sm"><Badge>{status}</Badge><Badge variant="secondary">服务端代理鉴权</Badge>{settings.data?.override_enabled && <Badge variant="outline">页面配置覆盖中</Badge>}</div>
        <div className="space-y-2"><label className="text-sm font-medium" htmlFor="weknora-api-url">知识服务 API 地址</label><Input id="weknora-api-url" value={apiUrl} onChange={(event) => setApiUrl(event.target.value)} placeholder="http://knowledge-service:8080" /><p className="text-xs text-muted-foreground">非空启用知识服务；保存为空会切回原 LLMWiki。</p></div>
        <div className="space-y-2"><label className="text-sm font-medium" htmlFor="weknora-web-url">知识服务管理地址（可选）</label><Input id="weknora-web-url" value={webUrl} onChange={(event) => setWebUrl(event.target.value)} placeholder="https://knowledge-admin.example.com" /></div>
        <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-muted-foreground">配置文件地址：{settings.data?.file_api_base_url || "未配置"}。页面只配置地址；免登录详情页所需的管理员账号/密码只从后端 config.yaml 或环境变量读取，不在前端保存。</div>
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" disabled={!apiUrl.trim() || actions.test.isPending} onClick={async () => { try { await actions.test.mutateAsync(apiUrl.trim()); toast.success("知识服务连接正常"); } catch (error) { toast.error(messageOf(error)); } }}>{actions.test.isPending && <Loader2 className="mr-2 size-4 animate-spin" />}测试连接</Button>
          <Button disabled={actions.save.isPending} onClick={async () => { try { await actions.save.mutateAsync({ override_enabled: true, api_base_url: apiUrl.trim(), web_base_url: webUrl.trim() }); toast.success(apiUrl.trim() ? "已启用知识服务模式" : "已切换到原 LLMWiki 模式"); } catch (error) { toast.error(messageOf(error)); } }}>{actions.save.isPending && <Loader2 className="mr-2 size-4 animate-spin" />}保存页面配置</Button>
          <Button variant="secondary" disabled={actions.reset.isPending} onClick={async () => { try { await actions.reset.mutateAsync(); toast.success("已恢复 config.yaml 配置"); } catch (error) { toast.error(messageOf(error)); } }}>恢复配置文件</Button>
        </div>
      </CardContent>
    </Card>
  );
}

export default WeKnoraKnowledgeWorkspace;