"use client";

import { useState, useEffect, useCallback, useMemo } from "react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import {
  listProjects,
  projectsApi,
  customersApi,
  type ProjectRead,
  type CustomerRead,
} from "@/lib/api/client";
import { Copy, Search, FileText, Eye, Pencil, Loader2 } from "lucide-react";
import { toast } from "sonner";
import ReactMarkdown from "react-markdown";

function parseTags(tagsStr: string | null | undefined): string[] {
  if (!tagsStr?.trim()) return [];
  return tagsStr
    .split(",")
    .map((t) => t.trim())
    .filter(Boolean);
}

export function HistoricalReferences() {
  const [projects, setProjects] = useState<ProjectRead[]>([]);
  const [search, setSearch] = useState("");
  const [selectedTag, setSelectedTag] = useState<string>("");
  const [loading, setLoading] = useState(true);
  const [previewProject, setPreviewProject] = useState<ProjectRead | null>(null);
  const [editProject, setEditProject] = useState<ProjectRead | null>(null);
  const [editRaw, setEditRaw] = useState("");
  const [editMd, setEditMd] = useState("");
  const [saving, setSaving] = useState(false);
  const [editCustomer, setEditCustomer] = useState<CustomerRead | null>(null);
  const [customerName, setCustomerName] = useState("");
  const [customerContact, setCustomerContact] = useState("");
  const [customerTags, setCustomerTags] = useState("");
  const [savingCustomer, setSavingCustomer] = useState(false);

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const data = await listProjects(
        selectedTag ? { customer_tag: selectedTag } : undefined
      );
      setProjects(data);
    } catch (e) {
      toast.error("加载历史项目失败");
      setProjects([]);
    } finally {
      setLoading(false);
    }
  }, [selectedTag]);

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

  const allTags = useMemo(() => {
    const set = new Set<string>();
    projects.forEach((p) =>
      parseTags(p.customer?.tags ?? null).forEach((t) => set.add(t))
    );
    return Array.from(set).sort();
  }, [projects]);

  const filtered = useMemo(() => {
    let list = projects;
    if (search.trim()) {
      const q = search.toLowerCase();
      list = list.filter(
        (p) =>
          p.raw_requirement.toLowerCase().includes(q) ||
          (p.ai_solution_md || "").toLowerCase().includes(q)
      );
    }
    return list.slice(0, 50);
  }, [projects, search]);

  const groupedByCustomer = useMemo(() => {
    const map = new Map<string, ProjectRead[]>();
    filtered.forEach((p) => {
      const name = p.customer?.name || "未关联客户";
      const key = name;
      if (!map.has(key)) map.set(key, []);
      map.get(key)!.push(p);
    });
    return Array.from(map.entries()).sort(([a], [b]) => a.localeCompare(b, "zh-CN"));
  }, [filtered]);

  const copySnippet = (text: string, label: string) => {
    if (!text) return;
    navigator.clipboard.writeText(text);
    toast.success(`已复制 ${label}`);
  };

  const openPreview = (p: ProjectRead) => setPreviewProject(p);
  const openEdit = (p: ProjectRead) => {
    setEditProject(p);
    setEditRaw(p.raw_requirement);
    setEditMd(p.ai_solution_md || "");
  };

  const handleSaveEdit = async () => {
    if (!editProject) return;
    setSaving(true);
    try {
      await projectsApi.update(editProject.id, {
        raw_requirement: editRaw,
        ai_solution_md: editMd || null,
      });
      toast.success("已保存");
      setEditProject(null);
      load();
    } catch (e) {
      toast.error("保存失败");
    } finally {
      setSaving(false);
    }
  };

  const openEditCustomer = (p: ProjectRead | null) => {
    if (!p?.customer) return;
    setEditCustomer(p.customer);
    setCustomerName(p.customer.name);
    setCustomerContact(p.customer.contact_info || "");
    setCustomerTags(p.customer.tags || "");
  };

  const handleSaveCustomer = async () => {
    if (!editCustomer) return;
    setSavingCustomer(true);
    try {
      const updated = await customersApi.update(editCustomer.id, {
        name: customerName.trim() || editCustomer.name,
        contact_info: customerContact.trim() || null,
        tags: customerTags.trim() || null,
      });
      toast.success("客户信息已保存");
      // 更新本地 projects 中的 customer 信息
      setProjects((prev) =>
        prev.map((p) =>
          p.customer_id === updated.id ? { ...p, customer: updated } : p
        )
      );
      setEditCustomer(null);
    } catch (e) {
      toast.error("保存客户失败");
    } finally {
      setSavingCustomer(false);
    }
  };

  return (
    <div className="p-2">
      <div className="space-y-2 mb-2">
        <div className="flex gap-1 items-center">
          <Select
            value={selectedTag || "__all__"}
            onValueChange={(v) => setSelectedTag(v === "__all__" ? "" : v)}
          >
            <SelectTrigger className="h-8 text-xs flex-1">
              <SelectValue placeholder="按标签收纳" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__all__" className="text-xs">
                全部
              </SelectItem>
              {allTags.map((t) => (
                <SelectItem key={t} value={t} className="text-xs">
                  {t}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="relative">
          <Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
          <Input
            placeholder="搜索项目..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="h-8 pl-7 text-xs"
          />
        </div>
      </div>
      <div className="max-h-64 overflow-y-auto space-y-2 pr-1">
        {loading ? (
          <p className="text-xs text-muted-foreground px-2">加载中...</p>
        ) : filtered.length === 0 ? (
          <p className="text-xs text-muted-foreground px-2">暂无项目</p>
        ) : (
          groupedByCustomer.map(([customerName, items]) => (
            <div key={customerName} className="space-y-1">
              <p className="px-2 text-[11px] font-medium text-muted-foreground">
                {customerName}
              </p>
              {items.map((p) => (
                <div
                  key={p.id}
                  className={cn(
                    "rounded border bg-background/50 p-2 text-xs space-y-1 ml-1"
                  )}
                >
                  <p className="font-medium text-foreground line-clamp-1 flex items-center justify-between gap-1">
                    <span>项目 #{p.id}</span>
                    {p.customer?.tags && (
                      <span className="text-muted-foreground font-normal truncate max-w-[60%]">
                        {parseTags(p.customer.tags).slice(0, 2).join(", ")}
                      </span>
                    )}
                  </p>
                  <p className="text-muted-foreground line-clamp-2">
                    {p.raw_requirement.slice(0, 80)}…
                  </p>
                  <div className="flex flex-wrap gap-1 pt-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 px-1.5 text-xs"
                      onClick={() => openPreview(p)}
                      title="预览"
                    >
                      <Eye className="h-3 w-3 mr-0.5" />
                      预览
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 px-1.5 text-xs"
                      onClick={() => openEdit(p)}
                      title="编辑"
                    >
                      <Pencil className="h-3 w-3 mr-0.5" />
                      编辑
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 px-1.5 text-xs"
                      onClick={() => copySnippet(p.raw_requirement, "原始需求")}
                    >
                      <Copy className="h-3 w-3 mr-0.5" />
                      需求
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-6 px-1.5 text-xs"
                      onClick={() => copySnippet(p.ai_solution_md || "", "方案")}
                    >
                      <Copy className="h-3 w-3 mr-0.5" />
                      方案
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          ))
        )}
      </div>

      {/* 预览弹窗 */}
      <Dialog open={!!previewProject} onOpenChange={() => setPreviewProject(null)}>
        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
          <DialogHeader>
            <DialogTitle>
              项目 #{previewProject?.id}
              {previewProject?.customer?.name && (
                <span className="text-sm font-normal text-muted-foreground ml-2 flex items-center gap-2">
                  {previewProject.customer.name}
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-6 px-1.5 text-[11px]"
                    onClick={() => openEditCustomer(previewProject)}
                  >
                    编辑客户
                  </Button>
                </span>
              )}
            </DialogTitle>
          </DialogHeader>
          <Tabs defaultValue="requirement" className="flex-1 min-h-0 flex flex-col overflow-hidden">
            <TabsList>
              <TabsTrigger value="requirement">原始需求</TabsTrigger>
              <TabsTrigger value="solution">方案</TabsTrigger>
            </TabsList>
            <TabsContent value="requirement" className="mt-2 overflow-auto flex-1 min-h-0">
              <pre className="text-xs whitespace-pre-wrap bg-muted/50 p-3 rounded-md">
                {previewProject?.raw_requirement ?? ""}
              </pre>
            </TabsContent>
            <TabsContent value="solution" className="mt-2 overflow-auto flex-1 min-h-0">
              <div className="prose prose-sm dark:prose-invert max-w-none p-2">
                {previewProject?.ai_solution_md ? (
                  <ReactMarkdown>{previewProject.ai_solution_md}</ReactMarkdown>
                ) : (
                  <p className="text-muted-foreground">暂无方案</p>
                )}
              </div>
            </TabsContent>
          </Tabs>
        </DialogContent>
      </Dialog>

      {/* 二次编辑弹窗 */}
      <Dialog open={!!editProject} onOpenChange={() => !saving && setEditProject(null)}>
        <DialogContent className="max-w-2xl max-h-[85vh] overflow-hidden flex flex-col">
          <DialogHeader>
            <DialogTitle>编辑 项目 #{editProject?.id}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-2 flex-1 min-h-0 overflow-auto">
            <div className="grid gap-2">
              <Label>原始需求</Label>
              <textarea
                className="min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-none"
                value={editRaw}
                onChange={(e) => setEditRaw(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label>方案 (Markdown)</Label>
              <textarea
                className="min-h-[180px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono resize-none"
                value={editMd}
                onChange={(e) => setEditMd(e.target.value)}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditProject(null)} disabled={saving}>
              取消
            </Button>
            <Button onClick={handleSaveEdit} disabled={saving}>
              {saving ? (
                <Loader2 className="h-4 w-4 animate-spin mr-2" />
              ) : null}
              保存
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 客户二次编辑弹窗 */}
      <Dialog open={!!editCustomer} onOpenChange={() => !savingCustomer && setEditCustomer(null)}>
        <DialogContent className="sm:max-w-sm">
          <DialogHeader>
            <DialogTitle>编辑客户</DialogTitle>
          </DialogHeader>
          <div className="grid gap-4 py-2">
            <div className="grid gap-2">
              <Label htmlFor="hist-customer-name">客户名称</Label>
              <Input
                id="hist-customer-name"
                value={customerName}
                onChange={(e) => setCustomerName(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="hist-customer-contact">联系方式</Label>
              <Input
                id="hist-customer-contact"
                value={customerContact}
                onChange={(e) => setCustomerContact(e.target.value)}
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="hist-customer-tags">标签（逗号分隔）</Label>
              <Input
                id="hist-customer-tags"
                value={customerTags}
                onChange={(e) => setCustomerTags(e.target.value)}
                placeholder="如：重点客户, 已签约"
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setEditCustomer(null)}
              disabled={savingCustomer}
            >
              取消
            </Button>
            <Button onClick={handleSaveCustomer} disabled={savingCustomer}>
              {savingCustomer && <Loader2 className="h-4 w-4 animate-spin mr-2" />}
              保存
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}