// マルロウ 漏水案件OS — 機能別キュー画面（精算 / 調査 / 工事 / 保険 / 日程調整 / 見積 / 報告書）。
// サイドバーのタブはフラット。各画面の「中」でサブ区分ごとにセクション分割して見せる。

const QUEUES = {
  // ── 精算: 請求/入金のステータス別 ───────────────────────────
  settle: {
    sub: '請求と入金の状況。トラック単位の精算をステータスで仕分け。',
    cols: { whoLabel: '請求先 / 精算者', dateLabel: '期日', money: true },
    groups: [
      { label: '請求中', sub: '請求書PDFはまだ作れません。明細の請求状態だけを見ます', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: 'オーナー山田（ベル経由）', date: '2026/06/05', amount: 285000, status: '請求中', tone: 'st-estimate' },
        { no: 'AQ-2026-0420', prop: 'グランド木場 1F 店舗', who: '木場商事', date: '2026/06/08', amount: 132000, status: '請求中', tone: 'st-estimate' },
        { no: 'AQ-2026-0412', prop: 'サニーコート両国 305', who: '両国管理組合', date: '2026/06/10', amount: 410000, status: '請求中', tone: 'st-estimate' },
      ]},
      { label: '請求遅延', sub: '発行すべき請求が期限超過', rows: [
        { no: 'AQ-2026-0431', prop: 'パーク台東 B1', who: '東邦不動産', date: '超過 4日', amount: 96000, status: '請求遅延', tone: 'destructive', alert: true },
      ]},
      { label: '入金待ち', sub: '保険・取引先からの入金待ち（正常）', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '全日本住宅（調査費用）', date: '2026/06/20', amount: 120000, status: '入金待ち', tone: 'warning' },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '日新火災（復旧305）', date: '認定後', amount: 198000, status: '入金待ち', tone: 'warning' },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '日新火災（復旧205）', date: '認定後', amount: 242000, status: '入金待ち', tone: 'warning' },
        { no: 'AQ-2026-0428', prop: 'メゾン青葉 3F', who: '青葉管理(株)', date: '2026/06/15', amount: 248000, status: '入金待ち', tone: 'warning' },
      ]},
      { label: '入金遅延', sub: '入金期日を超過', rows: [
        { no: 'AQ-2026-0420', prop: 'グランド木場 1F 店舗', who: '木場商事', date: '超過 6日', amount: 132000, status: '入金遅延', tone: 'destructive', alert: true },
      ]},
    ],
  },

  // ── 調査（確定分）─────────────────────────────────────────
  survey: {
    sub: '実施が確定した調査。漏水（原因）調査と見積調査を分けて表示。',
    cols: { whoLabel: '担当', dateLabel: '確定日', money: true },
    groups: [
      { label: '漏水調査', sub: '原因特定・止水のための調査', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '立石', date: '2026/05/22', amount: 120000, status: '確定', tone: 'st-done' },
        { no: 'AQ-2026-0428', prop: 'メゾン青葉 3F', who: '佐藤', date: '2026/05/27', amount: 80000, status: '確定', tone: 'st-done' },
      ]},
      { label: '見積調査', sub: '見積作成のための現地調査', rows: [
        { no: 'AQ-2026-0431', prop: 'パーク台東 B1', who: '立石', date: '2026/05/28', amount: 60000, status: '確定', tone: 'st-done' },
      ]},
    ],
  },

  // ── 工事（確定分）─────────────────────────────────────────
  work: {
    sub: '発注が確定した工事。原因箇所と被害箇所を分けて表示。',
    cols: { room: true, whoLabel: '下請業者', dateLabel: '着工日', money: true },
    groups: [
      { label: '原因箇所工事', sub: '漏水の原因箇所を直す工事', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '405', who: '山田設備', date: '2026/06/02', amount: 285000, status: '着工待ち', tone: 'st-estimate' },
      ]},
      { label: '被害箇所工事', sub: '漏水で被害を受けた箇所の復旧', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '305', who: '山田設備', date: '調整中', amount: 198000, status: '日程調整', tone: 'st-survey' },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '205', who: '山田設備', date: '調整中', amount: 242000, status: '日程調整', tone: 'st-survey' },
        { no: 'AQ-2026-0428', prop: 'メゾン青葉 3F', room: '3F', who: '山田設備', date: '2026/05/28', amount: 248000, status: '施工中', tone: 'st-progress' },
      ]},
    ],
  },

  // ── 保険（立ち上げた全て）─────────────────────────────────
  insurance: {
    sub: '案件で必要となり立ち上げた保険を全件表示。',
    cols: { whoLabel: '保険会社', kindLabel: '種別', dateLabel: '受付日', money: true },
    groups: [
      { label: '保険申請（全件）', sub: '査定〜入金まで横断', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '日新火災', kind: '個人賠償特約', date: '2026/05/25', amount: 440000, status: '査定中', tone: 'st-survey' },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '全日本住宅', kind: '管組（調査費用）', date: '2026/05/25', amount: 120000, status: '入金待ち', tone: 'warning' },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '日新火災', kind: '家財特約', date: '2026/05/28', amount: null, status: '方針未確定', tone: 'warning' },
        { no: 'AQ-2026-0412', prop: 'サニーコート両国 305', who: '損保ジャパン', kind: '施設賠償', date: '2026/05/18', amount: 410000, status: '認定', tone: 'st-done' },
      ]},
    ],
  },

  // ── 日程調整（調整中）─────────────────────────────────────
  schedule: {
    sub: '日程調整中の案件を工程別に表示。相手は業者・居住者・鑑定人など。',
    cols: { room: true, whoLabel: '調整相手', dateLabel: '打診日', money: false },
    groups: [
      { label: '漏水調査', rows: [
        { no: 'AQ-2026-0433', prop: '日本橋ビル 屋上', who: '管理・居住者', date: '2026/05/30', status: '日程調整', tone: 'st-survey' },
      ]},
      { label: '見積調査', rows: [] },
      { label: '原因箇所工事', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '405', who: '山田設備', date: '2026/05/26', status: '着工待ち', tone: 'st-estimate' },
      ]},
      { label: '復旧工事', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '305', who: '山田設備', date: '超過 5日', status: '滞り', tone: 'destructive', alert: true },
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', room: '205', who: '居住者 佐藤', date: '2026/05/28', status: '調整中', tone: 'st-survey' },
      ]},
      { label: '現地鑑定', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '日新火災 鑑定人', date: '2026/06/02', status: '要否確認中', tone: 'st-survey' },
      ]},
    ],
  },

  // ── 見積（作成中）─────────────────────────────────────────
  estimate: {
    sub: '作成中の見積を工程別に表示。',
    cols: { whoLabel: '担当', dateLabel: '着手日', money: true },
    groups: [
      { label: '漏水調査', rows: [
        { no: 'AQ-2026-0433', prop: '日本橋ビル 屋上', who: '川野', date: '2026/05/29', amount: null, status: '作成中', tone: 'st-survey' },
      ]},
      { label: '見積調査', rows: [
        { no: 'AQ-2026-0431', prop: 'パーク台東 B1', who: '立石', date: '2026/05/28', amount: 96000, status: '作成中', tone: 'st-survey' },
      ]},
      { label: '原因箇所工事', rows: [] },
      { label: '被害箇所工事', rows: [] },
    ],
  },

  // ── 報告書（作成中）───────────────────────────────────────
  report: {
    sub: '作成中の報告書を工程別に表示。',
    cols: { whoLabel: '担当', dateLabel: '期日', money: false },
    groups: [
      { label: '漏水調査', sub: '調査報告書', rows: [
        { no: 'AQ-2026-2460', prop: 'メイプルコート405', who: '立石', date: '2026/05/31', status: '作成中', tone: 'st-survey' },
      ]},
      { label: '見積調査', rows: [] },
      { label: '原因箇所工事', rows: [] },
      { label: '被害箇所工事', sub: '完了報告書', rows: [
        { no: 'AQ-2026-0428', prop: 'メゾン青葉 3F', who: '佐藤', date: '2026/05/30', status: '作成中', tone: 'st-survey' },
      ]},
    ],
  },
};

function QueueScreen({ q, onOpen }) {
  const c = q.cols || {};
  const th = { padding: '0 12px', height: 32, fontWeight: 600, fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)', textAlign: 'left', whiteSpace: 'nowrap' };
  const td = { padding: '0 12px', whiteSpace: 'nowrap' };
  const total = q.groups.reduce((s, g) => s + g.rows.length, 0);
  return (
    <div style={{ padding: '20px 24px 32px 20px', maxWidth: 'var(--page-max-width)' }}>
      {q.sub && <div style={{ fontSize: 'var(--text-body-sm)', color: 'var(--muted-foreground)', marginBottom: 18 }}>{q.sub} <span className="mono" style={{ color: 'var(--foreground-subtle)' }}>計 {total} 件</span></div>}
      {q.groups.map(g => (
        <div key={g.label} style={{ marginBottom: 18 }}>
          <SectionTitle sub={g.sub}>{g.label} <span className="mono" style={{ marginLeft: 6, fontSize: 'var(--text-body-sm)', fontWeight: 500, color: 'var(--muted-foreground)' }}>{g.rows.length} 件</span></SectionTitle>
          <AfCard pad={0} style={{ overflow: 'hidden' }}>
            {g.rows.length === 0
              ? <div style={{ padding: '16px 14px', fontSize: 'var(--text-body-sm)', color: 'var(--foreground-subtle)', textAlign: 'center' }}>該当なし</div>
              : <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--text-body-md)' }}>
                  <thead><tr style={{ borderBottom: '1px solid var(--border)' }}>
                    <th style={th}>案件番号</th>
                    <th style={th}>物件{c.room ? ' / 号室' : ''}</th>
                    {c.whoLabel && <th style={th}>{c.whoLabel}</th>}
                    {c.kindLabel && <th style={th}>{c.kindLabel}</th>}
                    {c.dateLabel && <th style={th}>{c.dateLabel}</th>}
                    {c.money && <th style={{ ...th, textAlign: 'right' }}>金額</th>}
                    <th style={th}>状態</th>
                  </tr></thead>
                  <tbody>
                    {g.rows.map((r, i) => {
                      const known = CASES.some(x => x.id === r.no);
                      return (
                        <tr key={i} onClick={() => known && onOpen && onOpen(r.no)}
                          style={{ borderBottom: i < g.rows.length - 1 ? '1px solid var(--border)' : 'none', height: 38, cursor: known ? 'pointer' : 'default', transition: 'background var(--duration-fast) var(--easing)' }}
                          onMouseEnter={e => known && (e.currentTarget.style.background = 'var(--accent)')}
                          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                          <td style={td}><span className="code" style={{ color: 'var(--brand)', fontWeight: 500 }}>{r.no}</span></td>
                          <td style={td}><span style={{ fontWeight: 500 }}>{r.prop}</span>{c.room && r.room ? <span style={{ color: 'var(--muted-foreground)', marginLeft: 6 }}>{r.room}</span> : null}</td>
                          {c.whoLabel && <td style={{ ...td, color: 'var(--muted-foreground)' }}>{r.who || '—'}</td>}
                          {c.kindLabel && <td style={td}>{r.kind ? <AfChip tone="neutral">{r.kind}</AfChip> : '—'}</td>}
                          {c.dateLabel && <td style={{ ...td, color: r.alert ? 'var(--destructive)' : 'var(--muted-foreground)', fontSize: 'var(--text-body-sm)', fontWeight: r.alert ? 600 : 400 }} className={/[0-9]{4}\//.test(r.date || '') ? 'mono' : ''}>{r.date || '—'}</td>}
                          {c.money && <td style={{ ...td, textAlign: 'right' }} className="mono">{r.amount == null ? <span style={{ color: 'var(--foreground-subtle)' }}>—</span> : yen(r.amount)}</td>}
                          <td style={td}><AfChip tone={r.tone || 'neutral'} dot>{r.status}</AfChip></td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>}
          </AfCard>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { QUEUES, QueueScreen });