// Molara — fresh patient dashboard

function PatientDashboard({ tone = 'warm' }) {
  const { user } = useAuth();
  const consults = useConsults();
  const consult = consults[0] || null;
  const doc = consult ? DOC_BY_ID(consult.docId) : null;

  return (
    <PortalShell
      active="home"
      title={`Good afternoon, ${user?.name?.split(' ')[0] || 'there'}`}
      subtitle={consult ? 'Your first dental consultation is booked.' : 'Welcome to Molara. Start by booking your first dental consult.'}
      action={
        <button onClick={() => window.navigate && window.navigate('/book')} className="ml-btn ml-btn--primary" style={{ marginRight: 4 }}>
          <I.plus size={13}/> New consult
        </button>
      }
    >
      <div style={{ padding: '24px 32px 40px', maxWidth: 1180 }}>
        {consult ? (
          <div className="ml-card" style={{ padding: 0, marginBottom: 22, overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.25fr 0.9fr' }}>
            <div style={{ padding: 30, background: 'var(--ink)', color: '#fff' }}>
              <span className="ml-pill" style={{ background: 'oklch(40% 0.03 240)', color: '#fff' }}>
                <span className="ml-live"/> Confirmed
              </span>
              <h2 style={{ fontSize: 32, color: '#fff', margin: '14px 0 6px', letterSpacing: '-0.02em' }}>
                {consult.mode === 'video' ? 'Video' : consult.mode === 'audio' ? 'Audio' : 'Chat'} consult with <span style={{ fontStyle: 'italic', color: 'oklch(85% 0.1 240)' }}>{doc.n}</span>
              </h2>
              <div style={{ color: 'oklch(80% 0.02 240)', fontSize: 14, marginBottom: 20 }}>
                {consult.reason} · {consult.date} · {consult.time}
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <button onClick={() => {
                  const j = consult && window.consultIsJoinable && window.consultIsJoinable(consult);
                  if (consult && j && !j.ok) {
                    window.navigate && window.navigate('/pay?consult=' + encodeURIComponent(consult.id));
                  } else if (consult) {
                    window.navigate && window.navigate('/visit?consult=' + encodeURIComponent(consult.id));
                  } else {
                    window.navigate && window.navigate('/visit');
                  }
                }} className="ml-btn" style={{ background: '#fff', color: 'var(--ink)' }}>
                  <I.video size={13}/> Join visit
                </button>
                <button onClick={() => window.navigate && window.navigate('/appointments')} className="ml-btn" style={{ background: 'transparent', color: '#fff', border: '1px solid oklch(40% 0.03 240)' }}>
                  View booking
                </button>
              </div>
            </div>
            <div style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div className="ml-label">WHAT THE DENTIST WILL SEE</div>
              {[
                ['Reason', consult.reason],
                ['Pain level', `${consult.severity} / 10`],
                ['Care type', consult.careType],
                ['Note', consult.note || 'No extra note added'],
              ].map(([k, v]) => (
                <div key={k} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 10, fontSize: 13 }}>
                  <span className="ml-muted">{k}</span>
                  <span>{v}</span>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div className="ml-card" style={{ padding: 54, textAlign: 'center', marginBottom: 22 }}>
            <div style={{ width: 62, height: 62, borderRadius: 18, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}>
              <I.tooth size={28}/>
            </div>
            <h2 style={{ fontSize: 32, marginBottom: 10 }}>No consultations yet.</h2>
            <p className="ml-muted" style={{ fontSize: 15, maxWidth: 520, margin: '0 auto 24px', lineHeight: 1.6 }}>
              Book your first dental consultation. After you confirm it, the same booking will appear in your dentist's dashboard.
            </p>
            <button onClick={() => window.navigate && window.navigate('/book')} className="ml-btn ml-btn--primary" style={{ margin: '0 auto' }}>
              Book consultation <I.arrowR size={14}/>
            </button>
          </div>
        )}

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
            ['Find a dentist', 'Browse online dentists', I.search, '/find'],
            ['My appointments', consult ? '1 active consult' : 'No bookings yet', I.calendar, '/appointments'],
            ['Dental records', 'No past records yet', I.doc, '/records'],
          ].map(([title, sub, Icon, route]) => (
            <button key={title} onClick={() => window.navigate && window.navigate(route)} className="ml-card" style={{ padding: 20, textAlign: 'left', border: '1px solid var(--line)', background: '#fff', cursor: 'pointer', display: 'flex', gap: 14, alignItems: 'center' }}>
              <div style={{ width: 42, height: 42, borderRadius: 10, background: 'var(--paper-2)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center' }}>
                <Icon size={18}/>
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{title}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{sub}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </PortalShell>
  );
}

Object.assign(window, { PatientDashboard });