// EwoooC - 商品看板（Nothing × Claude 美學：安靜、結構化、Mono 為主）

// ===== 編號標籤（呼應 sidebar 的 01/02/03） =====
const SectionLabel = ({ num, children, sub }) => (
  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 14 }}>
    <span className="momo-mono" style={{
      fontSize: 12, fontWeight: 700, color: 'var(--momo-text-secondary)',
      letterSpacing: '0.08em',
    }}>{num}</span>
    <span aria-hidden="true" style={{
      flex: '0 0 56px', height: 6, alignSelf: 'center',
      backgroundImage: 'radial-gradient(circle, var(--momo-text-tertiary) 1px, transparent 1px)',
      backgroundSize: '6px 6px',
      opacity: 0.5,
    }} />
    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)', letterSpacing: '0.01em' }}>
      {children}
    </span>
    {sub && (
      <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)', marginLeft: 'auto' }}>
        {sub}
      </span>
    )}
  </div>
);

// ===== KPI 大數字（6 顆並排，對齊正式環境） =====
const KPIRow = ({ stats, dynamics, onAiClick }) => {
  const items = [
    { label: '比價覆蓋率', value: '31.5%',                       sub: `${(2121).toLocaleString()} / ${stats.total.toLocaleString()} ACTIVE`, tone: 'caramel' },
    { label: 'PChome 領先', value: 784,                          sub: '平均壓低 +12.0%',                                                    tone: 'ink', accent: true },
    { label: 'MOMO 領先',  value: 952,                           sub: 'MOMO 價格低於 PChome' },
    { label: 'AI 挑品',    value: 50,                            sub: '查看 50 項清單',                                                     tone: 'honey', interactive: true, action: 'ai' },
    { label: '待比對',     value: '4,615',                       sub: '高優先級盡快比對' },
    { label: '資料新鮮度', value: '已更新',                      sub: `2026-05-01 06:52`,                                                   tone: 'success' },
  ];
  const colorMap = {
    caramel: 'var(--momo-warm-caramel)',
    honey:   'var(--momo-warm-honey)',
    rust:    'var(--momo-warm-rust)',
    success: 'var(--momo-success)',
  };

  return (
    <div className="dash-kpis" style={{
      display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
      background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border-light)',
      borderRadius: 8, overflow: 'hidden',
    }}>
      {items.map((it, i) => (
        <div key={i}
          onClick={it.interactive && it.action === 'ai' ? () => onAiClick && onAiClick() : undefined}
          role={it.interactive ? 'button' : undefined}
          tabIndex={it.interactive ? 0 : undefined}
          style={{
          padding: '18px 20px',
          borderRight: i < items.length - 1 ? '1px solid var(--momo-border-light)' : 'none',
          background: it.accent ? 'var(--momo-ink)' : 'transparent',
          color: it.accent ? '#faf7f0' : 'inherit',
          position: 'relative',
          overflow: 'hidden',
          cursor: it.interactive ? 'pointer' : 'default',
          transition: 'var(--momo-transition-base)',
        }}
        onMouseEnter={it.interactive ? (e => e.currentTarget.style.background = it.accent ? 'var(--momo-ink-soft)' : 'var(--momo-bg-paper)') : undefined}
        onMouseLeave={it.interactive ? (e => e.currentTarget.style.background = it.accent ? 'var(--momo-ink)' : 'transparent') : undefined}>
          {/* 點陣背景：深色卡濃一點，淺色卡淡一點當紋理 */}
          <div className={it.accent ? 'momo-dot-bg' : 'momo-dot-bg-dark'}
            style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              opacity: it.accent ? 0.55 : 0.35,
            }} />
          <div style={{ position: 'relative' }}>
          <div className="momo-mono" style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
            color: it.accent ? 'rgba(250,247,240,0.65)' : 'var(--momo-text-secondary)',
            textTransform: 'uppercase', marginBottom: 12,
          }}>
            {it.label}
          </div>
          <div className="momo-mono dash-kpi-num" style={{
            fontSize: 32, fontWeight: 700,
            color: it.accent ? '#faf7f0' : (colorMap[it.tone] || 'var(--momo-text-primary)'),
            letterSpacing: '-0.03em', lineHeight: 1, marginBottom: 10,
          }}>
            {typeof it.value === 'number' ? it.value.toLocaleString() : it.value}
          </div>
          <div className="momo-mono" style={{
            fontSize: 12,
            color: it.accent ? 'rgba(250,247,240,0.75)' : 'var(--momo-text-secondary)',
            lineHeight: 1.4,
          }}>
            {it.sub}{it.interactive && (
              <span aria-hidden="true" style={{
                marginLeft: 6, opacity: 0.6,
                fontSize: 10, fontFamily: 'var(--momo-font-family-mono)',
              }}>↗</span>
            )}
          </div>
          </div>
        </div>
      ))}
    </div>
  );
};

// ===== 焦點 + 排程（雙欄，安靜版） =====
const FocusRow = ({ dynamics, schedule, stats }) => (
  <div className="dash-focus" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
    {/* 最活躍分類 */}
    <div style={{
      padding: 16, background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border-light)', borderRadius: 8,
    }}>
      <div className="momo-mono" style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
        color: 'var(--momo-text-secondary)', textTransform: 'uppercase', marginBottom: 10,
      }}>最活躍分類</div>
      <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--momo-text-primary)', marginBottom: 6, lineHeight: 1.3 }}>
        {dynamics.hottestCategory}
      </div>
      <div className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
        {dynamics.hottestCount} 件商品變動
      </div>
    </div>

    {/* 最大變動 */}
    <div style={{
      padding: 16, background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border-light)', borderRadius: 8,
    }}>
      <div className="momo-mono" style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
        color: 'var(--momo-text-secondary)', textTransform: 'uppercase', marginBottom: 10,
      }}>最大變動</div>
      <div className="momo-mono" style={{
        fontSize: 26, fontWeight: 700, color: 'var(--momo-warm-rust)',
        letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8,
      }}>
        +${dynamics.biggestChange.amount.toLocaleString()}
      </div>
      <div style={{
        fontSize: 13, color: 'var(--momo-text-secondary)', lineHeight: 1.4,
        display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden',
      }}>{dynamics.biggestChange.product}</div>
    </div>

    {/* 爬蟲排程 */}
    <div style={{
      padding: 16, background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border-light)', borderRadius: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
        <span className="momo-mono" style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.1em',
          color: 'var(--momo-text-secondary)', textTransform: 'uppercase',
        }}>爬蟲排程</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          fontSize: 11, fontWeight: 700,
          color: 'var(--momo-success)',
          fontFamily: 'var(--momo-font-family-mono)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--momo-success)' }} />
          ACTIVE
        </span>
      </div>
      <div className="momo-mono" style={{
        fontSize: 22, fontWeight: 700, color: 'var(--momo-text-primary)',
        letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 8,
      }}>{schedule.lastRun}</div>
      <div className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
        掃描 {schedule.scanned.toLocaleString()} 筆 · 新增 +{schedule.added}
      </div>
    </div>
  </div>
);

// ===== 篩選列（簡潔版） =====
const FilterBar = ({ search, setSearch, category, setCategory, tab, setTab }) => {
  const tabs = [
    { id: 'all',  label: '全部' },
    { id: 'ai',   label: 'AI 挑品' },
    { id: 'new',  label: '新上架' },
    { id: 'up',   label: '漲價' },
    { id: 'down', label: '降價' },
    { id: 'off',  label: '下架' },
  ];
  return (
    <div style={{
      padding: '12px 16px', background: 'var(--momo-bg-surface)',
      border: '1px solid var(--momo-border-light)', borderRadius: 8,
      display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
    }}>
      <div style={{ flex: '1 1 240px', minWidth: 200, maxWidth: 320 }}>
        <Input icon="search" placeholder="搜尋商品名稱或品號..." value={search} onChange={e => setSearch(e.target.value)} size="sm" />
      </div>

      <select value={category} onChange={e => setCategory(e.target.value)} style={{
        padding: '7px 12px', border: '1px solid var(--momo-border)',
        borderRadius: 4, background: 'var(--momo-bg-surface)',
        fontSize: 12, color: 'var(--momo-text-primary)', minWidth: 160,
        fontFamily: 'var(--momo-font-family-base)',
      }}>
        <option value="all">所有分類</option>
        <option value="止汗體香">止汗體香</option>
        <option value="美妝保養">美妝保養</option>
        <option value="保健食品">保健食品</option>
        <option value="生活雜貨">生活雜貨</option>
      </select>

      {/* segmented tabs */}
      <div style={{
        display: 'inline-flex',
        background: 'var(--momo-bg-paper)',
        border: '1px solid var(--momo-border-light)',
        borderRadius: 4, padding: 2, gap: 0,
      }}>
        {tabs.map(t => {
          const active = tab === t.id;
          return (
            <button key={t.id} onClick={() => setTab(t.id)} style={{
              padding: '5px 12px', fontSize: 12, fontWeight: 600,
              background: active ? 'var(--momo-ink)' : 'transparent',
              color: active ? '#faf7f0' : 'var(--momo-text-secondary)',
              border: 'none', borderRadius: 3,
              transition: 'var(--momo-transition-base)',
            }}>{t.label}</button>
          );
        })}
      </div>

      <div style={{ flex: 1 }} />

      <div style={{ display: 'flex', gap: 6 }}>
        <Button variant="secondary" size="sm" icon="refresh">更新</Button>
        <Button variant="solid" size="sm" icon="bell" style={{ background: 'var(--momo-ink)', color: '#faf7f0', border: 'none' }}>發送通知</Button>
      </div>
    </div>
  );
};

// ===== 漲跌格子 =====
const ChangeCell = ({ value }) => {
  if (value == null) return <span style={{ color: 'var(--momo-text-tertiary)', fontFamily: 'var(--momo-font-family-mono)' }}>—</span>;
  if (value === 0) return <span style={{ color: 'var(--momo-text-tertiary)', fontFamily: 'var(--momo-font-family-mono)' }}>0</span>;
  const up = value > 0;
  return (
    <span className="momo-mono" style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      color: up ? 'var(--momo-danger)' : 'var(--momo-success)',
      fontWeight: 700,
    }}>
      <span style={{ fontSize: 9 }}>{up ? '▲' : '▼'}</span>
      {up ? '+' : ''}{value.toLocaleString()}
    </span>
  );
};

// ===== Helper：模擬 PChome 價格與警報判斷（接真資料前的 placeholder） =====
const mockPchomePrice = (p) => {
  const seed = parseInt(String(p.id).slice(-3), 10) || 0;
  const offset = ((seed % 11) - 5) * 0.04; // ±20% 區間
  const v = Math.round(p.price * (1 + offset));
  if (seed % 7 === 0) return null; // 部分商品標「待比對」
  return v;
};
const judgeAlert = (momo, pchome) => {
  if (pchome == null) return { tone: 'muted', label: '待比對', sub: '無 PChome 資料' };
  const diff = momo - pchome;
  const pct = (diff / pchome) * 100;
  if (Math.abs(pct) < 1) return { tone: 'earth', label: '價格相近', sub: `差 $${Math.abs(diff)}` };
  if (pct < 0) return { tone: 'caramel', label: 'MOMO 較低', sub: `領先 $${Math.abs(diff)} (${pct.toFixed(1)}%)` };
  return { tone: 'rust', label: 'MOMO 偏高', sub: `落後 $${diff} (+${pct.toFixed(1)}%)` };
};

// ===== 雙平台價格對比卡（業界主流：主價大 + 對比價小一階 + 差額標示） =====
const PriceCompareCell = ({ momo, pchome }) => {
  const lower = pchome != null && pchome < momo;
  const higher = pchome != null && pchome > momo;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'flex-end' }}>
      {/* MOMO 主價 */}
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
        <span className="momo-mono" style={{ fontSize: 10, fontWeight: 700, color: 'var(--momo-warm-caramel)', letterSpacing: '0.08em' }}>MOMO</span>
        <span className="momo-mono" style={{
          fontSize: 15, fontWeight: 700,
          color: higher ? 'var(--momo-warm-rust)' : 'var(--momo-text-primary)',
        }}>${momo.toLocaleString()}</span>
      </div>
      {/* PChome 對比價 */}
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 }}>
        <span className="momo-mono" style={{ fontSize: 10, fontWeight: 700, color: 'var(--momo-text-tertiary)', letterSpacing: '0.08em' }}>PChome</span>
        {pchome != null ? (
          <span className="momo-mono" style={{
            fontSize: 13, fontWeight: 600,
            color: lower ? 'var(--momo-warm-caramel)' : 'var(--momo-text-secondary)',
          }}>${pchome.toLocaleString()}</span>
        ) : (
          <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-tertiary)' }}>—</span>
        )}
      </div>
    </div>
  );
};
const ProductTable = ({ products, total, schedule, onRowClick }) => {
  const PER_PAGE = 50;
  const [page, setPage] = React.useState(1);
  React.useEffect(() => { setPage(1); }, [products.length]);
  const totalPages = Math.max(1, Math.ceil(products.length / PER_PAGE));
  const visible = products.slice((page - 1) * PER_PAGE, page * PER_PAGE);
  return (
  <div style={{
    background: 'var(--momo-bg-surface)',
    border: '1px solid var(--momo-border-light)', borderRadius: 8, overflow: 'hidden',
  }}>
    <div style={{
      padding: '14px 20px', borderBottom: '1px solid var(--momo-border-light)',
      display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="momo-mono" style={{
          fontSize: 12, fontWeight: 700, color: 'var(--momo-text-secondary)', letterSpacing: '0.08em',
        }}>04</span>
        <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--momo-text-primary)' }}>商品列表</span>
        <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
          {total.toLocaleString()} 筆
        </span>
      </div>
      <span style={{ width: 1, height: 14, background: 'var(--momo-border-light)' }} />
      <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--momo-success)' }} />
        排程 {schedule.lastRun} · 掃描 {schedule.scanned.toLocaleString()} · 新增 +{schedule.added}
      </span>
      <div style={{ flex: 1 }} />
      <Button variant="secondary" size="sm" icon="download">匯出報表</Button>
    </div>

    <div style={{ overflowX: 'auto' }}>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 'var(--momo-font-size-sm)' }}>
        <thead>
          <tr style={{ background: 'var(--momo-bg-paper)', borderBottom: '1px solid var(--momo-border-light)' }}>
            {[
              { label: '分類',     w: 120 },
              { label: '商品名稱' },
              { label: '雙平台價格', w: 180, align: 'right' },
              { label: '警報判斷',   w: 150 },
              { label: '昨日',     w: 90, align: 'right' },
              { label: '本週',     w: 90, align: 'right' },
              { label: '更新時間', w: 110, align: 'right' },
            ].map((h, i) => (
              <th key={i} style={{
                padding: '11px 16px', textAlign: h.align || 'left', width: h.w,
                fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
                color: 'var(--momo-text-secondary)',
                fontFamily: 'var(--momo-font-family-mono)',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>
                {h.label}
                <span style={{ fontSize: 9, opacity: 0.5, marginLeft: 4 }}>↕</span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {visible.map((p, idx) => {
            const pchome = mockPchomePrice(p);
            const alert = judgeAlert(p.price, pchome);
            return (
            <tr key={p.id} onClick={() => onRowClick && onRowClick(p)}
                style={{
                  borderTop: idx === 0 ? 'none' : '1px solid var(--momo-border-light)',
                  cursor: 'pointer', transition: 'var(--momo-transition-base)',
                  boxShadow: 'inset 0 0 0 0 var(--momo-warm-caramel)',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.background = 'var(--momo-bg-paper)';
                  e.currentTarget.style.boxShadow = 'inset 3px 0 0 0 var(--momo-warm-caramel)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.background = 'transparent';
                  e.currentTarget.style.boxShadow = 'inset 0 0 0 0 var(--momo-warm-caramel)';
                }}>
              <td style={{ padding: '14px 16px' }}>
                <Tag tone="earth" size="sm">{p.category}</Tag>
              </td>
              <td style={{ padding: '14px 16px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 4,
                    background: 'var(--momo-bg-paper)', border: '1px solid var(--momo-border-light)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 20, flexShrink: 0,
                  }}>{p.emoji}</div>
                  <div style={{ minWidth: 0, flex: 1 }}>
                    <div style={{
                      fontSize: 14, fontWeight: 500, color: 'var(--momo-text-primary)',
                      lineHeight: 1.4, marginBottom: 3,
                      display: '-webkit-box', WebkitLineClamp: 1, WebkitBoxOrient: 'vertical', overflow: 'hidden',
                    }}>{p.name}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--momo-text-secondary)' }}>
                      <span className="momo-mono">ID · {p.id}</span>
                    </div>
                  </div>
                </div>
              </td>
              <td style={{ padding: '14px 16px', textAlign: 'right' }}>
                <PriceCompareCell momo={p.price} pchome={pchome} />
              </td>
              <td style={{ padding: '14px 16px', minWidth: 140 }}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'flex-start', whiteSpace: 'nowrap' }}>
                  <Tag tone={alert.tone} size="sm">{alert.label}</Tag>
                  <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>{alert.sub}</span>
                </div>
              </td>
              <td style={{ padding: '14px 16px', textAlign: 'right' }}><ChangeCell value={p.yesterdayChange} /></td>
              <td style={{ padding: '14px 16px', textAlign: 'right' }}><ChangeCell value={p.weekChange} /></td>
              <td style={{ padding: '14px 16px', textAlign: 'right', fontFamily: 'var(--momo-font-family-mono)', fontSize: 12, color: 'var(--momo-text-secondary)' }}>{p.updatedAt}</td>
            </tr>
            );
          })}
        </tbody>
      </table>
    </div>
    {/* 分頁器 */}
    {products.length > 0 && (
      <div style={{
        padding: '10px 20px', borderTop: '1px solid var(--momo-border-light)',
        display: 'flex', alignItems: 'center', gap: 12,
        background: 'var(--momo-bg-paper)',
      }}>
        <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)' }}>
          {((page - 1) * PER_PAGE + 1).toLocaleString()}–{Math.min(page * PER_PAGE, products.length).toLocaleString()} · 共 {products.length.toLocaleString()} 筆
        </span>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
          <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1} style={{
            padding: '5px 10px', fontSize: 12, fontWeight: 600,
            background: 'var(--momo-bg-surface)', border: '1px solid var(--momo-border-light)',
            borderRadius: 4, color: page === 1 ? 'var(--momo-text-tertiary)' : 'var(--momo-text-primary)',
            cursor: page === 1 ? 'not-allowed' : 'pointer',
            fontFamily: 'var(--momo-font-family-mono)',
          }}>‹ 上一頁</button>
          <span className="momo-mono" style={{ fontSize: 12, color: 'var(--momo-text-secondary)', padding: '0 8px' }}>
            {page} / {totalPages}
          </span>
          <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages} style={{
            padding: '5px 10px', fontSize: 12, fontWeight: 600,
            background: 'var(--momo-bg-surface)', border: '1px solid var(--momo-border-light)',
            borderRadius: 4, color: page === totalPages ? 'var(--momo-text-tertiary)' : 'var(--momo-text-primary)',
            cursor: page === totalPages ? 'not-allowed' : 'pointer',
            fontFamily: 'var(--momo-font-family-mono)',
          }}>下一頁 ›</button>
        </div>
      </div>
    )}
  </div>
  );
};

// ===== 比價決策焦點（3 欄商品卡片） =====
const FocusCard = ({ title, badge, products, accentTone = 'caramel' }) => {
  const accentColor = {
    caramel: 'var(--momo-warm-caramel)',
    rust:    'var(--momo-warm-rust)',
    honey:   'var(--momo-warm-honey)',
  }[accentTone] || 'var(--momo-warm-caramel)';
  return (
  <div style={{
    background: 'var(--momo-bg-surface)',
    border: '1px solid var(--momo-border-light)',
    borderRadius: 8, overflow: 'hidden',
    display: 'flex', flexDirection: 'column',
    position: 'relative',
  }}>
    {/* 左上 accent 條 */}
    <span aria-hidden="true" style={{
      position: 'absolute', top: 0, left: 0, width: 3, height: 36,
      background: accentColor,
    }} />
    {/* 微點陣 */}
    <div className="momo-dot-bg-dark" aria-hidden="true" style={{
      position: 'absolute', inset: 0, opacity: 0.18, pointerEvents: 'none',
    }} />
    <div style={{
      padding: '12px 16px', borderBottom: '1px solid var(--momo-border-light)',
      display: 'flex', alignItems: 'center', gap: 8, background: 'var(--momo-bg-paper)',
      position: 'relative',
    }}>
      <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--momo-text-primary)' }}>{title}</span>
      {badge && <Tag tone={accentTone} size="sm">{badge}</Tag>}
    </div>
    <div style={{ display: 'flex', flexDirection: 'column', position: 'relative' }}>
      {products.map((it, i) => {
        const pchome = mockPchomePrice(it);
        const a = judgeAlert(it.price, pchome);
        return (
          <div key={i} style={{
            padding: '12px 16px',
            borderTop: i === 0 ? 'none' : '1px solid var(--momo-border-light)',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <div style={{
              fontSize: 13, fontWeight: 500, color: 'var(--momo-text-primary)',
              lineHeight: 1.4,
              display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden',
            }}>{it.name}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <Tag tone={a.tone} size="xs">{a.label}</Tag>
              <span className="momo-mono" style={{ fontSize: 11, color: 'var(--momo-text-secondary)' }}>
                MOMO ${it.price.toLocaleString()}{pchome != null && ` · PChome $${pchome.toLocaleString()}`}
              </span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Tag tone="ink" size="xs" mono>MOMO {it.id}</Tag>
              <Tag tone="muted" size="xs" mono>PChome {pchome != null ? 'OK' : '待比對'}</Tag>
            </div>
          </div>
        );
      })}
    </div>
  </div>
  );
};

const FocusFocusRow = ({ products }) => {
  const sorted = [...products];
  const todayDeals = sorted.filter(p => p.yesterdayChange != null && p.yesterdayChange < 0).slice(0, 3);
  const volatile   = [...sorted].sort((a,b) => Math.abs(b.weekChange||0) - Math.abs(a.weekChange||0)).slice(0, 3);
  const restock    = sorted.filter(p => p.isNew || (p.yesterdayChange != null && p.yesterdayChange > 0)).slice(0, 3);

  const fb = (arr) => arr.length ? arr : sorted.slice(0, 3);

  return (
    <div className="dash-focus" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
      <FocusCard title="今日優惠先銷" badge="降價"     products={fb(todayDeals)} accentTone="caramel" />
      <FocusCard title="價格波動"     badge="重點關注" products={fb(volatile)}   accentTone="rust" />
      <FocusCard title="補貨補先"     badge="新動向"   products={fb(restock)}    accentTone="honey" />
    </div>
  );
};

// ===== Page =====
const DashboardPage = ({ density = 'comfortable', onProductClick }) => {
  const D = EWOOOC_DATA;
  const m = { ...D.monitorStats, stableCount: D.monitorStats.stableCount ?? 869 };
  const p = D.priceDynamics;

  const [search, setSearch] = React.useState('');
  const [category, setCategory] = React.useState('all');
  const [tab, setTab] = React.useState('all');
  const listRef = React.useRef(null);
  const handleAiClick = () => {
    setTab('ai');
    requestAnimationFrame(() => {
      const el = listRef.current;
      if (!el) return;
      const main = el.closest('main');
      if (main) main.scrollTo({ top: el.offsetTop - 16, behavior: 'smooth' });
    });
  };

  const filtered = D.products.filter(x => {
    if (category !== 'all' && x.category !== category) return false;
    if (search && !x.name.includes(search) && !String(x.id).includes(search)) return false;
    if (tab === 'up'   && !(x.yesterdayChange > 0)) return false;
    if (tab === 'down' && !(x.yesterdayChange < 0 || x.weekChange < 0)) return false;
    if (tab === 'new'  && !x.isNew) return false;
    if (tab === 'ai'   && !((parseInt(String(x.id).slice(-1), 10) || 0) % 3 === 0)) return false;
    return true;
  });

  return (
    <div className="dash-page" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      {/* 區塊 1：KPI 一排 */}
      <section>
        <SectionLabel num="01" sub="LIVE · 更新於 12:54">比價監控總覽</SectionLabel>
        <KPIRow stats={m} dynamics={p} onAiClick={handleAiClick} />
      </section>

      {/* 區塊 2：焦點數據（保留現況） */}
      <section>
        <SectionLabel num="02" sub="今日">焦點數據</SectionLabel>
        <FocusRow dynamics={p} schedule={D.schedule} stats={m} />
      </section>

      {/* 區塊 3：比價決策焦點（新增） */}
      <section>
        <SectionLabel num="03" sub={`${D.products.length} 項候選`}>比價決策焦點</SectionLabel>
        <FocusFocusRow products={D.products} />
      </section>

      {/* 區塊 4：篩選 + 列表 */}
      <section ref={listRef} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <SectionLabel num="04" sub={`${filtered.length} / ${m.total.toLocaleString()}`}>商品列表</SectionLabel>
        <FilterBar
          search={search} setSearch={setSearch}
          category={category} setCategory={setCategory}
          tab={tab} setTab={setTab}
        />
        <ProductTable products={filtered} total={m.total} schedule={D.schedule} onRowClick={onProductClick} />
      </section>
    </div>
  );
};

window.DashboardPage = DashboardPage;