/* AI 周报生成 */
const { useState } = React;
const Icon = window.LCYIcon;
const { Page, Intro, Field, Seg, GenBtn, ResultCard, BusyCard, Rich, LI, flash } = window;

const STYLES = [
  { id: "concise", label: "简洁" }, { id: "detailed", label: "详实" }, { id: "data", label: "数据导向" },
];
const STYLE_TEXT = { concise: "简洁凝练，每条一句话", detailed: "详实具体，含背景与结果", data: "突出数据与量化指标" };

function WeeklyApp() {
  const [items, setItems] = useState([]);
  const [val, setVal] = useState("");
  const [raw, setRaw] = useState("");
  const [style, setStyle] = useState("concise");
  const [busy, setBusy] = useState(false);
  const [report, setReport] = useState("");

  const add = () => { if (!val.trim()) return; setItems((a) => [...a, val.trim()]); setVal(""); };
  const del = (i) => setItems((a) => a.filter((_, k) => k !== i));

  const run = async () => {
    const source = [items.join("\n"), raw.trim()].filter(Boolean).join("\n");
    if (!source.trim()) { flash("先记几条这周做的事"); return; }
    setBusy(true); setReport("");
    try {
      const out = await window.aiComplete(`你是职场写作助手。请把下面这些零散的工作记录，整理成一份结构清晰、措辞专业的中文工作周报。
风格要求：${STYLE_TEXT[style]}。
请用这三个小标题组织：「本周完成」「进行中」「下周计划」，每项用项目符号；若信息不足可合理归类。直接输出周报正文，不要额外解释：

${source}`);
      setReport(out);
    } catch (e) { flash(window.failMsg(e)); } finally { setBusy(false); }
  };

  return (
    <Page icon="bar-chart-3" name="周报生成" sub="AI WEEKLY" col="split">
      <Intro eyebrow="AI 周报助手" title="流水账秒变专业周报" sub="把这周做的事随手记下来，AI 帮你整理成结构清晰、亮点突出的周报。" />
      <div className="card">
        <Field icon="list-plus" label="本周做了什么">
          <div className="seg" style={{ display: "flex", gap: 9, marginBottom: items.length ? 12 : 0 }}>
            <input className="in" placeholder="一条一条记，回车添加，如「修复了登录 bug」" value={val} onChange={(e) => setVal(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} style={{ flex: 1 }} />
            <button className="btn btn-ghost" onClick={add}><Icon name="plus" /></button>
          </div>
          {items.length > 0 && (
            <div style={{ marginTop: 4 }}>
              {items.map((it, i) => (
                <LI key={i} end={<button className="iconbtn" style={{ width: 28, height: 28, marginLeft: "auto" }} onClick={() => del(i)}><Icon name="x" /></button>}>{it}</LI>
              ))}
            </div>
          )}
        </Field>
        <Field icon="clipboard-list" label="或直接粘贴一段记录" opt="选填">
          <textarea className="in" placeholder="也可以把聊天记录 / 待办清单 / 备忘整段粘进来" value={raw} onChange={(e) => setRaw(e.target.value)} />
        </Field>
        <Field icon="sliders-horizontal" label="周报风格"><Seg options={STYLES} value={style} onChange={setStyle} /></Field>
        <GenBtn onClick={run} busy={busy} label="生成周报" />
      </div>

      {busy && <BusyCard label="正在整理你的周报…" />}
      {report && <ResultCard icon="file-check-2" title="本周周报" copy={report}><Rich>{report}</Rich></ResultCard>}
    </Page>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<WeeklyApp />);