// Claimmee 个人中心 / 我的案件 — 多案件管理。合成演示。
const Ac = window.ClaimmeeDesignSystem_e4fda8;
const MktAc = window.ClaimmeeMkt;

function Account() {
  const [filter, setFilter] = React.useState('all');
  const user = MktAc._user || { phone: '138****0000' };
  const cases = MktAc.MY_CASES;
  const flow = MktAc.CASE_FLOW;
  const toneOf = (s) => (s === 'eligible' ? 'eligible' : s === 'needs_review' ? 'review' : 'neutral');
  const labelOf = (s) => MktAc.STATUS_LABEL[s];
  const totals = {
    all: cases.length,
    active: cases.filter((c) => c.status !== 'not_eligible').length,
    eligibleAmount: cases.filter((c) => c.status === 'eligible').reduce((a, c) => a + c.amount, 0),
  };
  const shown = filter === 'all' ? cases : cases.filter((c) => (filter === 'active' ? c.status !== 'not_eligible' : c.status === filter));

  const open = (c) => { MktAc._case = MktAc.buildCase({ from: 'PVG', to: 'LHR', disruption: 'delay', delayMin: 250 }, { status: c.status, amount: c.amount, reasons: [], km: 9200, tier: c.amount || 600 }); MktAc._case.caseId = c.caseId; MktAc._case.route = c.route; MktAc._case.disruptionLabel = c.disruptionLabel; MktAc._case.stage = c.stage; window.ClaimmeeNav && window.ClaimmeeNav('tracking'); };

  const wrap = { width: 'min(1000px, calc(100vw - 32px))', margin: '0 auto' };

  return (
    <div style={{ background: 'var(--bg-page)', paddingBottom: 80 }}>
      <section style={{ background: 'var(--grad-hero)', paddingTop: 44, paddingBottom: 44 }}>
        <div style={{ ...wrap, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'rgba(255,255,255,0.16)', border: '1px solid rgba(255,255,255,0.3)', display: 'grid', placeItems: 'center', color: '#fff', fontWeight: 900, fontSize: '1.4rem' }}>我</div>
            <div>
              <div style={{ color: '#fff', fontWeight: 900, fontSize: '1.4rem' }}>你好，{String(user.phone).slice(0, 3)}****{String(user.phone).slice(-2)}</div>
              <div style={{ color: 'var(--teal-100)', marginTop: 2 }}>免费用户 · 可升级会员享航班预警</div>
            </div>
          </div>
          <Ac.Button variant="primary" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('subscribe')}>升级会员 €19.99/年</Ac.Button>
        </div>
      </section>

      <div style={{ ...wrap, marginTop: -16, display: 'grid', gap: 16 }}>
        {/* 概览 */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="three-col">
          {[['进行中案件', totals.active + ' 件'], ['全部案件', totals.all + ' 件'], ['预计可拿回', '€' + totals.eligibleAmount]].map(([k, v], i) => (
            <Ac.Panel key={k} style={{ textAlign: 'center' }}>
              <div style={{ color: 'var(--text-muted)', fontWeight: 750, fontSize: '0.88rem' }}>{k}</div>
              <div style={{ fontSize: '2rem', fontWeight: 950, color: i === 2 ? 'var(--teal-700)' : 'var(--slate-900)', marginTop: 4 }}>{v}</div>
            </Ac.Panel>
          ))}
        </div>

        {/* 案件列表 */}
        <Ac.Panel>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12, marginBottom: 18 }}>
            <h2 style={{ margin: 0, fontSize: '1.3rem', fontWeight: 800, color: 'var(--slate-900)' }}>我的案件</h2>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {[['all', '全部'], ['active', '进行中'], ['eligible', '可赔'], ['needs_review', '需复核']].map(([k, l]) => (
                <Ac.Button key={k} variant={filter === k ? 'subtle' : 'ghost'} size="sm" onClick={() => setFilter(k)}>{l}</Ac.Button>
              ))}
            </div>
          </div>
          <div style={{ display: 'grid', gap: 12 }}>
            {shown.map((c) => {
              const cur = Math.max(0, Math.min(flow.length - 1, c.stage));
              const pct = Math.round((cur / (flow.length - 1)) * 100);
              return (
                <div key={c.caseId} onClick={() => open(c)} style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', padding: 18, background: 'var(--white)', cursor: 'pointer', transition: 'box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out)' }}
                  onMouseEnter={(e) => { e.currentTarget.style.boxShadow = 'var(--shadow-card)'; e.currentTarget.style.borderColor = 'var(--teal-200)'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = 'var(--border-subtle)'; }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
                    <div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                        <span style={{ fontWeight: 900, fontSize: '1.1rem', color: 'var(--slate-900)' }}>{c.route}</span>
                        <Ac.Badge tone={toneOf(c.status)} dot style={{ fontSize: '0.76rem', padding: '0.3rem 0.6rem' }}>{labelOf(c.status)}</Ac.Badge>
                      </div>
                      <div style={{ color: 'var(--text-muted)', marginTop: 4, fontSize: '0.9rem' }}>{c.caseId} · {c.disruptionLabel} · {c.createdAt}</div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: '1.5rem', fontWeight: 950, color: c.amount ? 'var(--teal-700)' : 'var(--slate-400)' }}>{c.amount ? '€' + c.amount : '—'}</div>
                    </div>
                  </div>
                  {c.status !== 'not_eligible' && (
                    <div style={{ marginTop: 14 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: 6 }}><span>{flow[cur].label}</span><span>{pct}%</span></div>
                      <div style={{ height: 6, borderRadius: 'var(--radius-pill)', background: 'var(--surface-sunken)', overflow: 'hidden' }}><div style={{ width: pct + '%', height: '100%', background: c.status === 'needs_review' ? 'var(--amber-500)' : 'var(--teal-600)', transition: 'width var(--dur-slow) var(--ease-out)' }} /></div>
                    </div>
                  )}
                </div>
              );
            })}
            {shown.length === 0 && <div style={{ minHeight: 120, display: 'grid', placeItems: 'center', border: '1px dashed var(--teal-200)', borderRadius: 'var(--radius-xl)', background: 'var(--teal-50)', color: 'var(--teal-700)', fontWeight: 800 }}>暂无此类案件</div>}
          </div>
        </Ac.Panel>

        <div style={{ textAlign: 'center' }}>
          <Ac.Button variant="secondary" onClick={() => window.ClaimmeeNav && window.ClaimmeeNav('funnel')}>+ 新建索赔（免费初筛）</Ac.Button>
        </div>
        <Ac.Disclaimer>账户与案件均为合成演示数据，不代表真实索赔；进度条仅作示意。</Ac.Disclaimer>
      </div>
    </div>
  );
}

window.Account = Account;