// 車両一覧画面
function ScreenVehicles({ data, onNavigate, branchFilter }) {
  const [filterType, setFilterType] = useState("");
  const [filterIns, setFilterIns] = useState("");
  const [filterStatus, setFilterStatus] = useState("");
  const [query, setQuery] = useState("");

  const driverMap = useMemo(() => Object.fromEntries(data.drivers.map(d => [d.no, d])), [data.drivers]);
  const branchMap = useMemo(() => Object.fromEntries(data.branches.map(b => [b.id, b])), [data.branches]);

  const rows = data.vehicles.filter(v => {
    if (branchFilter && v.branch !== branchFilter) return false;
    if (filterType && v.type !== filterType) return false;
    if (filterIns && v.insurance !== filterIns) return false;
    if (filterStatus && v.status !== filterStatus) return false;
    if (query) {
      const q = query.toLowerCase();
      const driver = driverMap[v.driver];
      const driverName = driver?.name || "";
      if (!v.reg.toLowerCase().includes(q) && !driverName.toLowerCase().includes(q) && !(v.driver || "").includes(q)) return false;
    }
    return true;
  });

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {/* フィルタバー */}
      <div style={{
        background: "#fff", border: "1px solid var(--border)", borderRadius: 8,
        padding: "12px 16px", display: "flex", flexWrap: "wrap", gap: 10, alignItems: "center",
      }}>
        <SearchInput value={query} onChange={setQuery} placeholder="登録番号・社員名・社員番号で検索" style={{ width: 280 }} />
        <Select prefix="車種" value={filterType} onChange={setFilterType} placeholder="すべて"
          options={[
            { value: "普通車", label: "普通車" }, { value: "小型", label: "小型" },
            { value: "軽バン", label: "軽バン" }, { value: "軽トラ", label: "軽トラ" },
            { value: "2t車", label: "2t車" }, { value: "特殊車", label: "特殊車" },
          ]} />
        <Select prefix="保険" value={filterIns} onChange={setFilterIns} placeholder="すべて"
          options={[
            { value: "あいおい", label: "あいおい" }, { value: "共済", label: "共済" }, { value: "なし", label: "なし" },
          ]} />
        <Select prefix="状態" value={filterStatus} onChange={setFilterStatus} placeholder="すべて"
          options={[
            { value: "有効", label: "有効" }, { value: "期限間近", label: "期限間近" },
            { value: "期限切れ", label: "期限切れ" }, { value: "未紐付", label: "未紐付" }, { value: "停止", label: "停止" },
          ]} />
        <div style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
          <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{fmtN(rows.length)} / {fmtN(data.vehicles.length)} 件</span>
          <Button icon={<Icon.download />}>CSV</Button>
          <Button variant="primary" icon={<Icon.plus />}>新規追加</Button>
        </div>
      </div>

      {/* テーブル */}
      <div>
        <DataTable
          onRowClick={(r) => onNavigate("vehicle-detail", r.reg)}
          columns={[
            { title: "登録番号", render: r => (
              <span style={{ fontFamily: "var(--font-num)", fontWeight: 600 }}>{r.reg}</span>
            ), minWidth: 150 },
            { title: "拠店", render: r => branchMap[r.branch]?.name || "—", width: 84 },
            { title: "使用者", render: r => driverMap[r.driver]?.name || <span style={{ color: "var(--ink-3)" }}>未割当</span>, minWidth: 100 },
            { title: "社員番号", render: r => r.driver || "—", numeric: true, width: 80 },
            { title: "車種", key: "type", width: 74 },
            { title: "車名", render: r => <span style={{ color: "var(--ink-2)" }}>{r.model}</span>, minWidth: 180 },
            { title: "年式", key: "year", width: 110 },
            { title: "保険", render: r => <Chip kind={r.insurance === "あいおい" ? "info" : r.insurance === "共済" ? "muted" : "default"}>{r.insurance}</Chip>, width: 90 },
            { title: "Gカード", render: r => r.gas ? <span style={{ fontFamily: "var(--font-num)", fontSize: 11.5, color: "var(--ink-2)" }}>{r.gas}</span> : <Chip kind="warn">未紐付</Chip>, minWidth: 170 },
            { title: "ETC", render: r => r.etc ? <span style={{ fontFamily: "var(--font-num)", fontSize: 11.5, color: "var(--ink-2)" }}>{r.etc}</span> : <Chip kind="warn">未紐付</Chip>, minWidth: 150 },
            { title: "ステータス", render: r => <StatusChip status={r.status} />, width: 96 },
            { title: "", render: () => <Icon.chevron />, width: 24, align: "right" },
          ]}
          rows={rows}
        />
      </div>

      {/* ページネーション風 */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 4px" }}>
        <span style={{ fontSize: 12, color: "var(--ink-3)" }}>1 - {rows.length} 件を表示</span>
        <div style={{ display: "flex", gap: 4 }}>
          <Button variant="ghost" disabled>‹ 前へ</Button>
          <Button variant="default" style={{ minWidth: 30, justifyContent: "center" }}>1</Button>
          <Button variant="ghost">2</Button>
          <Button variant="ghost">3</Button>
          <Button variant="ghost">次へ ›</Button>
        </div>
      </div>
    </div>
  );
}

window.ScreenVehicles = ScreenVehicles;