import { useState } from "react";
import { FileText, Play } from "lucide-react";
import { Button, Panel } from "../ui";

// 报告生成 —— 只做启动器：输入主题 → 提交 → 自动跳「运行 · 观测」实时看。
//
// 这里曾经自己维护一整套：SSE 订阅、token 流、执行轨迹、导出按钮、PDF 打印，
// 页面上还挂着「执行轨迹」和「报告正文」两个面板 —— 和运行页完全重复。
// 而且那套 state 全是组件本地 useState：切个页面就灰飞烟灭，报告明明在后端
// 好好地跑完了，用户却永远找不回它。
// 现在轨迹/正文/导出统一由运行页负责（那份是持久的、能复盘、能导出）。
export function ReportView({ onRunReport, running }: { onRunReport: (topic: string, kb?: string) => void; running: boolean }) {
  const [topic, setTopic] = useState("");
  const [kb, setKb] = useState("");

  const submit = () => {
    if (!topic.trim() || running) return;
    onRunReport(topic.trim(), kb.trim() || undefined);
  };

  return (
    <div className="h-full overflow-auto p-6">
      <div className="mx-auto max-w-2xl">
        <h1 className="text-lg font-semibold text-slate-100">报告生成</h1>
        <p className="mt-1 text-xs text-slate-500">
          规划大纲 → 各章并行（知识库检索 + LLM 撰写）→ 汇聚 → 渲染真实 Word(.docx)。依赖已配置对话模型；挂知识库则引用其资料。
        </p>

        <Panel title="新建报告" icon={FileText} className="mt-5">
          <div className="space-y-4 p-1">
            <div>
              <label className="mb-1.5 block text-xs text-slate-400">报告主题</label>
              <input
                value={topic}
                onChange={(e) => setTopic(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && submit()}
                placeholder="如：2026 年国产大模型产业现状与趋势分析"
                className="w-full rounded-md border border-line bg-ink-850 px-3 py-2 text-sm text-slate-100 outline-none placeholder:text-slate-600 focus:border-brand/50"
              />
            </div>
            <div>
              <label className="mb-1.5 block text-xs text-slate-400">知识库（可选）</label>
              <input
                value={kb}
                onChange={(e) => setKb(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && submit()}
                placeholder="如 docs，留空则不挂检索"
                className="w-full rounded-md border border-line bg-ink-850 px-3 py-2 text-sm text-slate-100 outline-none placeholder:text-slate-600 focus:border-brand/50"
              />
            </div>
            <div className="flex items-center gap-3 pt-1">
              <Button variant="primary" icon={Play} onClick={submit} disabled={running || !topic.trim()}>
                {running ? "生成中…" : "生成报告"}
              </Button>
              <span className="text-[11px] text-slate-600">提交后自动跳「运行」，在那里看进度、复盘和导出 Word。</span>
            </div>
          </div>
        </Panel>
      </div>
    </div>
  );
}
