"use client";

import { useState, useEffect, useCallback, useRef } from "react";
import ReactMarkdown from "react-markdown";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Progress } from "@/components/ui/progress";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Wand2,
  Save,
  FileSpreadsheet,
  FileDown,
  Loader2,
  Plus,
  Search,
  CloudUpload,
} from "lucide-react";
import { toast } from "sonner";
import {
  apiBase,
  customersApi,
  projectsApi,
  templatesApi,
  pushProjectToCloud,
  downloadFile,
  downloadFileAsBlob,
  type CustomerRead,
  type QuoteGenerateResponse,
  type TemplateInfo,
} from "@/lib/api/client";

export default function WorkspacePage() {
  const [customers, setCustomers] = useState<CustomerRead[]>([]);
  const [customerId, setCustomerId] = useState<string>("");
  const [rawText, setRawText] = useState("");
  const [solutionMd, setSolutionMd] = useState("");
  const [projectId, setProjectId] = useState<number | null>(null);
  const [lastQuote, setLastQuote] = useState<QuoteGenerateResponse | null>(null);
  const [analyzing, setAnalyzing] = useState(false);
  const [analyzeProgress, setAnalyzeProgress] = useState(0);
  const [saving, setSaving] = useState(false);
  const [generatingQuote, setGeneratingQuote] = useState(false);
  const [addCustomerOpen, setAddCustomerOpen] = useState(false);
  const [newCustomerName, setNewCustomerName] = useState("");
  const [newCustomerContact, setNewCustomerContact] = useState("");
  const [newCustomerTags, setNewCustomerTags] = useState("");
  const [addingCustomer, setAddingCustomer] = useState(false);
  const [quoteTemplates, setQuoteTemplates] = useState<TemplateInfo[]>([]);
  const [selectedQuoteTemplate, setSelectedQuoteTemplate] = useState<string>("");
  const [customerSearch, setCustomerSearch] = useState("");
  const [pushToCloudLoading, setPushToCloudLoading] = useState(false);
  const didInitRef = useRef(false);

  const loadCustomers = useCallback(
    async (search?: string) => {
      try {
        const list = await customersApi.list(search?.trim() ? { q: search.trim() } : undefined);
        setCustomers(list);
        if (list.length > 0 && !customerId) setCustomerId(String(list[0].id));
        if (!search?.trim()) {
          try {
            sessionStorage.setItem("opc_customers", JSON.stringify({ t: Date.now(), v: list }));
          } catch {}
        }
      } catch {
        toast.error("加载客户列表失败");
      }
    },
    [customerId],
  );

  useEffect(() => {
    if (!customerSearch.trim()) {
      if (!didInitRef.current) {
        didInitRef.current = true;
        try {
          const raw = sessionStorage.getItem("opc_customers");
          if (raw) {
            const parsed = JSON.parse(raw);
            if (parsed?.v && Date.now() - (parsed.t || 0) < 60_000) setCustomers(parsed.v);
          }
        } catch {}
        void loadCustomers("");
        return;
      }
    }
    void loadCustomers(customerSearch);
  }, [loadCustomers, customerSearch]);

  const loadQuoteTemplates = useCallback(async () => {
    try {
      const list = await templatesApi.list();
      setQuoteTemplates(list.filter((t) => t.type === "excel"));
      try {
        sessionStorage.setItem("opc_templates", JSON.stringify({ t: Date.now(), v: list }));
      } catch {}
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      const raw = sessionStorage.getItem("opc_templates");
      if (raw) {
        const parsed = JSON.parse(raw);
        if (parsed?.v && Date.now() - (parsed.t || 0) < 60_000) {
          setQuoteTemplates((parsed.v as TemplateInfo[]).filter((t) => t.type === "excel"));
        }
      }
    } catch {}
    void loadQuoteTemplates();
  }, [loadQuoteTemplates]);

  const handleAddCustomer = async (e: React.FormEvent) => {
    e.preventDefault();
    const name = newCustomerName.trim();
    if (!name) {
      toast.error("请填写客户名称");
      return;
    }
    setAddingCustomer(true);
    try {
      const created = await customersApi.create({
        name,
        contact_info: newCustomerContact.trim() || null,
        tags: newCustomerTags.trim() || null,
      });
      toast.success("客户已添加");
      setAddCustomerOpen(false);
      setNewCustomerName("");
      setNewCustomerContact("");
      setNewCustomerTags("");
      await loadCustomers(customerSearch);
      setCustomerId(String(created.id));
    } catch (err) {
      const msg = err instanceof Error ? err.message : "添加失败";
      toast.error(msg);
    } finally {
      setAddingCustomer(false);
    }
  };

  const handleAnalyze = async () => {
    if (!customerId || !rawText.trim()) {
      toast.error("请选择客户并输入原始需求");
      return;
    }
    setAnalyzing(true);
    setAnalyzeProgress(8);
    setSolutionMd("");
    try {
      const base = apiBase();
      const res = await fetch(`${base}/projects/analyze_stream`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          customer_id: Number(customerId),
          raw_text: rawText.trim(),
        }),
      });
      if (!res.ok || !res.body) {
        const text = await res.text();
        throw new Error(text || "AI 解析失败");
      }

      let buf = "";
      const reader = res.body.getReader();
      const decoder = new TextDecoder("utf-8");

      const progressTimer = window.setInterval(() => {
        setAnalyzeProgress((p) => (p < 90 ? p + Math.max(1, Math.round((90 - p) / 10)) : p));
      }, 400);

      try {
        while (true) {
          const { value, done } = await reader.read();
          if (done) break;
          buf += decoder.decode(value, { stream: true });

          const parts = buf.split("\n\n");
          buf = parts.pop() || "";
          for (const chunk of parts) {
            const line = chunk.split("\n").find((l) => l.startsWith("data: "));
            if (!line) continue;
            const payload = line.slice(6);
            let evt: any;
            try {
              evt = JSON.parse(payload);
            } catch {
              continue;
            }
            if (evt.type === "delta" && typeof evt.content === "string") {
              setSolutionMd((prev) => prev + evt.content);
            } else if (evt.type === "done" && typeof evt.project_id === "number") {
              setProjectId(evt.project_id);
              setLastQuote(null);
              setAnalyzeProgress(100);
            } else if (evt.type === "error") {
              throw new Error(evt.message || "AI 解析失败");
            }
          }
        }
      } finally {
        window.clearInterval(progressTimer);
      }
      toast.success("方案已生成（流式），可在右侧编辑");
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "AI 解析失败";
      toast.error(msg);
    } finally {
      setAnalyzing(false);
    }
  };

  const handlePushToCloud = async (platform: "feishu" | "yuque" | "tencent") => {
    if (projectId == null) return;
    const md = solutionMd?.trim() || "";
    if (!md) {
      toast.error("请先在编辑器中填写方案内容后再推送");
      return;
    }
    setPushToCloudLoading(true);
    try {
      const res = await pushProjectToCloud(projectId, { platform, body_md: md });
      toast.success("已推送到云文档", {
        action: res.url
          ? {
              label: "打开链接",
              onClick: () => window.open(res.url, "_blank"),
            }
          : undefined,
      });
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "推送失败");
    } finally {
      setPushToCloudLoading(false);
    }
  };

  const handleSaveToArchive = async () => {
    if (projectId == null) {
      toast.error("请先进行 AI 解析");
      return;
    }
    setSaving(true);
    try {
      await projectsApi.update(projectId, { ai_solution_md: solutionMd });
      toast.success("已保存到项目档案");
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "保存失败";
      toast.error(msg);
    } finally {
      setSaving(false);
    }
  };

  const handleDraftQuote = async () => {
    if (projectId == null) {
      toast.error("请先进行 AI 解析并保存");
      return;
    }
    setGeneratingQuote(true);
    try {
      const res = await projectsApi.generateQuote(projectId, selectedQuoteTemplate || undefined);
      setLastQuote(res);
      toast.success("报价单已生成");
      downloadFile(res.excel_path, `quote_project_${projectId}.xlsx`);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "生成报价失败";
      toast.error(msg);
    } finally {
      setGeneratingQuote(false);
    }
  };

  const handleExportPdf = async () => {
    if (lastQuote?.pdf_path) {
      downloadFile(lastQuote.pdf_path, `quote_project_${projectId}.pdf`);
      toast.success("PDF 已下载");
      return;
    }
    if (projectId == null) {
      toast.error("请先进行 AI 解析");
      return;
    }
    setGeneratingQuote(true);
    try {
      const res = await projectsApi.generateQuote(projectId, selectedQuoteTemplate || undefined);
      setLastQuote(res);
      await downloadFileAsBlob(res.pdf_path, `quote_project_${projectId}.pdf`);
      toast.success("PDF 已下载");
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "生成 PDF 失败";
      toast.error(msg);
    } finally {
      setGeneratingQuote(false);
    }
  };

  return (
    <div className="flex h-full flex-col">
      <div className="flex flex-1 min-h-0">
        <div className="flex w-[40%] flex-col border-r">
          <Card className="rounded-none border-0 border-b h-full flex flex-col">
            <CardHeader className="py-3">
              <CardTitle className="text-base flex items-center justify-between">
                原始需求
                <Button size="sm" onClick={handleAnalyze} disabled={analyzing || !rawText.trim() || !customerId}>
                  {analyzing ? (
                    <span className="w-[160px]">
                      <Progress value={analyzeProgress} />
                    </span>
                  ) : (
                    <>
                      <Wand2 className="h-4 w-4" />
                      <span className="ml-1.5">AI 解析</span>
                    </>
                  )}
                </Button>
              </CardTitle>
            </CardHeader>
            <CardContent className="flex-1 flex flex-col gap-2 min-h-0 pt-0">
              <div className="space-y-1.5">
                <Label>客户</Label>
                <div className="flex gap-1 items-center">
                  <div className="relative flex-1">
                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder="搜索客户名称/联系方式"
                      value={customerSearch}
                      onChange={(e) => setCustomerSearch(e.target.value)}
                      className="pl-8 h-9"
                    />
                  </div>
                </div>
                <div className="flex gap-1">
                  <Select value={customerId} onValueChange={setCustomerId}>
                    <SelectTrigger className="flex-1">
                      <SelectValue placeholder="选择客户" />
                    </SelectTrigger>
                    <SelectContent>
                      {customers.map((c) => (
                        <SelectItem key={c.id} value={String(c.id)}>
                          <span className="flex items-center gap-2">
                            {c.name}
                            {c.tags && <span className="text-muted-foreground text-xs">({c.tags})</span>}
                          </span>
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <Dialog open={addCustomerOpen} onOpenChange={setAddCustomerOpen}>
                    <DialogTrigger asChild>
                      <Button type="button" size="icon" variant="outline" title="新建客户">
                        <Plus className="h-4 w-4" />
                      </Button>
                    </DialogTrigger>
                    <DialogContent className="sm:max-w-sm">
                      <DialogHeader>
                        <DialogTitle>新建客户</DialogTitle>
                      </DialogHeader>
                      <form onSubmit={handleAddCustomer}>
                        <div className="grid gap-4 py-4">
                          <div className="grid gap-2">
                            <Label htmlFor="customer-name">客户名称</Label>
                            <Input
                              id="customer-name"
                              value={newCustomerName}
                              onChange={(e) => setNewCustomerName(e.target.value)}
                              placeholder="必填"
                            />
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="customer-contact">联系方式</Label>
                            <Input
                              id="customer-contact"
                              value={newCustomerContact}
                              onChange={(e) => setNewCustomerContact(e.target.value)}
                              placeholder="选填"
                            />
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="customer-tags">标签（逗号分隔，用于收纳筛选）</Label>
                            <Input
                              id="customer-tags"
                              value={newCustomerTags}
                              onChange={(e) => setNewCustomerTags(e.target.value)}
                              placeholder="如：重点客户, 已签约"
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button type="button" variant="outline" onClick={() => setAddCustomerOpen(false)}>
                            取消
                          </Button>
                          <Button type="submit" disabled={addingCustomer}>
                            {addingCustomer ? <Loader2 className="h-4 w-4 animate-spin" /> : "添加"}
                          </Button>
                        </DialogFooter>
                      </form>
                    </DialogContent>
                  </Dialog>
                </div>
              </div>
              <div className="flex-1 flex flex-col min-h-0">
                <Label>微信/客户需求文本</Label>
                <textarea
                  className="mt-1.5 flex-1 min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
                  placeholder="粘贴或输入客户原始需求..."
                  value={rawText}
                  onChange={(e) => setRawText(e.target.value)}
                />
              </div>
            </CardContent>
          </Card>
        </div>

        <div className="flex flex-1 flex-col min-w-0">
          <Card className="rounded-none border-0 h-full flex flex-col">
            <CardHeader className="py-3">
              <CardTitle className="text-base">方案草稿（可编辑）</CardTitle>
            </CardHeader>
            <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
              <Tabs defaultValue="edit" className="flex-1 flex flex-col min-h-0">
                <TabsList>
                  <TabsTrigger value="edit">编辑</TabsTrigger>
                  <TabsTrigger value="preview">预览</TabsTrigger>
                </TabsList>
                <TabsContent value="edit" className="flex-1 min-h-0 mt-2">
                  <textarea
                    className="h-full min-h-[320px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 resize-none"
                    placeholder="AI 解析后将在此显示 Markdown，可直接修改..."
                    value={solutionMd}
                    onChange={(e) => setSolutionMd(e.target.value)}
                  />
                </TabsContent>
                <TabsContent value="preview" className="flex-1 min-h-0 mt-2 overflow-auto">
                  <div className="prose prose-sm dark:prose-invert max-w-none p-2">
                    {solutionMd ? <ReactMarkdown>{solutionMd}</ReactMarkdown> : <p className="text-muted-foreground">暂无内容</p>}
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      </div>

      <div className="flex items-center gap-3 border-t bg-card px-4 py-3 shadow-[0_-2px 10px rgba(0,0,0,0.05)] flex-wrap">
        <div className="flex items-center gap-2">
          <span className="text-xs text-muted-foreground whitespace-nowrap">报价模板</span>
          <Select value={selectedQuoteTemplate || "__latest__"} onValueChange={(v) => setSelectedQuoteTemplate(v === "__latest__" ? "" : v)}>
            <SelectTrigger className="w-[180px] h-8">
              <SelectValue placeholder="使用最新上传" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__latest__">使用最新上传</SelectItem>
              {quoteTemplates.map((t) => (
                <SelectItem key={t.name} value={t.name}>
                  {t.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <Button variant="outline" size="sm" onClick={handleSaveToArchive} disabled={saving || projectId == null}>
          {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
          <span className="ml-1.5">保存到档案</span>
        </Button>
        <Button variant="outline" size="sm" onClick={handleDraftQuote} disabled={generatingQuote || projectId == null}>
          {generatingQuote ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileSpreadsheet className="h-4 w-4" />}
          <span className="ml-1.5">生成报价单 (Excel)</span>
        </Button>
        <Button variant="outline" size="sm" onClick={handleExportPdf} disabled={generatingQuote || projectId == null}>
          {generatingQuote ? <Loader2 className="h-4 w-4 animate-spin" /> : <FileDown className="h-4 w-4" />}
          <span className="ml-1.5">导出 PDF</span>
        </Button>
        <Select
          value="__none__"
          onValueChange={(v) => {
            if (v === "feishu" || v === "yuque" || v === "tencent") void handlePushToCloud(v);
          }}
          disabled={pushToCloudLoading || projectId == null}
        >
          <SelectTrigger className="w-[140px] h-8">
            {pushToCloudLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <CloudUpload className="h-4 w-4 mr-1" />}
            <SelectValue placeholder="推送到云文档" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="__none__" disabled>
              推送到云文档
            </SelectItem>
            <SelectItem value="feishu">飞书文档</SelectItem>
            <SelectItem value="yuque">语雀</SelectItem>
            <SelectItem value="tencent">腾讯文档</SelectItem>
          </SelectContent>
        </Select>
        {projectId != null && <span className="text-xs text-muted-foreground ml-2">当前项目 #{projectId}</span>}
      </div>
    </div>
  );
}