/* backup.jsx — quick-add chooser, data management (export/import), last-saved badge */
const { useState: bS, useRef: bRef, useEffect: bEff } = React;

/* ---- Quick add chooser ---- */
function QuickAddChooser({ onPick, onClose }) {
  const items = [
    { key: "session", title: "记一次课", desc: "给某个学生记录一次 session", icon: <Icon.clock size={20} />, tone: "green" },
    { key: "payment", title: "记一笔收款", desc: "学生付款 / 中间人转账", icon: <Icon.wallet size={20} />, tone: "violet" },
  ];
  return (
    <Modal title="录入" subtitle="选择要记录的内容" onClose={onClose}>
      <div className="qa-list">
        {items.map((it) => (
          <button key={it.key} className="qa-item" onClick={() => onPick(it.key)}>
            <span className={"qa-ic tone-" + it.tone}>{it.icon}</span>
            <span className="qa-body">
              <strong>{it.title}</strong>
              <em>{it.desc}</em>
            </span>
            <Icon.chevR size={17} className="qa-arrow" />
          </button>
        ))}
      </div>
    </Modal>
  );
}

/* ---- Data management ---- */
function DataModal({ state, dispatch, onClose }) {
  const LP = window.LP;
  const fileRef = bRef(null);
  const [msg, setMsg] = bS(null); // {tone, text}
  const counts = {
    students: state.students.length,
    sessions: state.students.reduce((a, s) => a + (s.sessions || []).length, 0),
    payments: state.payments.length,
  };

  const onFile = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const data = LP.parseBackup(reader.result);
        const n = data.students.length, p = data.payments.length;
        if (confirm(`导入后将【覆盖】当前所有数据。\n\n备份包含：${n} 位学生、${p} 笔收款。\n\n确认导入？`)) {
          dispatch({ type: "replaceAll", data });
          setMsg({ tone: "green", text: `导入成功：${n} 位学生、${p} 笔收款` });
        }
      } catch (err) {
        setMsg({ tone: "red", text: "导入失败：" + err.message });
      }
      e.target.value = "";
    };
    reader.readAsText(file);
  };

  return (
    <Modal title="数据备份与导出" subtitle="数据保存在本浏览器，建议定期导出备份" onClose={onClose} wide>
      <div className="data-summary">
        <div><span className="mono">{counts.students}</span><em>学生</em></div>
        <div><span className="mono">{counts.sessions}</span><em>Sessions</em></div>
        <div><span className="mono">{counts.payments}</span><em>收款记录</em></div>
      </div>

      {msg && <div className={"data-msg tone-" + msg.tone}>{msg.text}</div>}

      <div className="data-section">
        <h4>备份 / 恢复</h4>
        <p className="data-hint">备份是一个 <code>.json</code> 文件，包含你的全部数据。换电脑或清缓存前先导出；之后用「导入」即可完整恢复。</p>
        <div className="data-actions">
          <Button variant="primary" icon={<Icon.arrowUpRight size={15} />} onClick={() => LP.exportBackup(state)}>导出完整备份</Button>
          <Button variant="secondary" icon={<Icon.arrowDownRight size={15} />} onClick={() => fileRef.current.click()}>导入备份恢复</Button>
          <input ref={fileRef} type="file" accept="application/json,.json" hidden onChange={onFile} />
        </div>
      </div>

      <div className="data-section">
        <h4>导出表格（Excel / CSV）</h4>
        <p className="data-hint">用 Excel、Numbers、Google Sheets 都能打开。仅用于查看/打印，<strong>不能</strong>再导回。</p>
        <div className="data-actions">
          <Button variant="secondary" size="sm" icon={<Icon.doc size={15} />} onClick={() => LP.exportStudentsCSV(state)}>学生汇总</Button>
          <Button variant="secondary" size="sm" icon={<Icon.doc size={15} />} onClick={() => LP.exportSessionsCSV(state)}>全部 Sessions</Button>
          <Button variant="secondary" size="sm" icon={<Icon.doc size={15} />} onClick={() => LP.exportPaymentsCSV(state)}>全部收款</Button>
        </div>
      </div>
    </Modal>
  );
}

/* ---- Last saved badge ---- */
function SavedBadge({ tick }) {
  const iso = window.LP.lastSavedAt();
  let text = "未保存";
  if (iso) {
    const d = new Date(iso);
    const diff = (Date.now() - d.getTime()) / 1000;
    if (diff < 8) text = "刚刚已保存";
    else if (diff < 60) text = `${Math.floor(diff)} 秒前保存`;
    else if (diff < 3600) text = `${Math.floor(diff / 60)} 分钟前保存`;
    else {
      const p = (n) => String(n).padStart(2, "0");
      text = `保存于 ${p(d.getHours())}:${p(d.getMinutes())}`;
    }
  }
  return (
    <span className="saved-badge" title="数据自动保存在本浏览器">
      <span className="saved-dot" /> {text}
    </span>
  );
}

Object.assign(window, { QuickAddChooser, DataModal, SavedBadge });