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

function confirmedRouteParams(route) {
  const raw = String(route || window.location.hash.replace(/^#/, '') || '');
  const q = raw.split('?')[1] || '';
  return new URLSearchParams(q);
}

function BookingConfirmed({ route = '' }) {
  useDoctorReviews();
  const consults = useConsults();
  const params = confirmedRouteParams(route);
  const consultId = params.get('consult') || '';
  const consult = (consultId && consults.find((c) => String(c.id) === String(consultId))) || latestConsult();
  const doc = consult ? DOC_BY_ID(consult.docId) : DOC_BY_ID(1);
  const isExistingBooking = !!consultId;
  const displayFee = consult?.paymentStatus === 'paid'
    ? (consult?.paidAmount ?? consult?.fee ?? doc.fee)
    : (consult?.fee ?? doc.fee);
  const fallbackDate = `Today · ${new Date().toLocaleDateString('en-IN', { month: 'short' })} ${new Date().getDate()}`;
  return (
    <PortalShell active="appointments" title={isExistingBooking ? 'Booking details' : 'Booking confirmed'} subtitle={isExistingBooking ? 'Your saved consultation details' : 'A confirmation has been sent to your registered email'}>
      <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' }}>
            {isExistingBooking ? 'Booking details.' : "You're all set."}
          </h1>
          <p className="ml-muted" style={{ fontSize: 15, margin: 0 }}>
            {isExistingBooking
              ? 'These are the details saved for this appointment. The dentist WhatsApp link was sent to your registered email.'
              : "We've reserved your slot. The dentist WhatsApp link will be sent to your registered email with this booking confirmation."}
          </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="Platform"       value={<><I.chat size={13} style={{ verticalAlign: -2 }}/> {window.bookingModeLabel ? window.bookingModeLabel(consult?.mode) : 'WhatsApp consultation'} · 15 min</>}/>
            <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' ? `₹${displayFee} · paid` : `₹${displayFee} · Pay now`}/>
            <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('/records')} className="ml-btn ml-btn--ghost" style={{ justifyContent: 'center', padding: '14px' }}>
            <I.upload size={14}/> Upload dental records
          </button>
          <button onClick={() => window.navigate('/appointments')} className="ml-btn ml-btn--primary" style={{ justifyContent: 'center', padding: '14px' }}>
            <I.calendar size={14}/> View appointment
          </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)' }}>Your WhatsApp link has been sent by email.</strong>{' '}
            For privacy, clinical details remain inside Molara. Your dentist can review them from the doctor dashboard before the WhatsApp consultation.
          </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;