// 車両 個別画面
function ScreenVehicleDetail({ data, onNavigate, vehicleId }) {
  const v = data.vehicles.find(x => x.reg === vehicleId) || data.vehicles[0];
  const driver = data.drivers.find(d => d.no === v.driver);
  const branch = data.branches.find(b => b.id === v.branch);
  const gasCard = data.gasCards.find(c => c.no === v.gas);
  const etcCard = data.etcCards.find(c => c.no === v.etc);

  const [tab, setTab] = useState("repair");

  const tabs = [
    { id: "repair", label: "修理履歴", count: 4 },
    { id: "card", label: "カード変更履歴", count: 3 },
    { id: "driver", label: "担当者変更履歴", count: 2 },
  ];

  const repairHistory = [
    { date: "2026-03-12", type: "車検", shop: "オートサービス京都", amount: 86400, note: "車検整備一式・タイヤ交換" },
    { date: "2025-11-04", type: "修理", shop: "提携工場 京都南", amount: 28600, note: "オイル交換・バッテリー交換" },
    { date: "2025-07-22", type: "事故修理", shop: "あいおい指定工場", amount: 142000, note: "右リアバンパー軽微損傷（先方過失）" },
    { date: "2025-05-10", type: "点検", shop: "ディーラー", amount: 12100, note: "12ヶ月法定点検" },
  ];
  const cardHistory = [
    { date: "2024-09-01", action: "発行", target: "ガソリン宇佐美", no: v.gas || "—", by: "車両管理" },
    { date: "2024-09-01", action: "発行", target: "ETC三井住友", no: v.etc || "—", by: "車両管理" },
    { date: "2023-08-31", action: "停止", target: "ガソリン宇佐美 (旧)", no: "508196-01052-XXXX-1", by: "車両管理" },
  ];
  const driverHistory = [
    { date: "2024-09-01", action: "割当", driver: driver?.name || "—", note: "新規車両配備" },
    { date: "2023-04-01", action: "前任者から引継ぎ", driver: "前田 健一", note: "退職処理" },
  ];

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      {/* パンくず + アクション */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Button variant="ghost" icon={<Icon.back />} onClick={() => onNavigate("vehicles")}>車両一覧</Button>
          <span style={{ color: "var(--ink-3)" }}>/</span>
          <span style={{ fontSize: 13, color: "var(--ink-1)", fontFamily: "var(--font-num)", fontWeight: 600 }}>{v.reg}</span>
          <StatusChip status={v.status} />
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <Button>編集</Button>
          <Button variant="danger">退車処理</Button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 16, alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {/* 基本情報 */}
          <SectionCard title="基本情報">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "16px 28px" }}>
              <Field label="登録番号" value={v.reg} mono />
              <Field label="車名" value={v.model} />
              <Field label="車種" value={v.type} />
              <Field label="年式" value={v.year} />
              <Field label="型式" value={v.model.includes("プロボックス") ? "DBE-NCP160V" : v.model.includes("クリッパー") ? "EBD-DR17V" : v.model.includes("エブリイ") ? "HBD-DA17V" : "—"} mono />
              <Field label="車台番号" value={v.chassis} mono />
              <Field label="購入年月日" value={v.purchase} mono />
              <Field label="拠店" value={branch?.name} />
              <Field label="保険会社" value={v.insurance} />
            </div>
          </SectionCard>

          {/* 紐付け情報 3カラム */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
            {/* 担当ドライバー */}
            <SectionCard title="担当ドライバー" action={<Button variant="ghost" style={{ height: 24, padding: "0 8px", fontSize: 11 }}>変更</Button>}>
              {driver ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: "50%",
                      background: "linear-gradient(135deg, #E8EEF8, #D5DFEE)",
                      display: "flex", alignItems: "center", justifyContent: "center",
                      color: "#3D5478", fontSize: 14, fontWeight: 700,
                      flexShrink: 0,
                    }}>
                      {driver.name.charAt(0)}
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
                      <span style={{ fontSize: 14, fontWeight: 600, color: "var(--ink-1)" }}>{driver.name}</span>
                      <span style={{ fontSize: 11.5, color: "var(--ink-3)", fontFamily: "var(--font-num)" }}>社員番号 {driver.no}</span>
                    </div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "var(--ink-2)", paddingTop: 10, borderTop: "1px dashed var(--border)" }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>拠店</span><span>{branch?.name}</span></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>課</span><span>{driver.dept}</span></div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--ink-3)" }}>在籍</span><Chip kind="ok">{driver.status}</Chip></div>
                  </div>
                </div>
              ) : (
                <div style={{ padding: 14, textAlign: "center" }}>
                  <Chip kind="warn"><Icon.warn /> 担当者 未割当</Chip>
                  <Button variant="primary" style={{ marginTop: 12, width: "100%", justifyContent: "center" }} icon={<Icon.plus />}>担当者を割当</Button>
                </div>
              )}
            </SectionCard>

            {/* ガソリンカード */}
            <SectionCard title="ガソリンカード" action={<Button variant="ghost" style={{ height: 24, padding: "0 8px", fontSize: 11 }}>差替え</Button>}>
              {gasCard ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Chip kind="info">{gasCard.kind}</Chip>
                  <div style={{
                    background: "linear-gradient(135deg, #1A3661 0%, #2C508B 100%)",
                    color: "#fff", borderRadius: 6, padding: "12px 14px",
                    display: "flex", flexDirection: "column", gap: 6,
                  }}>
                    <span style={{ fontSize: 10, opacity: 0.7, letterSpacing: "0.1em" }}>CARD NO.</span>
                    <span style={{ fontFamily: "var(--font-num)", fontSize: 14, letterSpacing: "0.04em", fontWeight: 600 }}>{gasCard.no}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}>
                    <span style={{ color: "var(--ink-3)" }}>有効期限</span>
                    <span style={{ fontFamily: "var(--font-num)", color: "var(--ink-1)", fontWeight: 600 }}>{gasCard.expiry}</span>
                  </div>
                  <StatusChip status={gasCard.status} />
                </div>
              ) : <div style={{ padding: 14, textAlign: "center" }}><Chip kind="warn">未紐付</Chip></div>}
            </SectionCard>

            {/* ETCカード */}
            <SectionCard title="ETCカード" action={<Button variant="ghost" style={{ height: 24, padding: "0 8px", fontSize: 11 }}>差替え</Button>}>
              {etcCard ? (
                <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                  <Chip kind="info">{etcCard.kind}</Chip>
                  <div style={{
                    background: "linear-gradient(135deg, #553C2A 0%, #7A5B40 100%)",
                    color: "#fff", borderRadius: 6, padding: "12px 14px",
                    display: "flex", flexDirection: "column", gap: 6,
                  }}>
                    <span style={{ fontSize: 10, opacity: 0.7, letterSpacing: "0.1em" }}>ETC NO.</span>
                    <span style={{ fontFamily: "var(--font-num)", fontSize: 13, letterSpacing: "0.02em", fontWeight: 600 }}>{etcCard.no}</span>
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}>
                    <span style={{ color: "var(--ink-3)" }}>有効期限</span>
                    <span style={{ fontFamily: "var(--font-num)", color: "var(--ink-1)", fontWeight: 600 }}>{etcCard.expiry}</span>
                  </div>
                  <StatusChip status={etcCard.status} />
                </div>
              ) : <div style={{ padding: 14, textAlign: "center" }}><Chip kind="warn">未紐付</Chip></div>}
            </SectionCard>
          </div>

          {/* 履歴タブ */}
          <SectionCard title="履歴" padding={false}>
            <div style={{ display: "flex", borderBottom: "1px solid var(--border-soft)", padding: "0 6px" }}>
              {tabs.map(t => (
                <button key={t.id} onClick={() => setTab(t.id)} style={{
                  padding: "12px 16px", fontSize: 12.5, fontWeight: 600,
                  background: "transparent", border: "none", cursor: "pointer",
                  color: tab === t.id ? "var(--accent)" : "var(--ink-2)",
                  borderBottom: tab === t.id ? "2px solid var(--accent)" : "2px solid transparent",
                  marginBottom: -1, fontFamily: "inherit",
                  display: "inline-flex", alignItems: "center", gap: 6,
                }}>
                  {t.label}
                  <span style={{ fontSize: 11, color: "var(--ink-3)", fontFamily: "var(--font-num)" }}>{t.count}</span>
                </button>
              ))}
            </div>
            <div style={{ padding: 0 }}>
              {tab === "repair" && (
                <DataTable
                  columns={[
                    { title: "日付", key: "date", numeric: true, width: 100 },
                    { title: "区分", render: r => <Chip kind={r.type === "事故修理" ? "danger" : r.type === "車検" ? "info" : "default"}>{r.type}</Chip>, width: 90 },
                    { title: "工場", key: "shop", minWidth: 160 },
                    { title: "備考", key: "note", wrap: true },
                    { title: "金額", numeric: true, align: "right", render: r => fmtJPY(r.amount), width: 100 },
                  ]}
                  rows={repairHistory}
                  denseRow={36}
                />
              )}
              {tab === "card" && (
                <DataTable
                  columns={[
                    { title: "日付", key: "date", numeric: true, width: 100 },
                    { title: "操作", render: r => <Chip kind={r.action === "停止" ? "danger" : "info"}>{r.action}</Chip>, width: 80 },
                    { title: "対象", key: "target", minWidth: 160 },
                    { title: "番号", render: r => <span style={{ fontFamily: "var(--font-num)" }}>{r.no}</span>, minWidth: 200 },
                    { title: "実行者", key: "by", width: 100 },
                  ]}
                  rows={cardHistory}
                  denseRow={36}
                />
              )}
              {tab === "driver" && (
                <DataTable
                  columns={[
                    { title: "日付", key: "date", numeric: true, width: 100 },
                    { title: "操作", render: r => <Chip kind="info">{r.action}</Chip>, width: 140 },
                    { title: "対象者", key: "driver", minWidth: 140 },
                    { title: "備考", key: "note", wrap: true },
                  ]}
                  rows={driverHistory}
                  denseRow={36}
                />
              )}
            </div>
          </SectionCard>
        </div>

        {/* 右側ペイン: Phase 2 用 */}
        <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "sticky", top: 0 }}>
          <SectionCard title="今月の経費" action={<Chip kind="muted">Phase 2 モック</Chip>}>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--ink-3)" }}>4月の使用額</div>
                <div style={{ fontSize: 28, fontWeight: 700, color: "var(--ink-1)", fontFamily: "var(--font-num)", letterSpacing: "-0.01em" }}>{fmtJPY(48900)}</div>
                <div style={{ display: "flex", gap: 6, marginTop: 4 }}>
                  <Chip kind="warn">前月比 +12.4%</Chip>
                </div>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, paddingTop: 10, borderTop: "1px dashed var(--border)" }}>
                <span style={{ color: "var(--ink-3)" }}>ガソリン</span>
                <span style={{ fontFamily: "var(--font-num)", fontWeight: 600 }}>{fmtJPY(33900)}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12 }}>
                <span style={{ color: "var(--ink-3)" }}>ETC</span>
                <span style={{ fontFamily: "var(--font-num)", fontWeight: 600 }}>{fmtJPY(15000)}</span>
              </div>
            </div>
          </SectionCard>

          <SectionCard title="過去6ヶ月の推移">
            <ColumnChart
              data={[
                { label: "11", values: { v: 32100 } },
                { label: "12", values: { v: 38200 } },
                { label: "1", values: { v: 35400 } },
                { label: "2", values: { v: 41200 } },
                { label: "3", values: { v: 43500 } },
                { label: "4", values: { v: 48900 } },
              ]}
              stacks={[{ key: "v", label: "経費", color: "#2563EB" }]}
              height={110}
              formatY={(v) => `${(v / 1000).toFixed(0)}k`}
            />
          </SectionCard>

          <SectionCard title="この車両のメモ">
            <p style={{ fontSize: 12, color: "var(--ink-2)", margin: 0, lineHeight: 1.6 }}>
              タイヤ交換目安：2026年10月頃。<br />
              定期点検時に右リアバンパーの再確認依頼済み。
            </p>
          </SectionCard>
        </div>
      </div>
    </div>
  );
}

window.ScreenVehicleDetail = ScreenVehicleDetail;