/* IGI — Customer Dashboard */

function Dashboard({ navigate }) {
  return (
    <section style={{ background: 'var(--ink-50)', minHeight: '90vh', padding: '32px 0 60px' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <div style={{ fontSize: 13, color: 'var(--ink-500)' }}>Welcome back,</div>
            <h1 className="h-2" style={{ marginTop: 2 }}>Ahmed Faraz Khan</h1>
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <button className="btn btn-ghost btn-sm"><I.Bell size={14} /> 3 new</button>
            <button className="btn btn-accent btn-sm" onClick={() => navigate('quote')}>+ New policy</button>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 24 }} className="dash-grid">
          <DashSidebar navigate={navigate} />
          <div>
            <DashStats />
            <PoliciesList navigate={navigate} />
            <RecentActivity />
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .dash-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
}

function DashSidebar({ navigate }) {
  const items = [
    { i: I.Home, l: 'Overview', active: true },
    { i: I.Shield, l: 'My policies', count: 4 },
    { i: I.FileText, l: 'My claims', count: 1 },
    { i: I.Download, l: 'Documents' },
    { i: I.CreditCard, l: 'Payments' },
    { i: I.User, l: 'Profile' },
    { i: I.Bell, l: 'Notifications' },
  ];
  return (
    <div className="card" style={{ padding: 16, height: 'fit-content', position: 'sticky', top: 100 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, borderRadius: 10, background: 'var(--navy-50)' }}>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--navy-800)', color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700 }}>AF</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 700 }}>Ahmed Faraz</div>
          <div style={{ fontSize: 11, color: 'var(--ink-500)' }}>Member since 2019</div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginTop: 12 }}>
        {items.map(it => (
          <button key={it.l} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px',
            borderRadius: 8, fontSize: 14, fontWeight: 600,
            background: it.active ? 'var(--blue-50)' : 'transparent',
            color: it.active ? 'var(--blue-700)' : 'var(--ink-700)',
            textAlign: 'left',
          }}>
            <it.i size={16} />
            <span style={{ flex: 1 }}>{it.l}</span>
            {it.count != null && <span style={{
              fontSize: 11, fontWeight: 700,
              background: it.active ? 'var(--blue-600)' : 'var(--ink-200)',
              color: it.active ? 'white' : 'var(--ink-700)',
              padding: '2px 7px', borderRadius: 999,
            }}>{it.count}</span>}
          </button>
        ))}
      </div>
      <button onClick={() => navigate('home')} style={{ marginTop: 16, padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 12, fontSize: 13, color: 'var(--ink-500)', borderTop: '1px solid var(--ink-200)', paddingTop: 16, width: '100%' }}>
        <I.Logout size={14} /> Sign out
      </button>
    </div>
  );
}

function DashStats() {
  const stats = [
    { l: 'Active policies', v: '4', s: '2 renewing this month', icon: I.Shield, c: 'var(--navy-800)' },
    { l: 'Total cover value', v: 'PKR 1.2 Cr', s: 'Across all policies', icon: I.TrendingUp, c: 'var(--success)' },
    { l: 'Open claims', v: '1', s: 'In progress · CLM-04621', icon: I.Clock, c: 'var(--warning)' },
    { l: 'No-claim discount', v: '35%', s: 'On motor renewal', icon: I.Award, c: 'var(--blue-700)' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 12, marginBottom: 24 }}>
      {stats.map(s => (
        <div key={s.l} className="card" style={{ padding: 20, background: 'white' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.l}</span>
            <s.icon size={16} style={{ color: s.c }} />
          </div>
          <div className="serif" style={{ fontSize: 28, color: 'var(--navy-800)', marginTop: 8 }}>{s.v}</div>
          <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 2 }}>{s.s}</div>
        </div>
      ))}
    </div>
  );
}

function PoliciesList({ navigate }) {
  const policies = [
    { id: 'POL-MTR-2024-78421', i: I.Car, t: 'Motor — Comprehensive Plus', sub: 'Toyota Corolla 2024 · BCG-1429', sum: 'PKR 45,00,000', expires: 'Jul 28, 2026', status: 'active' },
    { id: 'POL-HLT-2024-51290', i: I.Heart, t: 'Family Health Gold', sub: '4 members · Primary + Critical Care', sum: 'PKR 25,00,000', expires: 'Aug 14, 2026', status: 'active' },
    { id: 'POL-HOM-2024-22014', i: I.Home, t: 'Householder Comprehensive', sub: 'Defence Phase 6, Karachi', sum: 'PKR 50,00,000', expires: 'May 12, 2026', status: 'renewing' },
    { id: 'POL-TRV-2026-90043', i: I.Plane, t: 'Travel — Schengen', sub: '14-day cover · Single trip', sum: 'EUR 30,000', expires: 'May 19, 2026', status: 'active' },
  ];
  return (
    <div className="card" style={{ background: 'white', marginBottom: 24, overflow: 'hidden' }}>
      <div style={{ padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--ink-200)' }}>
        <div style={{ fontSize: 16, fontWeight: 700 }}>My policies</div>
        <button className="btn btn-ghost btn-sm" onClick={() => navigate('quote')}>+ Add policy</button>
      </div>
      {policies.map((p, i) => (
        <div key={p.id} style={{ padding: '20px 24px', borderTop: i ? '1px solid var(--ink-200)' : 0, display: 'grid', gridTemplateColumns: '40px 1fr auto auto auto', gap: 16, alignItems: 'center' }}>
          <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--blue-50)', color: 'var(--blue-700)', display: 'grid', placeItems: 'center' }}>
            <p.i size={20} />
          </span>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700 }}>{p.t}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 2 }}>{p.sub} · <span style={{ fontFamily: 'var(--font-mono)' }}>{p.id}</span></div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>Sum insured</div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{p.sum}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>Expires</div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{p.expires}</div>
          </div>
          {p.status === 'renewing' ? (
            <button className="btn btn-accent btn-sm">Renew now</button>
          ) : (
            <button className="btn btn-ghost btn-sm">Manage <I.ChevronRight size={14} /></button>
          )}
        </div>
      ))}
    </div>
  );
}

function RecentActivity() {
  const acts = [
    { i: I.FileText, l: 'Claim CLM-2026-04621 estimate approved', d: 'PKR 187,400 · May 6, 04:20 PM', c: 'var(--success)' },
    { i: I.CreditCard, l: 'Premium installment paid', d: 'PKR 8,200 · Health Gold · May 1', c: 'var(--blue-700)' },
    { i: I.Download, l: 'Policy document downloaded', d: 'POL-MTR-2024-78421 · April 28', c: 'var(--ink-500)' },
    { i: I.Bell, l: 'Householder policy renewing in 4 days', d: 'POL-HOM-2024-22014 · April 27', c: 'var(--warning)' },
  ];
  return (
    <div className="card" style={{ background: 'white' }}>
      <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--ink-200)', fontSize: 16, fontWeight: 700 }}>Recent activity</div>
      <div>
        {acts.map((a, i) => (
          <div key={i} style={{ padding: '16px 24px', borderTop: i ? '1px solid var(--ink-200)' : 0, display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--ink-50)', color: a.c, display: 'grid', placeItems: 'center' }}>
              <a.i size={15} />
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{a.l}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{a.d}</div>
            </div>
            <I.ChevronRight size={14} style={{ color: 'var(--ink-400)' }} />
          </div>
        ))}
      </div>
    </div>
  );
}

window.Dashboard = Dashboard;