// Supporting screens — Dashboard, Case list/detail, ZHSR02-13, Non-conformity,
// Template wizard, Drive settings.
// Always rendered in desktop frame.

const D2 = window.NMYTL_DATA;

const STATUS_LABELS = {
  draft: '草稿', in_progress: '進行中', pending_review: '待審查',
  approved: '通過', rejected: '退件',
};

// ============ Sidebar ============
const AppSidebar = ({ active, onNavigate, role }) => {
  const items = [
    { id: 'dashboard', label: '儀表板', icon: 'home' },
    { id: 'cases', label: '案件中心', icon: 'cases', count: D2.cases.length },
    { id: 'plot', label: '農地清冊', icon: 'plot' },
    { id: 'templates', label: '樣板管理', icon: 'template', adminOnly: true },
    { id: 'ai', label: 'AI 辨識', icon: 'ai', tag: 'P2' },
    { id: 'drive', label: '雲端儲存', icon: 'drive', adminOnly: true },
    { id: 'settings', label: '系統設定', icon: 'settings' },
  ];
  const visible = items.filter((i) => !i.adminOnly || role === 'Admin');

  return (
    <div className="sidebar">
      <div style={{ padding: '4px 8px 12px' }}>
        <div className="row gap-8">
          <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--accent)',
                        color: 'var(--accent-fg)', display: 'flex', alignItems: 'center',
                        justifyContent: 'center', fontWeight: 700, fontSize: 14 }}>濃</div>
          <div>
            <div className="text-sm font-bold" style={{ lineHeight: 1.1 }}>濃務一條龍</div>
            <div className="text-xs text-mono text-muted">NMYTL · ZH-TAP610</div>
          </div>
        </div>
      </div>
      <h3>主選單</h3>
      {visible.slice(0, 3).map((item) => (
        <button key={item.id} className="nav-item"
                data-active={active === item.id}
                onClick={() => onNavigate(item.id)}>
          <span className="nav-icon"><Icon name={item.icon} size={15} /></span>
          <span>{item.label}</span>
          {item.count != null && <span className="nav-count">{item.count}</span>}
        </button>
      ))}
      <h3>管理</h3>
      {visible.slice(3).map((item) => (
        <button key={item.id} className="nav-item"
                data-active={active === item.id}
                onClick={() => onNavigate(item.id)}>
          <span className="nav-icon"><Icon name={item.icon} size={15} /></span>
          <span>{item.label}</span>
          {item.tag && <span className="nav-count">{item.tag}</span>}
        </button>
      ))}
      <div style={{ flex: 1 }} />
      <div className="card" style={{ padding: 10, fontSize: 11, marginTop: 16 }}>
        <div className="row gap-6 mb-4">
          <Icon name="cloud_check" size={12} style={{ color: 'var(--ok)' }} />
          <span className="font-medium">Drive 已連線</span>
        </div>
        <div className="text-muted text-mono">2.14 / 100 GB</div>
        <div className="progress mt-4" style={{ height: 3 }}>
          <div className="progress-fill" style={{ width: '2.14%' }} />
        </div>
      </div>
    </div>
  );
};

// ============ Dashboard ============
const DashboardScreen = ({ role, onOpenCase }) => {
  const stats = [
    { label: '我的案件', value: D2.cases.length, sub: '進行中 1 · 待審 1', icon: 'cases' },
    { label: '本月稽核', value: 12, sub: '+3 較上月', icon: 'chart' },
    { label: '待處理', value: role === 'Reviewer' ? 8 : 2, sub: role === 'Reviewer' ? '須簽核' : '不符合追蹤', icon: 'warn' },
    { label: '完成率', value: '87%', sub: '本季', icon: 'check' },
  ];

  return (
    <div style={{ padding: 28 }}>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div className="text-2xl font-semibold">早安,{D2.currentUser.name}</div>
          <div className="text-sm text-muted mt-4">
            {new Date().toLocaleDateString('zh-TW', { weekday: 'long', month: 'long', day: 'numeric' })}
            {' · '}本週還有 3 件待提交
          </div>
        </div>
        <div className="row gap-8">
          <button className="btn"><Icon name="search" size={13} />搜尋案件</button>
          <button className="btn btn-primary"><Icon name="plus" size={13} />建立新案件</button>
        </div>
      </div>

      {/* Stat cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        {stats.map((s) => (
          <div key={s.label} className="card">
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <div className="text-xs text-muted font-medium">{s.label}</div>
              <Icon name={s.icon} size={14} style={{ color: 'var(--ink-3)' }} />
            </div>
            <div className="text-3xl font-bold mt-8 text-mono">{s.value}</div>
            <div className="text-xs text-muted mt-4">{s.sub}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16, marginBottom: 24 }}>
        {/* Active cases panel */}
        <div className="card-flat" style={{ padding: 0, overflow: 'hidden' }}>
          <div className="row" style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)',
                                          justifyContent: 'space-between' }}>
            <div className="text-md font-semibold">進行中案件</div>
            <button className="btn btn-sm btn-ghost">全部 →</button>
          </div>
          <div>
            {D2.cases.slice(0, 4).map((c) => (
              <div key={c.id}
                   onClick={() => onOpenCase(c.id)}
                   style={{
                     padding: '14px 16px', borderTop: '1px solid var(--line)',
                     display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 100px 80px', gap: 12,
                     alignItems: 'center', cursor: 'pointer',
                   }}
                   onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-2)'}
                   onMouseLeave={(e) => e.currentTarget.style.background = ''}>
                <div>
                  <div className="text-sm font-medium">{c.operatorName} · {c.farmName}</div>
                  <div className="text-xs text-muted text-mono">{c.caseNo}</div>
                </div>
                <div className="text-xs text-muted">{c.township}</div>
                <div className="text-xs text-muted">{c.auditDate}</div>
                <div>
                  <div className="text-xs text-muted mb-4">{c.progress.forms}/{c.progress.total} 表單</div>
                  <div className="progress" style={{ height: 4 }}>
                    <div className="progress-fill" style={{ width: `${c.progress.forms / c.progress.total * 100}%` }} />
                  </div>
                </div>
                <span className="status" data-status={c.status}>
                  <span className="dot" />{STATUS_LABELS[c.status]}
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Activity timeline */}
        <div className="card-flat" style={{ padding: 16 }}>
          <div className="text-md font-semibold mb-12">近期活動</div>
          {[
            { who: '林佳穎', what: '上傳 4 張現場照片', when: '10 分前', case: 'CASE-2026-0042' },
            { who: '陳冠廷', what: '退件並要求補件', when: '2 小時前', case: 'CASE-2026-0038' },
            { who: '林佳穎', what: '匯出申請表 .docx', when: '昨天', case: 'CASE-2026-0041' },
            { who: '王文君', what: '上傳 ZHSR02-13 Rev6', when: '3 天前', case: '樣板更新' },
          ].map((a, i) => (
            <div key={i} className="row gap-10" style={{ paddingBottom: 12, marginBottom: 12,
                                                         borderBottom: i < 3 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ width: 28, height: 28, borderRadius: 14, background: 'var(--surface-2)',
                            color: 'var(--ink-2)', display: 'flex', alignItems: 'center',
                            justifyContent: 'center', fontSize: 12, fontWeight: 600,
                            flexShrink: 0 }}>{a.who[0]}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="text-xs"><span className="font-medium">{a.who}</span> · {a.what}</div>
                <div className="text-xs text-muted text-mono mt-4">{a.case} · {a.when}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Audit volume chart */}
      <div className="card-flat" style={{ padding: 16 }}>
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
          <div>
            <div className="text-md font-semibold">每月稽核案件量</div>
            <div className="text-xs text-muted">過去 12 個月 · 包含通過 / 待審 / 退件</div>
          </div>
          <div className="row gap-6">
            <span className="status" style={{ color: 'var(--ok)' }}><span className="dot" />通過</span>
            <span className="status" style={{ color: 'var(--gold)' }}><span className="dot" />待審</span>
          </div>
        </div>
        <ChartBars />
      </div>
    </div>
  );
};

// ============ Cases list ============
const CasesScreen = ({ onOpenCase }) => {
  const [view, setView] = React.useState('table');
  const [filterStatus, setFilterStatus] = React.useState('all');

  const filtered = filterStatus === 'all' ? D2.cases : D2.cases.filter((c) => c.status === filterStatus);

  return (
    <div style={{ padding: 28 }}>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div className="text-2xl font-semibold">案件中心</div>
          <div className="text-sm text-muted mt-4">{filtered.length} 筆 · 最近更新 2 小時前</div>
        </div>
        <div className="row gap-8">
          <button className="btn"><Icon name="filter" size={13} />篩選</button>
          <button className="btn"><Icon name="download" size={13} />匯出</button>
          <button className="btn btn-primary"><Icon name="plus" size={13} />建立案件</button>
        </div>
      </div>

      <div className="row gap-8 mb-16">
        <div className="row gap-6 card" style={{ padding: '4px 8px', flex: 1 }}>
          <Icon name="search" size={14} style={{ color: 'var(--ink-3)' }} />
          <input className="input" placeholder="搜尋案件編號 / 經營者 / 地號..."
                 style={{ border: 'none', padding: 0, background: 'transparent' }} />
        </div>
        <div className="row gap-4">
          {['all', 'draft', 'in_progress', 'pending_review', 'approved', 'rejected'].map((s) => (
            <button key={s} className="btn btn-sm" data-active={filterStatus === s}
                    onClick={() => setFilterStatus(s)}
                    style={{
                      background: filterStatus === s ? 'var(--ink)' : 'var(--surface)',
                      color: filterStatus === s ? 'var(--surface)' : 'var(--ink-2)',
                      borderColor: filterStatus === s ? 'var(--ink)' : 'var(--line)',
                    }}>
              {s === 'all' ? '全部' : STATUS_LABELS[s]}
            </button>
          ))}
        </div>
        <div style={{ width: 1, background: 'var(--line)', alignSelf: 'stretch' }} />
        <button className="btn btn-sm btn-ghost" data-active={view === 'table'}
                onClick={() => setView('table')}
                style={{ background: view === 'table' ? 'var(--surface-2)' : 'transparent' }}>
          <Icon name="list" size={13} />
        </button>
        <button className="btn btn-sm btn-ghost" data-active={view === 'card'}
                onClick={() => setView('card')}
                style={{ background: view === 'card' ? 'var(--surface-2)' : 'transparent' }}>
          <Icon name="grid" size={13} />
        </button>
      </div>

      {view === 'table' ? (
        <div className="card-flat" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 2fr 1.4fr 1fr 1fr 1.2fr 100px',
            padding: '12px 16px', borderBottom: '1px solid var(--line)',
            fontSize: 11, fontWeight: 600, color: 'var(--ink-3)',
            textTransform: 'uppercase', letterSpacing: '.04em',
          }}>
            <div>案件編號</div><div>經營者 / 農場</div><div>地點</div>
            <div>稽核類型</div><div>稽核日</div><div>進度</div><div>狀態</div>
          </div>
          {filtered.map((c) => (
            <div key={c.id} onClick={() => onOpenCase(c.id)}
                 style={{
                   display: 'grid', gridTemplateColumns: '1.2fr 2fr 1.4fr 1fr 1fr 1.2fr 100px',
                   padding: '14px 16px', borderBottom: '1px solid var(--line)',
                   alignItems: 'center', cursor: 'pointer',
                 }}
                 onMouseEnter={(e) => e.currentTarget.style.background = 'var(--surface-2)'}
                 onMouseLeave={(e) => e.currentTarget.style.background = ''}>
              <div className="text-sm text-mono">{c.caseNo}</div>
              <div>
                <div className="text-sm font-medium">{c.operatorName}</div>
                <div className="text-xs text-muted">{c.farmName}</div>
              </div>
              <div className="text-sm">{c.township}</div>
              <div className="text-sm">{c.auditType}</div>
              <div className="text-sm text-mono">{c.auditDate}</div>
              <div>
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                  <span className="text-xs text-muted">{c.progress.forms}/{c.progress.total} 表 · {c.progress.photos} 照片</span>
                </div>
                <div className="progress" style={{ height: 3 }}>
                  <div className="progress-fill" style={{ width: `${c.progress.forms / c.progress.total * 100}%` }} />
                </div>
              </div>
              <span className="status" data-status={c.status}>
                <span className="dot" />{STATUS_LABELS[c.status]}
              </span>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {filtered.map((c) => (
            <div key={c.id} className="card" onClick={() => onOpenCase(c.id)} style={{ cursor: 'pointer' }}>
              <div className="row" style={{ justifyContent: 'space-between' }}>
                <div className="text-xs text-mono text-muted">{c.caseNo}</div>
                <span className="status" data-status={c.status}><span className="dot" />{STATUS_LABELS[c.status]}</span>
              </div>
              <div className="text-lg font-semibold mt-8">{c.operatorName}</div>
              <div className="text-sm text-muted">{c.farmName}</div>
              <div className="divider" />
              <div className="kv"><span className="k">類型</span><span className="v">{c.auditType}</span></div>
              <div className="kv"><span className="k">稽核日</span><span className="v text-mono">{c.auditDate}</span></div>
              <div className="kv"><span className="k">地點</span><span className="v">{c.township}</span></div>
              <div className="mt-12">
                <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                  <span className="text-xs text-muted">表單進度</span>
                  <span className="text-xs text-mono">{c.progress.forms}/{c.progress.total}</span>
                </div>
                <div className="progress" style={{ height: 4 }}>
                  <div className="progress-fill" style={{ width: `${c.progress.forms / c.progress.total * 100}%` }} />
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ============ Case detail (with tabs) ============
const CaseDetailScreen = ({ caseData, sections, completion, onBack, onOpenF1, onOpenChecklist, onOpenNc }) => {
  const [activeTab, setActiveTab] = React.useState('site');
  const tabs = [
    { id: 'overview', label: '經營者 & 農地', icon: 'user' },
    { id: 'application', label: '申請表', sub: 'ZHSR01-01', icon: 'file', done: true },
    { id: 'task', label: '稽核任務書', sub: 'ZHSR02-1', icon: 'file', done: true },
    { id: 'site', label: '現場稽核紀錄', sub: 'ZHSR02-7', icon: 'camera', done: completion === 'full' },
    { id: 'checklist', label: '生產出貨查核表', sub: 'ZHSR02-13', icon: 'check', big: true,
      done: completion === 'full', halfDone: completion === 'half' },
    { id: 'report', label: '不符合項 + 稽核報告', sub: 'ZHSR02-8 / 22', icon: 'warn', done: completion === 'full' },
  ];

  return (
    <div className="col" style={{ flex: 1, minHeight: 0 }}>
      {/* Case header */}
      <div style={{ padding: '20px 28px 0', background: 'var(--surface)',
                    borderBottom: '1px solid var(--line)' }}>
        <div className="row gap-8 text-xs text-muted mb-12">
          <button className="btn btn-ghost btn-sm" onClick={onBack}>
            <Icon name="arrow_left" size={12} />案件中心
          </button>
          <span>/</span>
          <span className="text-mono">{caseData.caseNo}</span>
        </div>
        <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <div>
            <div className="row gap-8" style={{ marginBottom: 4 }}>
              <span className="text-2xl font-semibold">{caseData.operatorName}</span>
              <span className="text-2xl text-muted">·</span>
              <span className="text-2xl">{caseData.farmName}</span>
            </div>
            <div className="row gap-12 text-sm text-muted text-mono">
              <span>{caseData.caseNo}</span>
              <span>·</span>
              <span>{caseData.auditType}</span>
              <span>·</span>
              <span><Icon name="location" size={11} style={{ verticalAlign: -1 }} /> {caseData.township}</span>
              <span>·</span>
              <span>稽核日 {caseData.auditDate}</span>
            </div>
          </div>
          <div className="row gap-8">
            <span className="status" data-status={caseData.status}>
              <span className="dot" />{STATUS_LABELS[caseData.status]}
            </span>
            <button className="btn"><Icon name="cloud" size={13} />Drive</button>
            <button className="btn"><Icon name="more" size={13} /></button>
            <button className="btn btn-primary"><Icon name="submit" size={13} />提交審查</button>
          </div>
        </div>
        {/* Tabs */}
        <div className="row" style={{ gap: 4, overflowX: 'auto', marginBottom: -1 }}>
          {tabs.map((t, i) => (
            <button key={t.id}
                    className="btn btn-ghost"
                    onClick={() => setActiveTab(t.id)}
                    style={{
                      borderBottom: activeTab === t.id ? '2px solid var(--accent)' : '2px solid transparent',
                      borderRadius: 0,
                      paddingBottom: 12, paddingTop: 8,
                      color: activeTab === t.id ? 'var(--ink)' : 'var(--ink-2)',
                      fontWeight: activeTab === t.id ? 600 : 400,
                      whiteSpace: 'nowrap',
                    }}>
              <span className="text-xs text-mono text-muted" style={{ marginRight: 4 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              {t.label}
              {t.sub && <span className="text-xs text-muted" style={{ marginLeft: 6 }}>{t.sub}</span>}
              {t.done && <Icon name="check" size={12} style={{ color: 'var(--ok)', marginLeft: 4 }} />}
              {t.halfDone && <span className="text-xs" style={{ color: 'var(--gold)', marginLeft: 4 }}>·</span>}
            </button>
          ))}
        </div>
      </div>

      <div className="main" style={{ padding: 28 }}>
        {activeTab === 'overview' && <CaseOverview caseData={caseData} />}
        {activeTab === 'site' && <CaseSitePhotos sections={sections} completion={completion} onOpenF1={onOpenF1} />}
        {activeTab === 'checklist' && <ChecklistInline onOpen={onOpenChecklist} completion={completion} />}
        {activeTab === 'report' && <NonconformityInline onOpen={onOpenNc} completion={completion} />}
        {(activeTab === 'application' || activeTab === 'task') &&
          <FormPlaceholder tabId={activeTab} caseData={caseData} />}
      </div>
    </div>
  );
};

const CaseOverview = ({ caseData }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
    <div>
      <div className="card mb-16">
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
          <div className="text-md font-semibold">經營者基本資料</div>
          <button className="btn btn-sm btn-ghost"><Icon name="edit" size={12} />編輯</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          <div><div className="label">經營者名稱</div><div className="text-md font-medium">{caseData.operatorName}</div></div>
          <div><div className="label">註冊號</div><div className="text-md text-mono">ZH-TAP610-{caseData.caseNo.slice(-4)}</div></div>
          <div><div className="label">驗證機構</div><div className="text-md">中華驗證有限公司</div></div>
          <div><div className="label">聯絡電話</div><div className="text-md text-mono">05-2658{Math.floor(Math.random() * 900) + 100}</div></div>
          <div><div className="label">縣市鄉鎮</div><div className="text-md">{caseData.township}</div></div>
          <div><div className="label">經營項目</div><div className="text-md">水稻 · 香米 · 採後處理</div></div>
        </div>
      </div>

      <div className="card">
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 12 }}>
          <div className="text-md font-semibold">農地清冊 · 4 筆</div>
          <button className="btn btn-sm"><Icon name="plus" size={12} />新增</button>
        </div>
        {[
          { name: '嘉興段', no: '0526-0023', area: 0.5234, crop: '水稻 / 香米' },
          { name: '嘉興段', no: '0526-0024', area: 0.3812, crop: '水稻 / 香米' },
          { name: '嘉興段', no: '0526-0031', area: 0.2156, crop: '採後處理場' },
          { name: '嘉興段', no: '0526-0045', area: 0.4188, crop: '水稻 / 香米' },
        ].map((p, i) => (
          <div key={i} className="row" style={{
            padding: '10px 0', borderTop: i ? '1px solid var(--line)' : 'none',
            justifyContent: 'space-between',
          }}>
            <div className="row gap-10">
              <div style={{ width: 36, height: 36, borderRadius: 6, overflow: 'hidden' }}>
                <SatelliteSVG seed={i * 7 + 3} label="" area="" />
              </div>
              <div>
                <div className="text-sm font-medium">{p.name} {p.no}</div>
                <div className="text-xs text-muted">{p.crop}</div>
              </div>
            </div>
            <div className="text-sm text-mono">{p.area.toFixed(4)} ha</div>
          </div>
        ))}
      </div>
    </div>

    <div>
      <div className="card mb-16">
        <div className="text-md font-semibold mb-12">稽核資訊</div>
        <div className="kv"><span className="k">稽核類型</span><span className="v">{caseData.auditType}</span></div>
        <div className="kv"><span className="k">稽核日期</span><span className="v text-mono">{caseData.auditDate}</span></div>
        <div className="kv"><span className="k">主任稽核員</span><span className="v">{caseData.leadAuditor}</span></div>
        <div className="kv"><span className="k">最後更新</span><span className="v">{caseData.updatedAt}</span></div>
      </div>

      <div className="card">
        <div className="text-md font-semibold mb-12">案件文件</div>
        {D2.templates.map((t, i) => (
          <div key={t.id} className="row" style={{
            padding: '8px 0', borderTop: i ? '1px solid var(--line)' : 'none',
            justifyContent: 'space-between',
          }}>
            <div className="row gap-8">
              <Icon name="file" size={14} style={{ color: 'var(--ink-3)' }} />
              <div>
                <div className="text-sm font-medium">{t.id}</div>
                <div className="text-xs text-muted">{t.name}</div>
              </div>
            </div>
            <button className="btn btn-sm btn-ghost"><Icon name="download" size={12} /></button>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const CaseSitePhotos = ({ sections, completion, onOpenF1 }) => {
  const visible = completion === 'empty' ? [] : completion === 'half' ? sections.slice(0, 2) : sections;
  return (
    <div>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div className="text-md font-semibold">現場稽核照片附件</div>
          <div className="text-xs text-muted mt-4">
            {visible.length} 個地號區塊 · {visible.reduce((s, x) => s + x.photos.length, 0)} 張照片
          </div>
        </div>
        <button className="btn btn-primary" onClick={onOpenF1}>
          <Icon name="camera" size={13} />進入照片管理
        </button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
        {visible.map((s) => (
          <div key={s.id} className="section-card" onClick={onOpenF1} style={{ cursor: 'pointer' }}>
            <div className="cover">
              <SatelliteSVG seed={s.orderIndex * 7} label={`${s.sectionName} ${s.parcelNo}`}
                            area={`${s.areaHa.toFixed(4)} ha`} />
            </div>
            <div className="meta">
              <div className="ti">{s.sectionName} {s.parcelNo}</div>
              <div className="sub">
                <span>{s.township}</span>
                <span>{s.photos.length} 張</span>
              </div>
            </div>
          </div>
        ))}
        {visible.length === 0 && (
          <div className="card" style={{ gridColumn: '1 / -1', textAlign: 'center', padding: 40 }}>
            <Icon name="camera" size={32} style={{ color: 'var(--ink-3)', opacity: .5 }} />
            <div className="text-md mt-12">尚未上傳任何現場照片</div>
            <button className="btn btn-primary mt-12" onClick={onOpenF1}>開始上傳</button>
          </div>
        )}
      </div>
    </div>
  );
};

const ChecklistInline = ({ onOpen, completion }) => (
  <div>
    <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
      <div>
        <div className="text-md font-semibold">ZHSR02-13 · 生產出貨查核表</div>
        <div className="text-xs text-muted mt-4">9 個章節 · ~230 個查核項 · Rev6.0 (2025-03-07)</div>
      </div>
      <button className="btn btn-primary" onClick={onOpen}>進入查核表</button>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
      {D2.checklistChapters.map((ch) => {
        const factor = completion === 'empty' ? 0 : completion === 'half' ? 0.5 : 1;
        const done = Math.floor(ch.count * factor);
        const pct = (done / ch.count) * 100;
        return (
          <div key={ch.id} className="card" onClick={onOpen} style={{ cursor: 'pointer' }}>
            <div className="row" style={{ justifyContent: 'space-between' }}>
              <div className="text-sm font-medium">{ch.title}</div>
              <span className="text-xs text-mono text-muted">{done}/{ch.count}</span>
            </div>
            <div className="progress mt-8" style={{ height: 4 }}>
              <div className={`progress-fill ${pct < 100 && pct > 0 ? 'warn' : ''}`}
                   style={{ width: `${pct}%`, background: pct === 100 ? 'var(--ok)' : pct === 0 ? 'var(--line-2)' : 'var(--gold)' }} />
            </div>
          </div>
        );
      })}
    </div>
  </div>
);

const NonconformityInline = ({ onOpen, completion }) => {
  const visible = completion === 'empty' ? [] : completion === 'half' ? D2.nonconformities.slice(0, 1) : D2.nonconformities;
  return (
    <div>
      <div className="row" style={{ justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div className="text-md font-semibold">不符合項報告 + 稽核報告</div>
          <div className="text-xs text-muted mt-4">ZHSR02-8 + ZHSR02-22 · {visible.length} 項不符合</div>
        </div>
        <button className="btn btn-primary" onClick={onOpen}>進入編輯</button>
      </div>
      <div className="card-flat" style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '60px 100px 2fr 100px 120px 100px',
                      padding: '12px 16px', borderBottom: '1px solid var(--line)',
                      fontSize: 11, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.04em' }}>
          <div>序號</div><div>條款</div><div>事實</div><div>嚴重度</div><div>限期</div><div>狀態</div>
        </div>
        {visible.map((n, i) => (
          <div key={n.id} style={{
            display: 'grid', gridTemplateColumns: '60px 100px 2fr 100px 120px 100px',
            padding: '14px 16px', borderBottom: '1px solid var(--line)', alignItems: 'center',
          }}>
            <div className="text-sm text-mono">{String(i + 1).padStart(2, '0')}</div>
            <div className="text-sm text-mono">{n.clause}</div>
            <div className="text-sm">{n.fact}</div>
            <div>
              <span className="status" style={{
                color: n.severity === '主要' ? 'var(--err)' : 'var(--gold)',
              }}><span className="dot" />{n.severity}</span>
            </div>
            <div className="text-sm text-mono">{n.dueDate}</div>
            <div className="text-sm text-muted">{n.status}</div>
          </div>
        ))}
        {visible.length === 0 && (
          <div style={{ padding: 32, textAlign: 'center', color: 'var(--ink-3)' }}>
            <Icon name="check" size={28} style={{ opacity: .5 }} />
            <div className="text-md mt-8">尚未記錄不符合項</div>
            <div className="text-sm mt-4">完成查核表後可從不符合題目自動帶入</div>
          </div>
        )}
      </div>
    </div>
  );
};

const FormPlaceholder = ({ tabId, caseData }) => (
  <div className="card">
    <div className="text-md font-semibold mb-12">
      {tabId === 'application' ? '申請表 ZHSR01-01' : '稽核任務書 ZHSR02-1'}
    </div>
    <div className="text-sm text-muted">問卷介面 · 填完後一鍵匯出 .docx</div>
    <div style={{ marginTop: 20, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
      {[
        ['經營者名稱', caseData.operatorName],
        ['註冊號', `ZH-TAP610-${caseData.caseNo.slice(-4)}`],
        ['驗證類型', caseData.auditType],
        ['預定稽核日期', caseData.auditDate],
        ['主稽核員', caseData.leadAuditor],
        ['農場名稱', caseData.farmName],
      ].map(([k, v]) => (
        <div key={k}>
          <label className="label">{k}</label>
          <input className="input" value={v} readOnly />
        </div>
      ))}
    </div>
    <div className="row gap-8 mt-16">
      <button className="btn"><Icon name="save" size={13} />儲存草稿</button>
      <button className="btn btn-primary"><Icon name="download" size={13} />匯出 .docx</button>
    </div>
  </div>
);

Object.assign(window, {
  AppSidebar, DashboardScreen, CasesScreen, CaseDetailScreen, STATUS_LABELS,
});