/* ============================================================
   Screen: Dashboard — 預かり金可視化
   ============================================================ */
function Dashboard({ ctx }) {
  const { fin, tours, db, go, openSettle, manager, period, setPeriod, periods } = ctx;
  const periodLabel = periods[period].label;
  const bizF = periods[period].confirmed / periods.month.confirmed; // 事業区分別売上の期間スケール
  const activeTours = tours.filter((t) => t.status === "open" || t.status === "pending");
  const ecPending = (ctx.consign || []).filter((c) => c.status !== "settled");
  const pendingCount = tours.filter((t) => t.status === "pending").length;

  const bank = fin.bankBalance;
  const heldPct = (fin.held / bank) * 100;
  const payPct = (fin.clientPayable / bank) * 100;
  const ownPct = (fin.ownFunds / bank) * 100;

  return (
    <div className="page">
      {/* greeting */}
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-end", marginBottom: 22 }}>
        <div className="row gap16">
          <div style={{ width: 64, height: 64, borderRadius: 16, background: "var(--brand-wash)", display: "grid", placeItems: "center", flex: "none", overflow: "hidden" }}>
            <Mascot size={62} pose="front" />
          </div>
          <div>
            <h1 className="page-title">おかえりなさい、{manager.name.split(" ")[0]}さん</h1>
            <p className="page-sub">{periods[period].sub} — HIGHFIVE株式会社</p>
          </div>
        </div>
        <div className="row gap8">
          <div className="seg">
            {Object.values(periods).map((p) => (
              <button key={p.key} className={period === p.key ? "on" : ""} onClick={() => setPeriod(p.key)}>{p.label}</button>
            ))}
          </div>
        </div>
      </div>

      {/* pending settlement callout */}
      {pendingCount > 0 && (
        <div className="card" style={{ borderColor: "var(--brand-soft)", background: "linear-gradient(100deg,var(--brand-wash),#fff 60%)", padding: "14px 18px", marginBottom: 20, display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--brand)", display: "grid", placeItems: "center", flex: "none", color: "#fff" }}>
            <Icon name="alert" size={19} />
          </div>
          <div style={{ flex: 1 }}>
            <b style={{ fontSize: 13.5 }}>精算待ちのツアーが {pendingCount} 件あります</b>
            <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>ツアー終了済み。精算を確定すると預かり金から当社の取り分が確定売上に振り替わります。</div>
          </div>
          <button className="btn primary sm" onClick={() => go("tours")}>精算待ちを確認<Icon name="arrowRight" size={15} /></button>
        </div>
      )}

      {/* hero KPIs */}
      <div className="grid cols-3" style={{ gap: 16 }}>
        <KPI label={`総入金額（${periodLabel}）`} icon="wallet" accent="var(--total-ink)" value={fin.totalReceived} size={27}
          sub={<span>クライアント入金＋自社売上の合計</span>} />
        <div className="kpi" style={{ background: "var(--deposit-soft)", borderColor: "#D6DBF0" }}>
          <span className="kbar-l" style={{ background: "var(--deposit)" }} />
          <div className="klabel" style={{ color: "var(--deposit-ink)" }}>
            <Icon name="lock" size={15} />うち預かり金
          </div>
          <div className="kval num" style={{ color: "var(--deposit-ink)", fontSize: 27 }}>
            <span className="kyen">¥</span>{Math.round(fin.held).toLocaleString("ja-JP")}
          </div>
          <div className="ksub" style={{ color: "var(--deposit-ink)", opacity: .9, fontSize: 11 }}>
            ツアー <b>{db.yen(fin.tourHeld)}</b>　・　EC委託(月次) <b>{db.yen(fin.ecHeld)}</b>
          </div>
        </div>
        <KPI label="自社確定売上（取り分）" icon="checkCircle" accent="var(--revenue)" value={fin.confirmed} size={27}
          sub={<span style={{ color: "var(--revenue-ink)" }}>手数料・倉庫料・発送代行・卸利益</span>} subColor="var(--revenue-ink)" />
      </div>

      {/* relationship bar */}
      <div className="card" style={{ marginTop: 16 }}>
        <div className="card-head" style={{ justifyContent: "space-between" }}>
          <div className="row gap10">
            <Icon name="scale" size={18} style={{ color: "var(--brand)" }} />
            <div>
              <h3>銀行口座残高の「中身」</h3>
              <div className="sub">口座にある現金 ＝ 預かり金 ＋ クライアント未払 ＋ 自社資金</div>
            </div>
          </div>
          <div className="col" style={{ alignItems: "flex-end", gap: 2 }}>
            <span className="muted" style={{ fontSize: 11, whiteSpace: "nowrap" }}>三井住友銀行 ●●●1234</span>
            <Money v={bank} size={21} />
          </div>
        </div>
        <div className="card-pad">
          <div className="relbar">
            <div className="seg-b" style={{ flex: fin.held, background: "var(--deposit)" }}>
              {heldPct > 13 && <span>預かり金 {heldPct.toFixed(0)}%</span>}
            </div>
            {fin.clientPayable > 0 && (
              <div className="seg-b" style={{ flex: fin.clientPayable, background: "#B0492C" }}>
                {payPct > 9 && <span>未払 {payPct.toFixed(0)}%</span>}
              </div>
            )}
            <div className="seg-b" style={{ flex: fin.ownFunds, background: "var(--revenue)" }}>
              {ownPct > 13 && <span>自社資金 {ownPct.toFixed(0)}%</span>}
            </div>
          </div>
          <div className="row" style={{ gap: 28, marginTop: 16, flexWrap: "wrap" }}>
            <Legend sq="var(--deposit)" label="預かり金（返金予定）" v={fin.held} note="未精算ツアーの預かり" />
            {fin.clientPayable > 0 && <Legend sq="#B0492C" label="クライアント未払（精算済）" v={fin.clientPayable} note="支払実行待ち" />}
            <Legend sq="var(--revenue)" label="自社資金" v={fin.ownFunds} note="確定売上に裏付け" />
          </div>
        </div>
      </div>

      {/* tours pending + monthly close */}
      <div className="grid ratio-main" style={{ gap: 16, marginTop: 16 }}>
        {/* tours */}
        <div className="card">
          <div className="card-head" style={{ justifyContent: "space-between" }}>
            <h3>預かり金の発生源</h3>
            <button className="btn ghost sm" onClick={() => go("tours")}>すべて表示<Icon name="chevRight" size={14} /></button>
          </div>
          <div>
            {activeTours.map((t, i) => {
              const c = db.clientById(t.clientId);
              return (
                <div key={t.id} className="row" style={{ gap: 14, padding: "15px 20px", borderBottom: i < activeTours.length - 1 ? "1px solid var(--border)" : "none" }}>
                  <Avatar name={c.name} color={c.color} size={38} square />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="row gap8">
                      <b style={{ fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.name}</b>
                      <StatusBadge status={t.status} />
                    </div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>{c.name} ・ 手数料 {t.commission}% ・ {t.venuesDone}/{t.venuesTotal} 公演</div>
                  </div>
                  <div className="col" style={{ alignItems: "flex-end", gap: 3 }}>
                    <span className="muted" style={{ fontSize: 10.5 }}>預かり金残高</span>
                    <Money v={t.held} size={16} color="var(--deposit-ink)" />
                  </div>
                  {t.status === "pending"
                    ? <button className="btn primary sm" onClick={() => openSettle(t)}>精算する</button>
                    : <button className="btn sm" onClick={() => go("tours")} style={{ minWidth: 78 }}>詳細</button>}
                </div>
              );
            })}
            {ecPending.map((ec, i) => {
              const c = db.clientById(ec.clientId);
              return (
                <div key={ec.id} className="row" style={{ gap: 14, padding: "15px 20px", borderTop: "1px solid var(--border)" }}>
                  <Avatar name={c.name} color={c.color} size={38} square />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="row gap8">
                      <b style={{ fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.name}</b>
                      <span className="badge dep" style={{ height: 21 }}>EC委託・月次</span>
                    </div>
                    <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>{ec.channel} ・ 手数料 {ec.commission}% ・ {ec.month} 締め分</div>
                  </div>
                  <div className="col" style={{ alignItems: "flex-end", gap: 3 }}>
                    <span className="muted" style={{ fontSize: 10.5 }}>預かり金残高</span>
                    <Money v={ec.held} size={16} color="var(--deposit-ink)" />
                  </div>
                  <button className="btn sm" onClick={() => go("sales")} style={{ minWidth: 78 }}>月次精算</button>
                </div>
              );
            })}
          </div>
        </div>

        {/* monthly close */}
        <div className="card">
          <div className="card-head"><h3>月次締め（ツアー外物販）</h3></div>
          <div className="card-pad">
            <div className="muted" style={{ fontSize: 12, marginBottom: 14 }}>EC・倉庫業・単発物販は月ごとに締めます。</div>
            <CloseRow month="2026年5月" status="done" v={4218600} />
            <div style={{ height: 12 }} />
            <CloseRow month="2026年6月" status="open" v={1352400} prog={42} />
            <button className="btn lg primary" style={{ width: "100%", marginTop: 18 }} onClick={() => go("sales")}>
              <Icon name="layers" size={16} />締め処理へ
            </button>
          </div>
        </div>
      </div>

      {/* trend + breakdown */}
      <div className="grid ratio-main" style={{ gap: 16, marginTop: 16 }}>
        <div className="card">
          <div className="card-head" style={{ justifyContent: "space-between" }}>
            <div className="row gap10"><Icon name="trending" size={17} style={{ color: "var(--brand)" }} /><h3>推移（直近6ヶ月）</h3></div>
            <div className="row gap16">
              <span className="relseg-label"><span className="sq" style={{ background: "var(--deposit)" }} />預かり金</span>
              <span className="relseg-label"><span className="sq" style={{ background: "var(--revenue)" }} />確定売上</span>
            </div>
          </div>
          <div className="card-pad"><TrendChart data={db.trend} /></div>
        </div>

        <div className="card">
          <div className="card-head"><h3>事業区分別 売上（{periodLabel}）</h3></div>
          <div className="card-pad col gap12">
            <BizBar biz="tour" v={3200000 * bizF} max={3200000 * bizF} note="※預かり分を含む総額" />
            <BizBar biz="ec" v={1180000 * bizF} max={3200000 * bizF} />
            <BizBar biz="warehouse" v={780000 * bizF} max={3200000 * bizF} />
            <BizBar biz="single" v={920000 * bizF} max={3200000 * bizF} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Legend({ sq, label, v, note }) {
  return (
    <div className="row gap10">
      <span style={{ width: 12, height: 12, borderRadius: 3, background: sq, flex: "none", marginTop: 3 }} />
      <div>
        <div style={{ fontSize: 11.5, color: "var(--ink-3)", fontWeight: 600 }}>{label}</div>
        <Money v={v} size={16} />
        {note && <div className="muted" style={{ fontSize: 10.5, marginTop: 1 }}>{note}</div>}
      </div>
    </div>
  );
}

function CloseRow({ month, status, v, prog }) {
  return (
    <div>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 7 }}>
        <div className="row gap8"><b style={{ fontSize: 13, whiteSpace: "nowrap" }}>{month}</b><StatusBadge status={status === "done" ? "settled" : "open"} dot={false} /></div>
        <Money v={v} size={14} />
      </div>
      {status === "done"
        ? <div className="prog"><i style={{ width: "100%", background: "var(--revenue)" }} /></div>
        : <div className="prog"><i style={{ width: prog + "%", background: "var(--brand)" }} /></div>}
      <div className="muted" style={{ fontSize: 10.5, marginTop: 5 }}>{status === "done" ? "締め済 — 請求書発行済" : `進行中 — 売上記録 ${prog}% 取込済`}</div>
    </div>
  );
}

function BizBar({ biz, v, max, note }) {
  const b = window.DB.businessTypes[biz];
  return (
    <div>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
        <span className="relseg-label"><span className="sq" style={{ background: b.color }} />{b.label}</span>
        <Money v={v} size={13} />
      </div>
      <div className="prog"><i style={{ width: (v / max) * 100 + "%", background: b.color }} /></div>
      {note && <div className="muted" style={{ fontSize: 10, marginTop: 4 }}>{note}</div>}
    </div>
  );
}

window.Dashboard = Dashboard;