// ========== SELLER / PROVIDER DASHBOARD ==========
const SellerDashboardPage = ({ nav, auth }) => {
  const [dashboard, setDashboard] = React.useState(null);
  const [profile, setProfile] = React.useState(null);
  const [bookings, setBookings] = React.useState([]);
  const [services, setServices] = React.useState([]);
  const [reviewsList, setReviewsList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    (async () => {
      if (!cgApi.isAuthed()) { setLoading(false); setError('not-authed'); return; }
      try {
        const [dash, prof, bks, svcs] = await Promise.all([
          cgApi.providerDashboard().catch(() => null),
          cgApi.providerProfile().catch(() => null),
          cgApi.listProviderBookings().catch(() => []),
          cgApi.providerServices().catch(() => []),
        ]);
        if (!alive) return;
        setDashboard(dash || {});
        setProfile(prof);
        setBookings(bks || []);
        setServices(svcs || []);
        if (prof && prof.id) {
          cgApi.providerReviews(prof.id).then(rs => { if (alive) setReviewsList(rs || []); }).catch(() => {});
        }
      } catch (e) {
        if (alive) setError(e.message || 'Failed to load');
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, []);

  const fmt = (n) => '$' + Math.round(Number(n || 0)).toLocaleString();
  const greetingHour = new Date().getHours();
  const greeting = greetingHour < 12 ? 'Good morning' : greetingHour < 18 ? 'Good afternoon' : 'Good evening';
  const firstName = (auth && auth.name && auth.name.split(' ')[0]) || (profile && profile.businessName) || 'there';

  const monthlyEarnings = Number((dashboard && dashboard.earnings && dashboard.earnings.thisMonth) || 0);
  const allTimeEarnings = Number((dashboard && dashboard.earnings && dashboard.earnings.allTime) || 0);
  const completedBookings = Number((dashboard && dashboard.completedBookings) || 0);
  const upcomingBookings = Number((dashboard && dashboard.upcomingBookings) || 0);
  const pendingBookings = Number((dashboard && dashboard.pendingBookings) || 0);
  const totalBookingsCount = completedBookings + upcomingBookings + pendingBookings;
  const avgRating = Number((dashboard && dashboard.averageRating) || (profile && profile.averageRating) || 0);
  const totalReviews = Number((dashboard && dashboard.totalReviews) || (profile && profile.totalReviews) || 0);

  const recentRows = (bookings || []).slice(0, 4);
  const totalUnread = 0; // chat unread count loaded elsewhere; left at 0 to avoid double fetch here

  if (loading) {
    return <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center', color:'var(--muted)'}}>Loading your dashboard…</div></div>;
  }
  if (error === 'not-authed' || !cgApi.isAuthed()) {
    return (
      <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center'}}>
        <h2 style={{fontFamily:'Fraunces, serif'}}>Sign in to view your dashboard</h2>
        <p style={{color:'var(--muted)', marginTop: 8}}>Your seller stats, bookings, payouts and reviews live here once you're logged in.</p>
        <button className="btn btn-brand" style={{marginTop: 18}} onClick={() => nav && nav('login')}>Sign in</button>
      </div></div>
    );
  }
  if (!profile) {
    return (
      <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center'}}>
        <h2 style={{fontFamily:'Fraunces, serif'}}>Become a provider</h2>
        <p style={{color:'var(--muted)', marginTop: 8}}>This dashboard is for service providers. Set up your provider profile to start booking clients.</p>
        <button className="btn btn-brand" style={{marginTop: 18}} onClick={() => nav && nav('provider-setup')}>Set up provider profile</button>
      </div></div>
    );
  }

  return (
    <div className="fade-in">
      <div className="container">
        <div className="dash-grid">
          <div className="side-nav">
            <div className="side-nav-label">Storefront</div>
            <div className="side-nav-item active"><Icon name="chart" size={15}/> Dashboard</div>
            <div className="side-nav-item" onClick={() => nav && nav('marketplace')}><Icon name="box" size={15}/> Products <span className="c" style={{background:'var(--line)', color:'var(--ink-2)'}}>{services.length}</span></div>
            <div className="side-nav-item"><Icon name="cart" size={15}/> Orders <span className="c">{pendingBookings || ''}</span></div>
            <div className="side-nav-item"><Icon name="dollar" size={15}/> Payouts</div>
            <div className="side-nav-label">Services</div>
            <div className="side-nav-item" onClick={() => nav && nav('bookings')}><Icon name="calendar" size={15}/> Bookings</div>
            <div className="side-nav-item"><Icon name="user" size={15}/> Clients</div>
            <div className="side-nav-item" onClick={() => nav && nav('messages')}><Icon name="msg" size={15}/> Messages {totalUnread ? <span className="c">{totalUnread}</span> : null}</div>
            <div className="side-nav-label">Account</div>
            <div className="side-nav-item"><Icon name="settings" size={15}/> Settings</div>
          </div>

          <div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 24}}>
              <div>
                <div className="eyebrow">{greeting}, {firstName}</div>
                <h1 style={{fontFamily:'Fraunces, serif', fontSize: 40, margin: '6px 0 0', fontWeight: 500, letterSpacing:'-0.025em', lineHeight: 1}}>
                  Your book this <span style={{fontStyle:'italic', color:'var(--primary-deep)'}}>week</span>
                </h1>
              </div>
              <div style={{display:'flex', gap: 8}}>
                <button className="btn btn-outline" onClick={() => nav && nav('provider-setup')}><Icon name="upload" size={14}/> Edit profile</button>
                <button className="btn btn-brand" onClick={() => nav && nav('bookings')}><Icon name="plus" size={14}/> Block time</button>
              </div>
            </div>

            <div className="stat-grid">
              <div className="stat-card">
                <div className="lbl">Earnings (30d)</div>
                <div className="val">{fmt(monthlyEarnings)}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{fmt(allTimeEarnings)} all-time</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Bookings</div>
                <div className="val">{totalBookingsCount}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{upcomingBookings} upcoming · {pendingBookings} pending</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Completed</div>
                <div className="val">{completedBookings}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{services.length} active services</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Avg rating</div>
                <div className="val">{avgRating ? avgRating.toFixed(2) : '—'}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{totalReviews} review{totalReviews === 1 ? '' : 's'} total</div>
              </div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap: 20, marginBottom: 20}}>
              <div className="chart-card">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 8}}>
                  <div>
                    <h3>Revenue trend</h3>
                    <div style={{fontSize: 12.5, color:'var(--muted)'}}>Last 30 days</div>
                  </div>
                  <div style={{display:'flex', gap: 6}}>
                    <button className="chip active">30d</button>
                    <button className="chip">90d</button>
                    <button className="chip">1y</button>
                  </div>
                </div>
                <svg viewBox="0 0 600 220" style={{width:'100%', height: 220}}>
                  <defs>
                    <linearGradient id="g1" x1="0" x2="0" y1="0" y2="1">
                      <stop offset="0" stopColor="#6366F1" stopOpacity="0.25"/>
                      <stop offset="1" stopColor="#6366F1" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {[0, 55, 110, 165].map(y => <line key={y} x1="0" x2="600" y1={y + 20} y2={y + 20} stroke="#eee" strokeDasharray="2 4"/>)}
                  <polyline points="0,160 40,150 80,130 120,140 160,100 200,120 240,80 280,90 320,60 360,70 400,40 440,60 480,30 520,50 560,20 600,35"
                    fill="none" stroke="#6366F1" strokeWidth="2.5" strokeLinecap="round"/>
                  <polyline points="0,160 40,150 80,130 120,140 160,100 200,120 240,80 280,90 320,60 360,70 400,40 440,60 480,30 520,50 560,20 600,35 600,220 0,220"
                    fill="url(#g1)"/>
                  {[0,100,200,300,400,500,600].map((x, i) => (
                    <text key={x} x={x} y="210" fontSize="10" fill="#888" fontFamily="Inter, sans-serif">
                      {['Mar 22','29','Apr 5','12','19','26','May 3'][i]}
                    </text>
                  ))}
                </svg>
              </div>

              <div className="balance-card">
                <div className="eyebrow">Earnings to date</div>
                <div className="big">{fmt(allTimeEarnings)}</div>
                <div className="sub">{fmt(monthlyEarnings)} this month</div>
                <div className="actions">
                  <button className="btn btn-sm btn-w" onClick={() => nav && nav('bookings')}>View bookings</button>
                  <button className="btn btn-sm btn-g" onClick={() => nav && nav('provider-setup')}>Edit services</button>
                </div>
              </div>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1.6fr 1fr', gap: 20}}>
              <div className="chart-card" style={{padding: 0}}>
                <div style={{padding: '24px 24px 12px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                  <h3 style={{margin: 0}}>Recent bookings</h3>
                  <button className="btn btn-ghost btn-sm" onClick={() => nav && nav('bookings')}>View all →</button>
                </div>
                {recentRows.length === 0 ? (
                  <div style={{padding:'24px', color:'var(--muted)', fontSize: 13}}>No bookings yet. Once clients book your services, they'll appear here.</div>
                ) : (
                  <table className="table">
                    <thead>
                      <tr><th style={{paddingLeft: 24}}>Service</th><th>Date</th><th>Total</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                      {recentRows.map((b) => (
                        <tr key={b.id}>
                          <td style={{paddingLeft: 24}}>
                            <div className="user-cell">
                              <div className="av" style={{background:`var(--grad-${b.tone === 'mint' ? 'teal' : 'coral'})`}}/>
                              <div style={{fontWeight: 500}}>{b.service}</div>
                            </div>
                          </td>
                          <td style={{color:'var(--ink-2)'}}>{b.date} {b.day} · {b.time}</td>
                          <td style={{fontWeight: 600}}>{fmt(b.price)}</td>
                          <td>
                            <span className={`badge ${b.status === 'completed' ? 'badge-ok' : b.status === 'cancelled' ? 'badge-err' : 'badge-indigo'}`}>{b.status}</span>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>

              <div className="chart-card">
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16}}>
                  <h3 style={{margin: 0}}>Your services</h3>
                  <button className="btn btn-ghost btn-sm" onClick={() => nav && nav('provider-setup')}>Manage</button>
                </div>
                {services.length === 0 ? (
                  <div style={{color:'var(--muted)', fontSize: 13, padding:'10px 0'}}>No services yet. Add a service so clients can book you.</div>
                ) : (
                  services.slice(0, 5).map((s, i) => (
                    <div key={s.id || i} style={{display:'flex', gap: 12, padding: '10px 0', borderTop: i > 0 ? '1px solid var(--line)' : 'none', alignItems:'center'}}>
                      <div style={{width: 44, height: 44, borderRadius: 8, overflow:'hidden', flexShrink: 0, background:'var(--sand)', display:'grid', placeItems:'center', fontSize: 11, color:'var(--muted)'}}>
                        {(s.durationMinutes || 60) + 'm'}
                      </div>
                      <div style={{flex: 1, minWidth: 0}}>
                        <div style={{fontSize: 12.5, fontWeight: 500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{s.name}</div>
                        <div style={{fontSize: 11.5, color:'var(--muted)'}}>{(s.category && s.category.name) || 'Service'}</div>
                      </div>
                      <div style={{fontFamily:'Fraunces, serif', fontSize: 16, fontWeight: 500}}>{fmt(s.priceJmd)}</div>
                    </div>
                  ))
                )}
              </div>
            </div>

            {reviewsList && reviewsList.length > 0 && (
              <div className="chart-card" style={{marginTop: 20}}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 16}}>
                  <h3 style={{margin: 0}}>Recent reviews</h3>
                </div>
                {reviewsList.slice(0, 3).map((r, i) => (
                  <div key={r.id || i} style={{padding: '12px 0', borderTop: i > 0 ? '1px solid var(--line)' : 'none'}}>
                    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 4}}>
                      <div style={{fontWeight: 500, fontSize: 13.5}}>{(r.client && ((r.client.firstName || '') + ' ' + (r.client.lastName || ''))) || 'Client'}</div>
                      <Stars n={Number(r.rating || 5)} size={11}/>
                    </div>
                    <div style={{fontSize: 13, color:'var(--ink-2)', lineHeight: 1.5}}>{r.comment || ''}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== PROVIDER SETUP WIZARD ==========
const ProviderSetupPage = ({ nav, toast }) => {
  const [step, setStep] = React.useState(2);
  const [uploads, setUploads] = React.useState([
    { tone: 'coral' }, { tone: 'blush' }, { tone: 'rose' }, { tone: 'peach' },
  ]);

  return (
    <div className="fade-in">
      <div className="container">
        <div style={{padding: '32px 0 16px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div style={{display:'flex', alignItems:'center', gap: 12}}>
            <button className="icon-btn" onClick={() => nav('landing')} style={{width: 36, height: 36}}><Icon name="arrowLeft" size={15}/></button>
            <div>
              <div className="eyebrow">New provider setup</div>
              <div style={{fontSize: 14, fontWeight: 600, marginTop: 2}}>Step {step + 1} of 7 · ~8 minutes</div>
            </div>
          </div>
          <button className="btn btn-ghost btn-sm">Save & exit</button>
        </div>

        <div className="wizard">
          <div className="wiz-steps">
            {WIZARD_STEPS.map((s, i) => (
              <div key={s.n} className={`wiz-step ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`} onClick={() => setStep(i)}>
                <div className="n">{i < step ? <Icon name="check" size={13}/> : i + 1}</div>
                <div>
                  <div className="label">{s.label}</div>
                  <div className="sub">{s.sub}</div>
                </div>
              </div>
            ))}
          </div>

          <div>
            <div className="wiz-panel">
              {step === 0 && <>
                <h2>Let's start with the <span className="i">basics</span>.</h2>
                <p className="lead">This is what clients see first on your profile.</p>
                <div className="field"><label>Business name</label><input defaultValue="Studio Jasmine"/></div>
                <div className="field"><label>Short tagline</label><input defaultValue="Silk press specialist"/></div>
                <div className="field"><label>Bio</label><textarea rows="4" defaultValue="Born and raised in Kingston, I've been doing hair for eleven years..."/></div>
                <div className="field"><label>Primary category</label>
                  <select><option>Hair</option><option>Nails</option><option>Makeup</option></select>
                </div>
              </>}

              {step === 1 && <>
                <h2>Services & <span className="i">pricing</span>.</h2>
                <p className="lead">Add everything you offer. You can always update prices later.</p>
                {[
                  {n:'Silk Press', d:'2h 30m', p: 180},
                  {n:'Silk Press + Trim', d:'2h 45m', p: 210},
                  {n:'Wash + Blowout', d:'1h 30m', p: 110},
                ].map((s, i) => (
                  <div key={i} style={{display:'grid', gridTemplateColumns:'1fr 100px 100px 32px', gap: 10, padding: '12px 0', borderBottom:'1px solid var(--line)', alignItems:'center'}}>
                    <input defaultValue={s.n} style={{border:'none', background:'transparent', fontSize: 14, fontWeight: 500, outline:'none'}}/>
                    <input defaultValue={s.d} style={{background:'var(--sand)', border:'1px solid var(--line)', borderRadius: 10, padding: '8px 12px', fontSize: 13, outline:'none'}}/>
                    <div style={{background:'var(--sand)', border:'1px solid var(--line)', borderRadius: 10, padding: '8px 12px', fontSize: 13, display:'flex', alignItems:'center', gap: 4}}>
                      <span style={{color:'var(--muted)'}}>$</span>
                      <input defaultValue={s.p} style={{border:'none', background:'transparent', width:'100%', outline:'none'}}/>
                    </div>
                    <button className="icon-btn" style={{width: 32, height: 32, border:'none', background:'var(--sand)'}}><Icon name="x" size={13}/></button>
                  </div>
                ))}
                <button className="btn btn-outline btn-sm" style={{marginTop: 16}}><Icon name="plus" size={12}/> Add service</button>
              </>}

              {step === 2 && <>
                <h2>Show your <span className="i">best work</span>.</h2>
                <p className="lead">Upload 6–12 photos. They'll appear in your portfolio grid.</p>
                <div className="drop-zone" onClick={() => {
                  setUploads([...uploads, { tone: ['lav','mint','sand'][uploads.length % 3] }]);
                  toast('Photo added to portfolio');
                }}>
                  <Icon name="upload" size={28}/>
                  <div className="big">Drop photos here</div>
                  <div style={{color:'var(--muted)', fontSize: 13, marginTop: 4}}>or click to browse · JPG, PNG up to 8MB</div>
                </div>
                <div className="upload-grid">
                  {uploads.map((u, i) => (
                    <div key={i} className="upload-tile">
                      <Ph tone={u.tone} style={{fontSize: 9}}>photo {i + 1}</Ph>
                      <button className="rm" onClick={() => setUploads(uploads.filter((_, j) => j !== i))}><Icon name="x" size={10}/></button>
                    </div>
                  ))}
                </div>
              </>}

              {step === 3 && <>
                <h2>Where do you <span className="i">work</span>?</h2>
                <p className="lead">Pick your primary location. Clients see distance from them.</p>
                <div className="field"><label>Studio address</label><input defaultValue="12 Hope Road, New Kingston, JM"/></div>
                <div style={{aspectRatio: '16 / 9', borderRadius: 'var(--r-lg)', overflow:'hidden', marginTop: 16, position:'relative'}}>
                  <div className="map-canvas" style={{borderRadius: 'var(--r-lg)'}}>
                    <div className="map-pin active" style={{left:'50%', top:'50%'}}>
                      <div className="p">Studio Jasmine</div>
                    </div>
                  </div>
                </div>
                <div style={{marginTop: 20, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
                  <div style={{padding: 14, background:'var(--sand)', borderRadius: 12, cursor:'pointer', border:'2px solid var(--ink)'}}>
                    <div style={{fontWeight: 600, fontSize: 14}}>I work from a studio</div>
                    <div style={{fontSize: 12, color:'var(--muted)'}}>Clients come to me</div>
                  </div>
                  <div style={{padding: 14, background:'#fff', borderRadius: 12, cursor:'pointer', border:'1px solid var(--line)'}}>
                    <div style={{fontWeight: 600, fontSize: 14}}>I travel to clients</div>
                    <div style={{fontSize: 12, color:'var(--muted)'}}>Mobile provider</div>
                  </div>
                </div>
              </>}

              {step === 4 && <>
                <h2>Your weekly <span className="i">hours</span>.</h2>
                <p className="lead">Clients can only book when you're available.</p>
                {[
                  {d:'Monday', h:'9:00 AM – 6:00 PM', on: true},
                  {d:'Tuesday', h:'9:00 AM – 6:00 PM', on: true},
                  {d:'Wednesday', h:'9:00 AM – 6:00 PM', on: true},
                  {d:'Thursday', h:'10:00 AM – 7:00 PM', on: true},
                  {d:'Friday', h:'9:00 AM – 5:00 PM', on: true},
                  {d:'Saturday', h:'Closed', on: false},
                  {d:'Sunday', h:'Closed', on: false},
                ].map((r, i) => (
                  <div key={i} className="avail-row">
                    <div className="day">{r.d}</div>
                    <div className="hours">{r.h}</div>
                    <div className={`toggle ${r.on ? 'on' : ''}`}/>
                  </div>
                ))}
              </>}

              {step === 5 && <>
                <h2>How we <span className="i">pay you</span>.</h2>
                <p className="lead">Payouts process every Friday to your bank account.</p>
                <div className="field"><label>Account holder name</label><input defaultValue="Jasmine Morgan"/></div>
                <div className="field"><label>Bank</label><select><option>NCB — National Commercial Bank</option><option>Scotiabank JM</option><option>Sagicor Bank</option></select></div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12}}>
                  <div className="field"><label>Account number</label><input defaultValue="••••••4821"/></div>
                  <div className="field"><label>Branch code</label><input defaultValue="02147"/></div>
                </div>
                <div style={{background:'rgba(99,102,241,0.08)', borderRadius: 12, padding: 14, marginTop: 8, fontSize: 12.5, color:'var(--primary-deep)'}}>
                  <strong>Secured by Stripe Connect.</strong> CaribGlow never stores your banking details.
                </div>
              </>}

              {step === 6 && <>
                <h2>Ready to <span className="i">go live</span>?</h2>
                <p className="lead">Verification usually takes 24–48 hours. We'll email when you're approved.</p>
                <div style={{background:'var(--sand)', borderRadius: 14, padding: 20, marginTop: 10}}>
                  {[
                    ['Business', 'Studio Jasmine · Hair'],
                    ['Services', '5 added · From $25 to $210'],
                    ['Portfolio', `${uploads.length} photos uploaded`],
                    ['Location', '12 Hope Road, New Kingston'],
                    ['Hours', 'Mon–Fri, 40h/week'],
                    ['Banking', 'NCB ••••4821'],
                  ].map((r, i) => (
                    <div key={i} style={{display:'flex', justifyContent:'space-between', padding: '10px 0', borderBottom: i < 5 ? '1px solid var(--line)' : 'none', fontSize: 13.5}}>
                      <span style={{color:'var(--muted)'}}>{r[0]}</span>
                      <span style={{fontWeight: 500}}>{r[1]}</span>
                    </div>
                  ))}
                </div>
              </>}

              <div style={{display:'flex', justifyContent:'space-between', marginTop: 32, paddingTop: 24, borderTop:'1px solid var(--line)'}}>
                <button className="btn btn-outline" disabled={step === 0} onClick={() => setStep(Math.max(0, step - 1))}>
                  <Icon name="arrowLeft" size={14}/> Back
                </button>
                {step < 6 ? (
                  <button className="btn btn-brand" onClick={() => setStep(step + 1)}>
                    Continue <Icon name="arrowRight" size={14}/>
                  </button>
                ) : (
                  <button className="btn btn-brand" onClick={() => { toast('Submitted! We\'ll email in 24–48h.'); nav('landing'); }}>
                    Submit for review <Icon name="check" size={14}/>
                  </button>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ========== ADMIN PANEL ==========
const AdminPage = ({ nav }) => {
  const [tab, setTab] = React.useState('overview');
  const [stats, setStats] = React.useState(null);
  const [pendingProviders, setPendingProviders] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    (async () => {
      if (!cgApi.isAuthed()) { setLoading(false); setError('not-authed'); return; }
      try {
        const [s, provs] = await Promise.all([
          cgApi.adminDashboard().catch(() => ({})),
          cgApi.adminProviders({ limit: 10, status: 'pending' }).catch(() => []),
        ]);
        if (!alive) return;
        setStats(s || {});
        setPendingProviders(provs || []);
      } catch (e) {
        if (alive) setError(e.message || 'Failed');
      } finally {
        if (alive) setLoading(false);
      }
    })();
    return () => { alive = false; };
  }, []);

  const num = (v) => Number(v || 0);
  const totalUsers = num(stats && (stats.totalUsers || (stats.stats && stats.stats.totalUsers)));
  const totalProviders = num(stats && (stats.totalProviders || (stats.stats && stats.stats.totalProviders)));
  const totalBookings = num(stats && (stats.totalBookings || (stats.stats && stats.stats.totalBookings)));
  const totalClients = num(stats && (stats.totalClients || (stats.stats && stats.stats.totalClients)));
  const totalReviews = num(stats && (stats.totalReviews || (stats.stats && stats.stats.totalReviews)));
  const pendingBookings = num(stats && (stats.pendingBookings || (stats.stats && stats.stats.pendingBookings)));

  if (loading) {
    return <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center', color:'var(--muted)'}}>Loading platform stats…</div></div>;
  }
  if (error === 'not-authed' || !cgApi.isAuthed()) {
    return (
      <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center'}}>
        <h2 style={{fontFamily:'Fraunces, serif'}}>Admin sign-in required</h2>
        <button className="btn btn-brand" style={{marginTop: 18}} onClick={() => nav && nav('login')}>Sign in</button>
      </div></div>
    );
  }
  if (error) {
    return (
      <div className="fade-in"><div className="container" style={{padding:'80px 0', textAlign:'center'}}>
        <h2 style={{fontFamily:'Fraunces, serif'}}>Admin only</h2>
        <p style={{color:'var(--muted)', marginTop: 8}}>This panel is for platform admins. If that's you, sign in with an admin account.</p>
      </div></div>
    );
  }

  return (
    <div className="fade-in">
      <div className="container">
        <div className="dash-grid">
          <div className="side-nav">
            <div className="side-nav-label">Administration</div>
            {[
              {k:'overview', l:'Overview', i:'chart'},
              {k:'users', l:'Users', i:'user', c: totalUsers ? totalUsers.toLocaleString() : ''},
              {k:'providers', l:'Providers', i:'verified', c: totalProviders ? String(totalProviders) : ''},
              {k:'bookings', l:'Bookings', i:'calendar', c: totalBookings ? totalBookings.toLocaleString() : ''},
              {k:'reviews', l:'Reviews', i:'bell', c: totalReviews ? totalReviews.toLocaleString() : ''},
            ].map(t => (
              <div key={t.k} className={`side-nav-item ${tab === t.k ? 'active' : ''}`} onClick={() => setTab(t.k)}>
                <Icon name={t.i} size={15}/> {t.l}
                {t.c && <span className="c" style={tab !== t.k ? {background:'var(--line)', color:'var(--ink-2)'} : {}}>{t.c}</span>}
              </div>
            ))}
            <div className="side-nav-label">Platform</div>
            <div className="side-nav-item"><Icon name="settings" size={15}/> Configuration</div>
            <div className="side-nav-item" onClick={() => nav && nav('marketplace')}><Icon name="shop" size={15}/> Marketplace</div>
          </div>

          <div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 24}}>
              <div>
                <div className="eyebrow" style={{color:'var(--coral)'}}>⚡ Admin panel</div>
                <h1 style={{fontFamily:'Fraunces, serif', fontSize: 40, margin: '6px 0 0', fontWeight: 500, letterSpacing:'-0.025em', lineHeight: 1}}>
                  Platform <span style={{fontStyle:'italic', color:'var(--primary-deep)'}}>overview</span>
                </h1>
              </div>
              <div style={{display:'flex', gap: 8}}>
                <button className="btn btn-primary btn-sm">System status: <span style={{color:'var(--teal)'}}>●</span> Healthy</button>
              </div>
            </div>

            <div className="stat-grid">
              <div className="stat-card">
                <div className="lbl">Total users</div>
                <div className="val">{totalUsers.toLocaleString()}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{totalClients.toLocaleString()} clients</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Providers</div>
                <div className="val">{totalProviders.toLocaleString()}</div>
                <div className="delta" style={{color:'var(--muted)'}}>across the platform</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Total bookings</div>
                <div className="val">{totalBookings.toLocaleString()}</div>
                <div className="delta" style={{color:'var(--muted)'}}>{pendingBookings} pending</div>
              </div>
              <div className="stat-card">
                <div className="lbl">Reviews</div>
                <div className="val">{totalReviews.toLocaleString()}</div>
                <div className="delta" style={{color:'var(--muted)'}}>across all providers</div>
              </div>
            </div>

            <div className="chart-card" style={{padding: 0, marginBottom: 20}}>
              <div style={{padding:'20px 24px 12px', display:'flex', justifyContent:'space-between', alignItems:'center'}}>
                <div>
                  <h3 style={{margin: 0}}>Provider verification queue</h3>
                  <div style={{fontSize: 12, color:'var(--muted)', marginTop: 3}}>{pendingProviders.length} awaiting review</div>
                </div>
              </div>
              {pendingProviders.length === 0 ? (
                <div style={{padding:'24px', color:'var(--muted)', fontSize: 13}}>No providers awaiting verification.</div>
              ) : (
                <table className="table">
                  <thead>
                    <tr><th style={{paddingLeft: 24}}>Provider</th><th>Business</th><th>Parish</th><th>Verified</th><th>Actions</th></tr>
                  </thead>
                  <tbody>
                    {pendingProviders.map((p, i) => {
                      const u = p.user || {};
                      const fullName = ((u.firstName || '') + ' ' + (u.lastName || '')).trim() || 'Provider';
                      const avTone = ['mint','coral','rose','peach','sand','lav'][i % 6];
                      return (
                        <tr key={p.id || i}>
                          <td style={{paddingLeft: 24}}>
                            <div className="user-cell">
                              <div className="av" style={{background:`var(--grad-${avTone === 'mint' ? 'teal' : 'coral'})`}}/>
                              <div>
                                <div style={{fontWeight: 500}}>{fullName}</div>
                                <div style={{fontSize: 11, color:'var(--muted)'}}>{u.email || ''}</div>
                              </div>
                            </div>
                          </td>
                          <td>{p.businessName || '—'}</td>
                          <td style={{color:'var(--muted)'}}>{p.parish || p.country || '—'}</td>
                          <td>
                            <span className={`badge ${p.isVerified ? 'badge-ok' : 'badge-warn'}`}>{p.isVerified ? 'verified' : 'pending'}</span>
                          </td>
                          <td>
                            <div style={{display:'flex', gap: 6}}>
                              {!p.isVerified && (
                                <button className="btn btn-primary btn-sm" style={{padding:'5px 12px'}} onClick={async () => {
                                  try { await cgApi.verifyProvider(p.id); setPendingProviders(prev => prev.filter(x => x.id !== p.id)); } catch (e) {}
                                }}>Approve</button>
                              )}
                              <button className="btn btn-outline btn-sm" style={{padding:'5px 12px'}} onClick={() => nav && nav('explore')}>View</button>
                            </div>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SellerDashboardPage, ProviderSetupPage, AdminPage });