// HelperMatch Admin — Dashboard (Phase A skeleton)
const Dashboard = () => {
  const { navigate } = useRoute();
  const { user } = useAuth();
  const { t } = useI18n();
  const A = ADMIN;

  // Compute stats
  const pendingCands = A.candidates.filter(c=>c.status==='PENDING_REVIEW');
  const activeCands  = A.candidates.filter(c=>c.status==='ACTIVE');
  const pendingVideos = A.videos.filter(v=>v.moderationStatus==='PENDING');
  const pendingAsm   = A.assessments.filter(a=>a.status==='PENDING_SIGNOFF');
  const payableRef   = A.referrals.filter(r=>r.status==='PAYABLE');
  const holdRef      = A.referrals.filter(r=>r.status==='HOLD');
  const pendingRef   = A.referrals.filter(r=>r.status==='PENDING');
  const activeSubs   = A.subs.filter(s=>s.status==='ACTIVE');

  // Revenue — sum active subs by plan (monthly)
  const mrr = activeSubs.reduce((s,x)=>s + (x.plan === 'premium' ? 14900 : 9900), 0);

  // Payable USD total
  const payableUsd = A.payouts.filter(p=>p.status==='PAYABLE').reduce((s,p)=>s+p.amountUsdCents,0);

  // ==== 7-day signup trend (synthesized) ====
  const trend = [12, 18, 14, 22, 19, 26, 31];

  // ==== Pipeline funnel ====
  // Aligned with the canonical 4-step candidate review flow:
  // sign up → submit resume → approved → 14-day HOLD ends. The last row
  // counts referrals whose 14-day HOLD window has ended (proxy for
  // "successful sustained match"). See CANDIDATE_REVIEW_FLOW.md.
  const totalCands = A.candidates.length;
  const funnel = [
    { k:'註冊', v: totalCands + 34 },
    { k:'提交履歷', v: A.candidates.filter(c=>['PENDING_REVIEW','ACTIVE','REJECTED'].includes(c.status)).length },
    { k:'通過審核', v: activeCands.length },
    { k:'通過 14 天 HOLD', v: A.referrals.filter(r => r.holdEndAt && r.holdEndAt < A.now).length },
  ];
  const funnelMax = funnel[0].v;

  return (
    <div className="a-page">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.dashboard.title')}</h1>
          <p className="a-page-sub">{t('admin.dashboard.welcomeBack', { name: user.name.split(' ')[0] })}</p>
        </div>
        <div className="a-page-header-actions">
          <button className="a-btn a-btn-default"><AIcon name="refresh" size={14}/> {t('common.retry')}</button>
          {isSuperAdmin(user) && <button className="a-btn a-btn-default"><AIcon name="download" size={14}/> {t('admin.dashboard.exportWeekly')}</button>}
        </div>
      </div>

      {/* ==== TOP PRIORITY ROW ==== */}
      <div className="grid-4 mb-20">
        <PriorityTile
          tone="warn" icon="users"
          label="候選人待審核" value={pendingCands.length}
          foot={`最舊 ${FMT.rel(pendingCands.slice().sort((a,b)=>new Date(a.submittedAt)-new Date(b.submittedAt))[0]?.submittedAt)}`}
          cta="開始審核" onClick={()=>navigate('/candidates')}
        />
        <PriorityTile
          tone="warn" icon="video"
          label="SELF 影片待審" value={pendingVideos.length}
          foot={`含 ${pendingVideos.filter(v => (Date.now() - new Date(v.createdAt).getTime()) > 24*3600*1000).length} 則 > 24h`}
          cta="開始審核" onClick={()=>navigate('/videos')}
        />
        <PriorityTile
          tone="info" icon="clipboardCheck"
          label="評測待簽核" value={pendingAsm.length}
          foot="簽核後才會生成影片"
          cta="查看" onClick={()=>navigate('/assessments')}
        />
        {isSuperAdmin(user) ? (
          <PriorityTile
            tone="success" icon="wallet"
            label="Referral 可發放" value={payableRef.length}
            foot={`總計 ${FMT.usd(payableUsd)}`}
            cta="查看" onClick={()=>navigate('/payouts')}
          />
        ) : (
          <PriorityTile
            tone="info" icon="gift"
            label="Referral 追蹤" value={A.referrals.filter(r=>r.status==='PENDING').length + pendingRef.length}
            foot="待達成里程碑"
            cta="查看" onClick={()=>navigate('/referrals')}
          />
        )}
      </div>

      {/* ==== SUPER-ADMIN-ONLY: high-risk attention ==== */}
      {isSuperAdmin(user) && (
        <div className="a-card mb-20" style={{borderColor:'var(--a-danger-line)',background:'linear-gradient(180deg, rgba(204,83,51,0.04), transparent)'}}>
          <div className="a-card-header">
            <h3 className="a-card-title" style={{display:'flex',alignItems:'center',gap:8}}>
              <span style={{display:'inline-flex',width:22,height:22,alignItems:'center',justifyContent:'center',borderRadius:'50%',background:'var(--a-danger-bg)',color:'var(--a-danger)'}}><AIcon name="alert" size={12}/></span>
              Super Admin · 高風險關注項目
            </h3>
            <button className="a-btn a-btn-ghost a-btn-sm ml-auto" onClick={()=>navigate('/audit')}>查看全部高風險紀錄 <AIcon name="arrowRight" size={12}/></button>
          </div>
          <div className="a-card-body">
            <div className="grid-4">
              <div style={{padding:12,border:'1px solid var(--a-line)',borderRadius:8,background:'var(--a-paper-2)'}}>
                <div className="fs-12 text-muted mb-4">待發放獎金總額</div>
                <div className="fs-22 fw-700">{FMT.usd(payableUsd)}</div>
                <div className="fs-11 text-muted mt-2">{payableRef.length} 筆 payout</div>
              </div>
              <div style={{padding:12,border:'1px solid var(--a-line)',borderRadius:8,background:'var(--a-paper-2)'}}>
                <div className="fs-12 text-muted mb-4">失敗待重試</div>
                <div className="fs-22 fw-700" style={{color: A.payouts.filter(p=>p.status==='FAILED').length > 0 ? 'var(--a-danger)' : 'var(--a-ink)'}}>{A.payouts.filter(p=>p.status==='FAILED').length}</div>
                <div className="fs-11 text-muted mt-2">需重匯款</div>
              </div>
              <div style={{padding:12,border:'1px solid var(--a-line)',borderRadius:8,background:'var(--a-paper-2)'}}>
                <div className="fs-12 text-muted mb-4">7 天高風險操作</div>
                <div className="fs-22 fw-700">{A.auditLogs.filter(l => (ADMIN.now - l.at) < 7*86400000 && (typeof HIGH_RISK_ACTIONS !== 'undefined' && HIGH_RISK_ACTIONS.has(l.action))).length}</div>
                <div className="fs-11 text-muted mt-2">金流 / 停權 / 改價</div>
              </div>
              <div style={{padding:12,border:'1px solid var(--a-line)',borderRadius:8,background:'var(--a-paper-2)'}}>
                <div className="fs-12 text-muted mb-4">管理員團隊</div>
                <div className="fs-22 fw-700">{ADMIN_USERS.length}</div>
                <div className="fs-11 text-muted mt-2">1 Super · {ADMIN_USERS.length - 1} 員工</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* ==== METRICS ROW ==== */}
      {isSuperAdmin(user) && (<>
      <div className="grid-4 mb-20">
        <Metric label="註冊候選人" value={totalCands} delta="+31 本週" kind="up"/>
        <Metric label="上架中" value={activeCands.length} delta="+4 本週" kind="up"/>
        <Metric label="活躍訂閱" value={activeSubs.length} delta="-1 本週" kind="down"/>
        <Metric label="MRR" value={FMT.money(mrr)} delta="+12% MoM" kind="up"/>
      </div>

      <div className="grid-2 mb-20" style={{gridTemplateColumns:'2fr 1fr'}}>
        {/* === Pipeline funnel === */}
        <div className="a-card">
          <div className="a-card-header">
            <h3 className="a-card-title">候選人 Pipeline（過去 90 天）</h3>
            <div className="ml-auto text-muted fs-12">註冊 → 配對</div>
          </div>
          <div className="a-card-body">
            <div className="fcol gap-12">
              {funnel.map((f, i) => {
                const pct = Math.round(f.v / funnelMax * 100);
                const drop = i > 0 ? Math.round((funnel[i-1].v - f.v) / funnel[i-1].v * 100) : 0;
                return (
                  <div key={f.k}>
                    <div className="flex items-center jc-between mb-6 fs-13">
                      <span className="fw-500">{f.k}</span>
                      <span className="flex items-center gap-12">
                        <span className="fw-600 tnum">{f.v.toLocaleString()}</span>
                        <span className="text-muted tnum" style={{width:50,textAlign:'right'}}>{pct}%</span>
                        {i > 0 && <span className="a-badge a-badge-neutral" style={{padding:'1px 6px'}}>−{drop}%</span>}
                      </span>
                    </div>
                    <div className="a-progress" style={{height:10,background:'var(--a-bg)'}}>
                      <div className="a-progress-bar" style={{width:pct+'%', background: i === funnel.length - 1 ? 'var(--a-success)' : i >= 2 ? 'var(--a-primary)' : 'var(--a-info)'}}/>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* === Sign-up trend sparkline === */}
        <div className="a-card">
          <div className="a-card-header">
            <h3 className="a-card-title">每日新候選人</h3>
            <div className="ml-auto text-muted fs-12">過去 7 天</div>
          </div>
          <div className="a-card-body">
            <div style={{fontSize:32,fontWeight:700,letterSpacing:'-0.02em'}}>
              {trend.reduce((s,x)=>s+x,0)}
              <span style={{fontSize:13,fontWeight:500,color:'var(--a-ink-muted)',marginLeft:8}}>位</span>
            </div>
            <div className="mt-4 text-success fs-12 fw-600"><AIcon name="arrowUp" size={11}/> +18% vs. 上週</div>
            <Sparkline data={trend} height={80}/>
          </div>
        </div>
      </div>

      <div className="grid-2 mb-20">
        {/* === Market distribution === */}
        <div className="a-card">
          <div className="a-card-header">
            <h3 className="a-card-title">目標市場分佈</h3>
            <div className="ml-auto text-muted fs-12">上架候選人</div>
          </div>
          <div className="a-card-body">
            <MarketBar/>
          </div>
        </div>

        {/* === Nationality ring === */}
        <div className="a-card">
          <div className="a-card-header">
            <h3 className="a-card-title">國籍分佈</h3>
            <div className="ml-auto text-muted fs-12">註冊候選人</div>
          </div>
          <div className="a-card-body">
            <NatRing/>
          </div>
        </div>
      </div>
      </>)}

      {/* === Recent activity === */}
      <div className="a-card">
        <div className="a-card-header">
          <h3 className="a-card-title">最近操作紀錄</h3>
          <button className="a-btn a-btn-ghost a-btn-sm ml-auto" onClick={()=>navigate('/audit')}>查看全部 <AIcon name="arrowRight" size={12}/></button>
        </div>
        <div className="a-card-body a-card-body-flush">
          <table className="a-table a-table-compact">
            <thead><tr><th style={{width:140}}>時間</th><th style={{width:180}}>操作者</th><th>動作</th><th>目標</th><th></th></tr></thead>
            <tbody>
              {A.auditLogs.slice(0, 6).map(log => (
                <tr key={log.id}>
                  <td className="text-muted">{FMT.rel(log.at)}</td>
                  <td className="fw-600">{log.actor}</td>
                  <td><ActionPill action={log.action}/></td>
                  <td><Mono>{log.targetId}</Mono></td>
                  <td style={{width:30}}><AIcon name="chevRight" size={13} className="text-faint"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="mt-24 p-16" style={{padding:16,background:'var(--a-paper-2)',border:'1px dashed var(--a-line-strong)',borderRadius:10}}>
        <div className="fs-12 fw-600 text-muted" style={{letterSpacing:'0.06em',textTransform:'uppercase',marginBottom:8}}>⚡ Phase A · 完成度</div>
        <div className="fs-13 text-muted" style={{lineHeight:1.6}}>
          本 Phase 交付：Login、Shell（Sidebar / Header / 路由）、Dashboard skeleton、共享 UI 元件（Modal / Drawer / Toast / Badge / StatusMap / CandidateCell）。其他模組（候選人 / 評測 / 影片 / 訂閱 / 文章 / Referral）目前為 placeholder，下一階段開始填入。
        </div>
      </div>
    </div>
  );
};

// ========= Dashboard sub-components =========
const PriorityTile = ({ tone, icon, label, value, foot, cta, onClick }) => {
  const toneBg = { warn: 'var(--a-warn-bg)', info: 'var(--a-info-bg)', success: 'var(--a-success-bg)', danger: 'var(--a-danger-bg)' }[tone];
  const toneLine = { warn: 'var(--a-warn-line)', info: 'var(--a-info-line)', success: 'var(--a-success-line)', danger: 'var(--a-danger-line)' }[tone];
  const toneText = { warn: 'var(--a-warn)', info: 'var(--a-info)', success: 'var(--a-success)', danger: 'var(--a-danger)' }[tone];
  return (
    <div className="a-stat" style={{borderColor: toneLine, background: toneBg, cursor:'pointer'}} onClick={onClick}>
      <div className="a-stat-label" style={{color: toneText, opacity: 0.85}}>
        <AIcon name={icon} size={13}/> {label}
      </div>
      <div className="a-stat-value" style={{color: toneText}}>{value}</div>
      <div className="flex items-center jc-between mt-8">
        <span className="fs-12" style={{color: toneText, opacity: 0.75}}>{foot}</span>
        <span className="fs-12 fw-600" style={{color: toneText}}>{cta} →</span>
      </div>
    </div>
  );
};

const Metric = ({ label, value, delta, kind }) => (
  <div className="a-stat">
    <div className="a-stat-label">{label}</div>
    <div className="a-stat-value">{value}</div>
    <div className={`a-stat-delta ${kind}`}>
      <AIcon name={kind==='up'?'arrowUp':kind==='down'?'arrowDown':'arrowRight'} size={11}/> {delta}
    </div>
  </div>
);

const Sparkline = ({ data, height = 60 }) => {
  const w = 280, h = height, pad = 6;
  const max = Math.max(...data);
  const step = (w - pad*2) / (data.length - 1);
  const pts = data.map((v, i) => [pad + i*step, h - pad - (v/max) * (h - pad*2)]);
  const d = pts.map((p,i)=>(i===0?'M':'L')+p[0]+' '+p[1]).join(' ');
  const area = d + ` L ${w-pad} ${h-pad} L ${pad} ${h-pad} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{width:'100%',height,marginTop:10,display:'block'}}>
      <defs>
        <linearGradient id="spkg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--a-primary)" stopOpacity="0.22"/>
          <stop offset="1" stopColor="var(--a-primary)" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} fill="url(#spkg)"/>
      <path d={d} stroke="var(--a-primary)" strokeWidth="2" fill="none" strokeLinecap="round"/>
      {pts.map((p,i)=><circle key={i} cx={p[0]} cy={p[1]} r={i===pts.length-1?3:1.8} fill={i===pts.length-1?'var(--a-primary)':'var(--a-primary)'} opacity={i===pts.length-1?1:0.5}/>)}
    </svg>
  );
};

const MarketBar = () => {
  const data = {};
  ADMIN.candidates.filter(c=>c.status==='ACTIVE').forEach(c => {
    (c.targetMarkets || []).forEach(m => { data[m] = (data[m]||0)+1; });
  });
  const entries = Object.entries(data).sort((a,b)=>b[1]-a[1]);
  const max = Math.max(...entries.map(e=>e[1]));
  const markNames = { TW:'台灣', HK:'香港', SG:'新加坡', MY:'馬來西亞' };
  return (
    <div className="fcol gap-10">
      {entries.map(([m, v]) => (
        <div key={m} className="flex items-center gap-10">
          <div style={{width:110,display:'flex',alignItems:'center',gap:7}}>
            <Flag code={m} size={15}/> <span className="fs-13 fw-600">{markNames[m]}</span>
          </div>
          <div className="a-progress" style={{flex:1,height:10}}>
            <div className="a-progress-bar" style={{width: (v/max*100) + '%'}}/>
          </div>
          <span className="fs-13 fw-600 tnum" style={{width:30,textAlign:'right'}}>{v}</span>
        </div>
      ))}
    </div>
  );
};

const NatRing = () => {
  const byNat = {};
  ADMIN.candidates.forEach(c => { byNat[c.nationality] = (byNat[c.nationality]||0)+1; });
  const total = Object.values(byNat).reduce((a,b)=>a+b,0);
  const colors = { ID: '#E8856A', PH: '#48B8A0', VN: '#7A5AC2', TH: '#D4A554' };
  const entries = Object.entries(byNat).sort((a,b)=>b[1]-a[1]);
  // Build ring
  let acc = 0;
  const r = 52, stroke = 14, cx = 70, cy = 70;
  const circ = 2 * Math.PI * r;
  const segs = entries.map(([code, v]) => {
    const frac = v / total;
    const length = frac * circ;
    const offset = -acc;
    acc += length;
    return { code, v, length, offset, frac };
  });
  return (
    <div className="flex items-center gap-24">
      <svg viewBox="0 0 140 140" width="140" height="140">
        <circle cx={cx} cy={cy} r={r} stroke="var(--a-bg)" strokeWidth={stroke} fill="none"/>
        <g transform={`rotate(-90 ${cx} ${cy})`}>
          {segs.map(s => (
            <circle key={s.code} cx={cx} cy={cy} r={r} stroke={colors[s.code]} strokeWidth={stroke} fill="none"
              strokeDasharray={`${s.length} ${circ - s.length}`} strokeDashoffset={s.offset}/>
          ))}
        </g>
        <text x={cx} y={cy-2} textAnchor="middle" fontSize="22" fontWeight="700" fill="var(--a-ink)">{total}</text>
        <text x={cx} y={cy+15} textAnchor="middle" fontSize="10" fill="var(--a-ink-muted)">候選人</text>
      </svg>
      <div className="fcol gap-10 flex-1">
        {entries.map(([code, v]) => (
          <div key={code} className="flex items-center gap-10">
            <span className="a-dot" style={{width:8,height:8,background:colors[code]}}/>
            <Flag code={code} size={14}/>
            <span className="fs-13 fw-600 flex-1">{ADMIN.nat[code].name}</span>
            <span className="fs-13 tnum">{v}</span>
            <span className="fs-12 text-muted tnum" style={{width:40,textAlign:'right'}}>{Math.round(v/total*100)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const ActionPill = ({ action }) => {
  const map = {
    CANDIDATE_APPROVE: { label:'候選人通過', kind:'success' },
    CANDIDATE_REJECT:  { label:'候選人駁回', kind:'danger' },
    CANDIDATE_REQUEST_CHANGES: { label:'要求補件', kind:'warn' },
    CANDIDATE_SUSPEND: { label:'候選人停權', kind:'danger' },
    EMPLOYER_SUSPEND:  { label:'雇主停權', kind:'danger' },
    VIDEO_MODERATION_APPROVE: { label:'影片通過', kind:'success' },
    VIDEO_MODERATION_REJECT: { label:'影片駁回', kind:'danger' },
    VIDEO_UPLOAD_PLATFORM: { label:'上傳平台影片', kind:'info' },
    PLAN_PRICE_CHANGE: { label:'方案改價', kind:'info' },
    ASSESSMENT_SIGN:   { label:'評測簽核', kind:'success' },
    SUBSCRIPTION_MANUAL_CREATE: { label:'手動補單', kind:'info' },
    PAYOUT_BATCH_EXPORT: { label:'匯出發放批次', kind:'info' },
    PAYOUT_MARK_PAID:  { label:'標記已發放', kind:'success' },
    PAYOUT_MARK_FAILED: { label:'標記失敗', kind:'danger' },
    REFERRAL_MANUAL_APPROVE: { label:'手動通過 Referral', kind:'warn' },
    REFERRAL_VOID:     { label:'作廢 Referral', kind:'danger' },
    REFERRAL_HOLD_EXTEND: { label:'延長觀察期', kind:'warn' },
    REFERRAL_NOTE_ADD: { label:'加註', kind:'neutral' },
    ARTICLE_PUBLISH:   { label:'發佈文章', kind:'success' },
    VIEW_PAYOUT_ACCOUNT: { label:'查看金流帳戶', kind:'neutral' },
  };
  const m = map[action] || { label: action, kind:'neutral' };
  return <span className={`a-badge a-badge-${m.kind}`}>{m.label}</span>;
};

Object.assign(window, { Dashboard });