// Dentist profile — public detail page with a single consult action

function doctorRouteId(route) {
  const path = (route || '').split('?')[0];
  const id = Number(path.split('/').filter(Boolean)[1]);
  return Number.isFinite(id) ? id : 3;
}

function DoctorProfile({ route = '' }) {
  const { signedIn, user } = useAuth();
  useDoctorReviews();
  const doc = DOC_BY_ID(doctorRouteId(route));

  return (
    <div className="ml-root" style={{ minHeight: '100%', background: 'var(--paper-2)' }}>
      {!signedIn && (
        <nav style={{ display: 'flex', alignItems: 'center', padding: '16px 40px', borderBottom: '1px solid var(--line)', background: '#fff' }}>
          <div onClick={() => window.navigate && window.navigate('/')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
            <div style={{ width: 24, height: 24, borderRadius: 7, background: 'var(--blue)', display: 'grid', placeItems: 'center', color: '#fff' }}>
              <I.pulse size={14}/>
            </div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 18, letterSpacing: '-0.02em' }}>molara</div>
          </div>
          <button onClick={() => window.navigate && window.navigate('/find')} className="ml-btn ml-btn--ghost" style={{ marginLeft: 32, padding: '7px 12px', fontSize: 12 }}>
            <I.chevronL size={12}/> All dentists
          </button>
          <button onClick={() => window.openGate ? window.openGate(`/doctor/${doc.id}`, 'signin') : window.navigate('/signin')} className="ml-btn ml-btn--ghost" style={{ marginLeft: 'auto', padding: '7px 12px', fontSize: 12 }}>
            Sign in
          </button>
        </nav>
      )}

      <div style={{ padding: '32px 40px 56px', maxWidth: 1120, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.35fr 360px', gap: 22, alignItems: 'start' }}>
          <section className="ml-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{
              minHeight: 220,
              background: `linear-gradient(135deg, ${TONE_BG[doc.tone]}, #fff)`,
              display: 'flex', alignItems: 'center', gap: 28,
              padding: 32,
            }}>
              <div className="ml-avatar" style={{
                width: 132, height: 132, borderRadius: 18, fontSize: 42,
                background: TONE_BG[doc.tone], color: TONE_FG[doc.tone],
                border: '4px solid #fff',
              }}>{doc.avatar}</div>
              <div style={{ minWidth: 0 }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 12, flexWrap: 'wrap' }}>
                  <span className="ml-pill ml-pill--mint"><span className="ml-live"/> Online now</span>
                  <span className="ml-pill ml-pill--ghost">{doc.creds}</span>
                </div>
                <h1 style={{ fontSize: 44, marginBottom: 8 }}>{doc.n}</h1>
                <div style={{ color: 'var(--ink-2)', fontSize: 16 }}>{doc.spec} · {doc.y} years experience · {doc.loc}</div>
                <div style={{ display: 'flex', gap: 18, marginTop: 18, fontSize: 13, color: 'var(--ink-2)', flexWrap: 'wrap' }}>
                  <span style={doctorInline}><I.star size={13}/> <b>{doctorStats(doc).rating}</b> ({doctorStats(doc).reviews.toLocaleString()} reviews)</span>
                  <span style={doctorInline}><I.clock size={13}/> Typical wait {doc.wait || '5 min'}</span>
                  <span style={doctorInline}><I.video size={13}/> Video, audio, or chat</span>
                </div>
              </div>
            </div>

            <div style={{ padding: 28, display: 'grid', gap: 24 }}>
              <div>
                <div className="ml-label" style={{ marginBottom: 8 }}>ABOUT</div>
                <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 15, maxWidth: 680 }}>
                  {doc.bio} Molara verifies credentials, experience, languages, consultation history, and patient feedback before dentists appear in the online network.
                </p>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
                {[
                  ['Specialty', doc.spec],
                  ['Languages', doc.langs.join(', ')],
                  ['Consult fee', `₹${doc.fee} · pay after`],
                ].map(([label, value]) => (
                  <div key={label} style={{ padding: 16, background: 'var(--paper-2)', borderRadius: 8 }}>
                    <div className="ml-label" style={{ marginBottom: 6 }}>{label}</div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{value}</div>
                  </div>
                ))}
              </div>

              <div>
                <div className="ml-label" style={{ marginBottom: 10 }}>NEXT AVAILABLE</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
                  {['Now', 'Today 4:30 PM', 'Tue 10:15 AM', 'Wed 6:00 PM'].map((slot, i) => (
                    <div key={slot} style={{ padding: 12, border: '1px solid var(--line)', borderRadius: 8, background: i === 0 ? 'var(--blue-tint)' : '#fff', fontSize: 13, fontWeight: 500 }}>
                      {slot}
                    </div>
                  ))}
                </div>
              </div>

            </div>
          </section>

          <aside className="ml-card" style={{ padding: 22, position: 'sticky', top: signedIn ? 82 : 20 }}>
            {signedIn && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                <div className="ml-avatar" style={{ width: 34, height: 34, borderRadius: '50%', fontSize: 12 }}>{user?.initials || 'PT'}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{user?.name || 'Your account'}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Signed in</div>
                </div>
              </div>
            )}
            <div className="ml-label" style={{ marginBottom: 8 }}>CONSULT</div>
            <h2 style={{ fontSize: 24, marginBottom: 8 }}>Start with {doc.n} now.</h2>
            <p style={{ color: 'var(--ink-3)', fontSize: 13, marginTop: 0, marginBottom: 18 }}>
              Share your dental concern, choose video/audio/chat, and pay only after the consult.
            </p>
            <button onClick={() => window.requireAuth && window.requireAuth(`/book?doctor=${doc.id}`)}
              className="ml-btn ml-btn--primary" style={{ width: '100%', justifyContent: 'center', padding: '13px' }}>
              <I.video size={14}/> Consult now
            </button>
            <button onClick={() => window.navigate && window.navigate('/find')}
              className="ml-btn ml-btn--ghost" style={{ width: '100%', justifyContent: 'center', padding: '11px', marginTop: 10 }}>
              View all dentists
            </button>
            <div style={{ display: 'grid', gap: 10, marginTop: 18, fontSize: 12, color: 'var(--ink-3)' }}>
              <span style={doctorInline}><I.shield size={13}/> Encrypted consult</span>
              <span style={doctorInline}><I.doc size={13}/> Summary saved to records</span>
              <span style={doctorInline}><I.rupee size={13}/> ₹{doc.fee} if completed</span>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

const doctorInline = { display: 'inline-flex', alignItems: 'center', gap: 6 };

window.DoctorProfile = DoctorProfile;