// Books.jsx — list / create / archive / unarchive trip and daily books
const { useState } = React;

function BooksScreen({ books, transactions, accent, onCreate, onArchive, onUnarchive, onBack }) {
  const [createOpen, setCreateOpen] = useState(false);
  const sumOf = (id) => transactions.
  filter((t) => t.bookId === id && t.type !== "settle" && !t.pending).
  reduce((s, t) => s + t.amount, 0);

  return (
    <div className="screen books">
      <div className="sub-header">
        <button className="back" onClick={onBack}>‹</button>
        <div className="sub-title">帳本</div>
        <button className="sub-action" style={{ color: accent }} onClick={() => setCreateOpen(true)}>新增</button>
      </div>
      <div className="book-list">
        {books.map((b) =>
        <div key={b.id} className={"book-card" + (b.status === "archived" ? " archived" : "")}>
            <div className="book-card-top">
              <span className="book-card-dot" style={{ background: b.type === "trip" ? accent : "#1A1A1A" }} />
              <span className="book-card-name">{b.name}</span>
              <span className="book-card-tag">{b.status === "archived" ? "已封存" : b.type === "trip" ? "旅遊" : "日常"}</span>
            </div>
            {b.startedAt &&
          <div className="book-card-period num">{ymd(b.startedAt)} – {b.endedAt ? ymd(b.endedAt) : "進行中"}</div>
          }
            <div className="book-card-bot">
              <span className="book-card-l">合計</span>
              <span className="num book-card-v">NT$ {fmtMoney(sumOf(b.id))}</span>
            </div>
            {b.type === "trip" && b.status === "active" &&
          <button className="book-card-arch" onClick={() => {
            if (confirm(`封存「${b.name}」？\n\n封存後此帳本不會出現在歷史頁面的分頁，但帳目仍會顯示在「全部」中。結算請至結算頁面進行。`)) onArchive(b.id);
          }}>封存</button>
          }
            {b.status === "archived" &&
          <button className="book-card-arch" onClick={() => {
            if (confirm(`復原「${b.name}」？`)) onUnarchive(b.id);
          }}>復原帳本</button>
          }
          </div>
        )}
      </div>
      <Sheet open={createOpen} onClose={() => setCreateOpen(false)} title="新增旅遊帳本">
        <CreateBookForm accent={accent}
        onSubmit={(data) => { onCreate(data); setCreateOpen(false); }}
        onCancel={() => setCreateOpen(false)} />
      </Sheet>
    </div>);
}

function CreateBookForm({ accent, onSubmit, onCancel }) {
  const [name, setName] = useState("");
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [err, setErr] = useState("");
  function go() {
    if (!name.trim()) { setErr("帳本名稱不可空白"); return; }
    if (!start || !end) { setErr("選擇起訖日"); return; }
    if (start > end) { setErr("結束日需在開始日之後"); return; }
    onSubmit({
      id: "trip" + Date.now(), name: name.trim(), type: "trip", status: "active",
      startedAt: new Date(start).toISOString(), endedAt: new Date(end).toISOString()
    });
  }
  return (
    <div className="form">
      <label className="form-row">
        <span className="form-k">名稱</span>
        <input className="form-in"
        value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <label className="form-row">
        <span className="form-k">開始</span>
        <input type="date" className="form-in" value={start} onChange={(e) => setStart(e.target.value)} />
      </label>
      <label className="form-row">
        <span className="form-k">結束</span>
        <input type="date" className="form-in" value={end} onChange={(e) => setEnd(e.target.value)} />
      </label>
      {err && <div className="entry-error">{err}</div>}
      <div className="form-actions">
        <button className="ocr-btn" onClick={onCancel}>取消</button>
        <button className="ocr-btn solid" style={{ background: accent, borderColor: accent }} onClick={go}>建立</button>
      </div>
    </div>);
}

window.BooksScreen = BooksScreen;