// Booking Confirmation — shown after the 4-step booking flow completes

function BookingConfirmed() {
  useDoctorReviews();
  const consult = latestConsult();
  const doc = consult ? DOC_BY_ID(consult.docId) : DOC_BY_ID(1);
  const fallbackDate = `Today · ${new Date().toLocaleDateString('en-IN', { month: 'short' })} ${new Date().getDate()}`;
  const modeLabel = consult?.mode === 'chat'
    ? 'Chat consult · within 30 min'
    : `${consult?.mode === 'audio' ? 'Audio' : 'Dental video'} consult · 20 min`;
  return (
    <PortalShell active="appointments" title="Booking confirmed" subtitle="A confirmation has been sent to your email and SMS">
      <div style={{ padding: '32px', maxWidth: 880, margin: '0 auto' }}>

        <div className="ml-card" style={{
          padding: 36, marginBottom: 18, textAlign: 'center',
          background: 'linear-gradient(135deg, var(--blue-soft), #fff)',
        }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%',
            background: 'oklch(94% 0.07 165)', color: 'oklch(40% 0.13 165)',
            display: 'grid', placeItems: 'center', margin: '0 auto 18px',
          }}>
            <I.check size={34}/>
          </div>
          <h1 style={{ fontSize: 36, marginBottom: 8, letterSpacing: '-0.025em' }}>
            You're all set.
          </h1>
          <p className="ml-muted" style={{ fontSize: 15, margin: 0 }}>
            We've reserved your slot. We'll text you a reminder 10 minutes before.
          </p>
        </div>

        <div className="ml-card" style={{ padding: 28, marginBottom: 18 }}>
          <div className="ml-label" style={{ marginBottom: 16 }}>VISIT DETAILS</div>
          <div style={{ display: 'grid', gridTemplateColumns: '88px 1fr', gap: 18, alignItems: 'center', marginBottom: 22 }}>
            <div className="ml-avatar" style={{
              width: 88, height: 88, borderRadius: 14, fontSize: 26,
              background: TONE_BG[doc.tone], color: TONE_FG[doc.tone],
            }}>{doc.avatar}</div>
            <div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em' }}>{doc.n}, {doc.creds}</div>
              <div style={{ color: 'var(--ink-3)', fontSize: 13, marginBottom: 6 }}>{doc.spec} · {doc.y} years · ★ {doctorStats(doc).rating}</div>
              <span className="ml-pill ml-pill--mint"><span className="ml-live"/> Online · {doc.wait === 'No waiting time' ? 'no waiting time' : `responds in ~${doc.wait || '5 min'}`}</span>
            </div>
          </div>

          <hr className="ml-hr"/>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, padding: '20px 0', fontSize: 13.5 }}>
            <ConfirmField label="Date & time"   value={`${consult?.date || fallbackDate} · ${consult?.time || 'Next available'}`}/>
            <ConfirmField label="Mode"           value={<><I.video size={13} style={{ verticalAlign: -2 }}/> {modeLabel}</>}/>
            <ConfirmField label="Reason"         value={consult?.reason || 'Dental consultation'}/>
            <ConfirmField label="Visit ID"       value={consult?.id || 'MLR-2026-00001'} mono/>
            <ConfirmField label="Fee"            value={consult?.paymentStatus === 'paid' ? `₹${consult?.paidAmount || consult?.fee || doc.fee} · paid` : `₹${consult?.fee || doc.fee} · pay before joining`}/>
            <ConfirmField label="Cancellation"   value="Free until 1:15 PM"/>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 24 }}>
          <button onClick={() => window.navigate('/appointments')} className="ml-btn ml-btn--ghost" style={{ justifyContent: 'center', padding: '14px' }}>
            <I.calendar size={14}/> Add to calendar
          </button>
          <button onClick={() => window.navigate('/dashboard')} className="ml-btn ml-btn--ghost" style={{ justifyContent: 'center', padding: '14px' }}>
            <I.doc size={14}/> Pre-visit checklist
          </button>
          <button onClick={() => window.navigate('/visit')} className="ml-btn ml-btn--primary" style={{ justifyContent: 'center', padding: '14px' }}>
            <I.video size={14}/> Join visit now
          </button>
        </div>

        <div className="ml-card" style={{ padding: 22, background: 'oklch(98% 0.015 240)', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
          <I.shield size={20} color="var(--blue-deep)" style={{ marginTop: 2 }}/>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>
            <strong style={{ color: 'var(--ink)' }}>Before you join:</strong> we'll do a quick mic, camera and bandwidth check.
            Your dental symptoms have already been shared with {doc.n}. They'll review them right before the call.
          </div>
        </div>

      </div>
    </PortalShell>
  );
}

function ConfirmField({ label, value, mono }) {
  return (
    <div>
      <div className="ml-label" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 450, fontFamily: mono ? 'var(--mono)' : 'inherit' }}>{value}</div>
    </div>
  );
}

window.BookingConfirmed = BookingConfirmed;