// 経費ダッシュボード (Phase 2 モック)
function ScreenExpenses({ data }) {
  const [month, setMonth] = useState("2026-04");

  const current = data.expenseMonths.find(m => m.ym === month) || data.expenseMonths[data.expenseMonths.length - 1];
  const prevIdx = data.expenseMonths.findIndex(m => m.ym === month) - 1;
  const prev = prevIdx >= 0 ? data.expenseMonths[prevIdx] : null;
  const deltaPct = prev ? (((current.total - prev.total) / prev.total) * 100).toFixed(1) : "0.0";

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* 注意バー */}
      <div style={{
        background: "#FFF6DA", border: "1px solid #F4DC97", borderRadius: 8,
        padding: "10px 14px", display: "flex", alignItems: "center", gap: 10,
        color: "#8A6100", fontSize: 12.5,
      }}>
        <Icon.warn />
        <span><strong>Phase 2 モック画面：</strong>カード会社からの利用明細がまだ未取得のため、表示数値はすべてダミーです。</span>
        <Button variant="ghost" icon={<Icon.upload />} style={{ marginLeft: "auto", color: "#8A6100" }}>明細をアップロード</Button>
      </div>

      {/* ヘッダ */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <Select value={month} onChange={setMonth} placeholder=""
            options={data.expenseMonths.map(m => ({ value: m.ym, label: m.ym + " (" + m.ym.slice(5) + "月分)" }))}
          />
          <span style={{ fontSize: 12, color: "var(--ink-3)" }}>4/1 — 4/30 集計</span>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button icon={<Icon.download />}>レポートPDF</Button>
          <Button icon={<Icon.download />}>明細CSV</Button>
        </div>
      </div>

      {/* KPI */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KpiCard label="月間総経費" value={fmtJPY(current.total)} unit=""
          sub={`前月 ${prev ? fmtJPY(prev.total) : "—"}`}
          delta={`${Number(deltaPct) > 0 ? "+" : ""}${deltaPct}%`}
          deltaKind={Number(deltaPct) > 5 ? "warn" : "muted"} />
        <KpiCard label="ガソリン代" value={fmtJPY(current.gas)} sub="4系統合算" />
        <KpiCard label="ETC代" value={fmtJPY(current.etc)} sub="NEXCO西＋三井住友" />
        <KpiCard label="異常値検知" value="5" unit="件" sub="前月比+30%以上" delta="要確認" deltaKind="warn" />
      </div>

      {/* 拠店別積み上げ棒グラフ */}
      <SectionCard title="拠店別 経費（ガソリン / ETC）">
        <ColumnChart
          data={data.branchExpense.map(b => ({ label: b.branch, values: { gas: b.gas, etc: b.etc } }))}
          stacks={[
            { key: "gas", label: "ガソリン", color: "#2563EB" },
            { key: "etc", label: "ETC", color: "#7CA8F1" },
          ]}
          height={220}
          formatY={(v) => `${(v / 10000).toFixed(0)}万`}
        />
      </SectionCard>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {/* 異常値 */}
        <SectionCard title="異常値検知 (前月比 +30% 以上)" padding={false}>
          <DataTable
            columns={[
              { title: "使用者", key: "name", minWidth: 100 },
              { title: "社員番号", render: r => r.empNo, numeric: true, width: 80 },
              { title: "車両", render: r => <span style={{ fontFamily: "var(--font-num)", fontSize: 11.5 }}>{r.vehicle}</span>, minWidth: 130 },
              { title: "前月", render: r => fmtJPY(r.prev), numeric: true, align: "right", width: 90 },
              { title: "当月", render: r => <span style={{ fontWeight: 600 }}>{fmtJPY(r.curr)}</span>, numeric: true, align: "right", width: 90 },
              { title: "増減", render: r => <Chip kind="warn">+{r.diff}%</Chip>, width: 80, align: "right" },
            ]}
            rows={data.expenseAnomalies}
            denseRow={36}
          />
        </SectionCard>

        {/* ランキング */}
        <SectionCard title="車両別 経費ランキング Top 10" padding={false}>
          <DataTable
            columns={[
              { title: "#", render: r => <span style={{ fontFamily: "var(--font-num)", fontWeight: 700, color: r.rank <= 3 ? "var(--accent)" : "var(--ink-2)" }}>{r.rank}</span>, width: 30, align: "center" },
              { title: "車両", render: r => <span style={{ fontFamily: "var(--font-num)", fontSize: 11.5, fontWeight: 600 }}>{r.vehicle}</span>, minWidth: 130 },
              { title: "ドライバー", key: "driver", minWidth: 110 },
              { title: "拠店", key: "branch", width: 80 },
              { title: "合計", render: r => <span style={{ fontWeight: 600 }}>{fmtJPY(r.total)}</span>, numeric: true, align: "right", width: 90 },
            ]}
            rows={data.expenseRanking}
            denseRow={34}
          />
        </SectionCard>
      </div>
    </div>
  );
}

window.ScreenExpenses = ScreenExpenses;