/* PATIENT VIEW — booking flow (100% hidratado desde API)
   1) Specialty  2) Professional  3) Date & time  4) Summary CTA
   Recibe { user, onNavigate, onLogout } desde MainApp. */

function buildMonth(year, month) {
  const first = new Date(year, month, 1);
  const startDow = (first.getDay() + 6) % 7;
  const daysInMonth = new Date(year, month+1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);
  return cells;
}

const StepHeader = ({ n, title, sub, done }) => (
  <div className="flex items-center gap-3 mb-5">
    <div className={`h-7 w-7 rounded-full grid place-items-center text-[12px] font-semibold tnum
      ${done ? 'bg-mint-500 text-white' : 'bg-midnight-900 text-white'}`}>
      {done ? <I.check className="h-4 w-4"/> : n}
    </div>
    <div>
      <div className="text-[15px] font-semibold text-midnight-900 leading-none">{title}</div>
      {sub && <div className="text-[12.5px] text-slate-500 mt-1 leading-none">{sub}</div>}
    </div>
  </div>
);

const GLYPHS = { 'Cardiologia':'❤','Dermatologia':'◐','Medicina general':'+','Ginecologia':'✦',
  'Neurologia':'~','Odontologia':'◇','Pediatria':'◯','Psicologia':'□','Laboratorio':'⊕',
  'Oftalmologia':'◎','Nutricion':'♡','Fisioterapia':'❀' };
function glyphFor(name) { return GLYPHS[Object.keys(GLYPHS).find(k => (name||'').toLowerCase().includes(k.toLowerCase()))] || '•'; }

const SpecialtyCard = ({ s, active, onClick }) => (
  <button
    onClick={onClick}
    className={`group text-left rounded-2xl p-4 ring-1 transition
      ${active
        ? 'bg-midnight-900 text-white ring-midnight-900 shadow-card'
        : 'bg-white text-midnight-900 ring-line hover:ring-midnight-200 hover:-translate-y-0.5 hover:shadow-card'}`}>
    <div className={`h-9 w-9 rounded-xl grid place-items-center text-[16px] mb-3 font-mono
      ${active ? 'bg-white/10 text-mint-300' : 'bg-paper text-midnight-700'}`}>
      {s.glyph || glyphFor(s.name)}
    </div>
    <div className="text-[13.5px] font-semibold leading-tight">{s.name}</div>
    <div className={`text-[11.5px] mt-1 ${active ? 'text-white/60' : 'text-slate-500'}`}>{s._profCount ? `${s._profCount} profesionales` : ''}</div>
  </button>
);

const DoctorCard = ({ d, active, onClick }) => {
  const ini = d.initials || d.full_name.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase();
  const modeTxt = (d.modes || []).map(m => m === 'telemedicina' ? 'Telemed' : 'Presencial').join(' · ') || 'Presencial';
  return (
    <button
      onClick={onClick}
      className={`text-left rounded-2xl p-4 ring-1 bg-white transition flex gap-3 items-start
        ${active ? 'ring-midnight-900 shadow-card' : 'ring-line hover:ring-midnight-200'}`}>
      <div className="h-11 w-11 rounded-full bg-gradient-to-br from-midnight-700 to-midnight-900 text-white grid place-items-center text-[13px] font-semibold shrink-0">
        {ini}
      </div>
      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <div className="text-[13.5px] font-semibold text-midnight-900 truncate">{d.full_name}</div>
          {active && <span className="h-4 w-4 rounded-full bg-mint-500 grid place-items-center"><I.check className="h-3 w-3 text-white"/></span>}
        </div>
        <div className="text-[12px] text-slate-500 mt-0.5">{d.sub_specialty || d.specialties?.name || ''}</div>
        <div className="flex items-center gap-3 mt-2 text-[11.5px] text-slate-600">
          {d.rating && <span className="inline-flex items-center gap-1"><span className="text-mint-600 tnum">{d.rating}</span></span>}
          {d.experience_years && <><span className="text-slate-300">.</span><span className="tnum">{d.experience_years} anos</span></>}
          <span className="text-slate-300">.</span>
          <span>{modeTxt}</span>
        </div>
        <div className="text-[12px] text-slate-500 mt-2 inline-flex items-center gap-1.5">
          <I.clock className="h-3.5 w-3.5 text-mint-600"/><span className="tnum text-midnight-800 font-medium">15 min</span> . sin costo
        </div>
      </div>
    </button>
  );
};

const Calendar = ({ year, month, selected, onSelect, onPrev, onNext, allowedDays }) => {
  const cells = React.useMemo(() => buildMonth(year, month), [year, month]);
  const today = new Date();
  const isToday = (d) => d && today.getFullYear()===year && today.getMonth()===month && today.getDate()===d;
  const isWeekend = (idx) => idx % 7 === 5 || idx % 7 === 6;
  const monthName = new Date(year, month).toLocaleDateString('es-CO',{month:'long', year:'numeric'});

  /* allowedDays = Set de dayOfWeek (0=dom..6=sab), null = todos permitidos */
  function isDayAllowed(d, gridIdx) {
    if (!allowedDays) return true;
    /* gridIdx en el grid L-D: 0=lun, 1=mar, ..., 6=dom. Convertir a JS dayOfWeek (0=dom,1=lun,...) */
    const colInGrid = gridIdx % 7;                    // 0=L, 1=M, 2=M, 3=J, 4=V, 5=S, 6=D
    const jsDow = colInGrid === 6 ? 0 : colInGrid + 1; // L=1, M=2, ..., S=6, D=0
    return allowedDays.has(jsDow);
  }

  return (
    <div>
      <div className="flex items-center justify-between mb-4">
        <div className="text-[14px] font-semibold text-midnight-900 capitalize tnum">{monthName}</div>
        <div className="flex items-center gap-1">
          <button onClick={onPrev} className="h-8 w-8 grid place-items-center rounded-lg ring-1 ring-line text-midnight-700 hover:bg-paper">
            <I.chevL className="h-4 w-4"/>
          </button>
          <button onClick={onNext} className="h-8 w-8 grid place-items-center rounded-lg ring-1 ring-line text-midnight-700 hover:bg-paper">
            <I.chevR className="h-4 w-4"/>
          </button>
        </div>
      </div>

      <div className="grid grid-cols-7 gap-1 text-[11px] text-slate-400 font-medium mb-1">
        {['L','M','M','J','V','S','D'].map((d,i)=>(
          <div key={i} className="h-7 grid place-items-center">{d}</div>
        ))}
      </div>
      <div className="grid grid-cols-7 gap-1">
        {cells.map((d, i) => {
          if (!d) return <div key={i} className="h-10"/>;
          const isSel = selected === d;
          const past = (year === today.getFullYear() && month === today.getMonth() && d < today.getDate());
          const notAllowed = !isDayAllowed(d, i);
          const disabled = past || isWeekend(i) || notAllowed;
          return (
            <button
              key={i}
              disabled={disabled}
              onClick={() => onSelect(d)}
              className={`h-10 rounded-lg text-[13px] font-medium tnum relative transition
                ${isSel
                  ? 'bg-midnight-900 text-white shadow-card'
                  : disabled
                    ? 'text-slate-300 cursor-not-allowed'
                    : 'text-midnight-800 hover:bg-paper'}
                ${isToday(d) && !isSel ? 'ring-1 ring-mint-400' : ''}
              `}>
              {d}
            </button>
          );
        })}
      </div>

      <div className="mt-4 pt-4 border-t border-line flex items-center gap-4 text-[11.5px] text-slate-500">
        <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-full bg-midnight-900"/>Seleccionado</span>
        <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-full bg-mint-400"/>Disponible</span>
        <span className="inline-flex items-center gap-1.5"><span className="h-2 w-2 rounded-full bg-slate-200"/>No disponible</span>
      </div>
    </div>
  );
};

function PatientView({ user, onNavigate, onLogout } = {}) {
  const now = new Date();
  const [month, setMonth]  = React.useState(now.getMonth());
  const [year, setYear]    = React.useState(now.getFullYear());
  const [day, setDay]      = React.useState(null);
  const [slot, setSlot]    = React.useState(null);
  const [mode, setMode]    = React.useState('present');

  /* ── Datos cargados de la API ─────────────────────── */
  const [specialties, setSpecialties]       = React.useState([]);
  const [loadingSpecs, setLoadingSpecs]     = React.useState(true);
  const [selectedSpec, setSelectedSpec]     = React.useState(null);   // specialty obj

  const [professionals, setProfessionals]   = React.useState([]);
  const [loadingProfs, setLoadingProfs]     = React.useState(false);
  const [selectedProf, setSelectedProf]     = React.useState(null);   // professional obj

  const [apiSlots,       setApiSlots]       = React.useState(null);
  const [loadingSlots,   setLoadingSlots]   = React.useState(false);
  const [allowedDays,    setAllowedDays]    = React.useState(null); // null = all days, Set of dayOfWeek numbers

  const [booking,        setBooking]        = React.useState(false);
  const [booked,         setBooked]         = React.useState(null);
  const [bookingError,   setBookingError]   = React.useState(null);

  /* ── Beneficiarios (para seleccionar "para quien") ── */
  const [beneficiaries, setBeneficiaries]   = React.useState([]);
  const [bookingFor, setBookingFor]         = React.useState('self'); // 'self' | beneficiary_id

  const currentUser = user || { full_name: 'Empleado Demo', code: '0-0000', company: '' };

  /* ── Cargar especialidades (solo las que tienen profesionales con calendario) ── */
  React.useEffect(() => {
    if (!window.apiFetch) { setLoadingSpecs(false); return; }
    Promise.all([
      window.apiFetch('/api/specialties').then(r => r.json()),
      window.apiFetch('/api/professionals').then(r => r.json()),
    ]).then(([specData, profData]) => {
      const allSpecs = specData.specialties || [];
      const allProfs = profData.professionals || [];
      /* Contar profesionales por specialty_id */
      const countMap = {};
      allProfs.forEach(p => {
        const sid = p.specialties?.id;
        if (sid) countMap[sid] = (countMap[sid] || 0) + 1;
      });
      /* Solo especialidades con al menos 1 profesional disponible */
      const available = allSpecs
        .filter(s => countMap[s.id])
        .map(s => ({ ...s, _profCount: countMap[s.id] }));
      setSpecialties(available);
      if (available.length > 0) setSelectedSpec(available[0]);
    })
    .catch(() => {})
    .finally(() => setLoadingSpecs(false));
  }, []);

  /* ── Cargar beneficiarios ─────────────────────────── */
  React.useEffect(() => {
    if (!window.apiFetch) return;
    window.apiFetch('/api/employees/me/beneficiaries')
      .then(r => r.ok ? r.json() : { beneficiaries:[] })
      .then(d => setBeneficiaries((d.beneficiaries || []).filter(b => (b.status||'activo').toLowerCase() === 'activo')))
      .catch(() => {});
  }, []);

  /* ── Al cambiar especialidad: cargar profesionales ── */
  React.useEffect(() => {
    if (!window.apiFetch || !selectedSpec) { setProfessionals([]); return; }
    setLoadingProfs(true);
    setSelectedProf(null);
    setApiSlots(null);
    setSlot(null);

    window.apiFetch(`/api/professionals?specialty=${selectedSpec.id}`)
      .then(r => r.json())
      .then(({ professionals: profs }) => {
        setProfessionals(profs || []);
        if (profs && profs.length > 0) setSelectedProf(profs[0]);
      })
      .catch(() => setProfessionals([]))
      .finally(() => setLoadingProfs(false));
  }, [selectedSpec]);

  /* ── Al cambiar profesional: cargar dias permitidos por empresa ── */
  React.useEffect(() => {
    if (!window.apiFetch || !selectedProf) { setAllowedDays(null); return; }
    window.apiFetch(`/api/professionals/${selectedProf.id}/available-days`)
      .then(r => r.json())
      .then(({ days }) => {
        if (days && days.length > 0) {
          setAllowedDays(new Set(days.map(d => d.dayOfWeek)));
        } else {
          setAllowedDays(null);
        }
      })
      .catch(() => setAllowedDays(null));
  }, [selectedProf]);

  /* ── Al seleccionar fecha: cargar slots reales ────── */
  React.useEffect(() => {
    if (!window.apiFetch || !selectedProf || !day) return;
    const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;

    setLoadingSlots(true);
    setApiSlots(null);
    setSlot(null);

    window.apiFetch(`/api/professionals/${selectedProf.id}/slots?date=${dateStr}`)
      .then(r => r.json())
      .then(({ slots }) => setApiSlots(slots || []))
      .catch(() => setApiSlots([]))
      .finally(() => setLoadingSlots(false));
  }, [day, year, month, selectedProf]);

  /* ── Confirmar reserva ──────────────────────────── */
  async function handleConfirm() {
    if (!window.apiFetch) return;
    if (!day || !slot || !selectedProf || !selectedSpec) return;

    setBooking(true);
    setBookingError(null);

    try {
      const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`;
      const startAt = slot.includes('T') ? slot : `${dateStr}T${slot}:00`;

      const payload = {
        professional_id: selectedProf.id,
        specialty_id:    selectedSpec.id,
        start_at:        startAt,
        mode:            mode === 'tele' ? 'telemedicina' : 'presencial',
      };
      if (bookingFor !== 'self') payload.beneficiary_id = bookingFor;

      const res = await window.apiFetch('/api/appointments', {
        method: 'POST',
        body: JSON.stringify(payload),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Error al confirmar la cita.');
      setBooked(data);
    } catch (err) {
      setBookingError(err.message);
    } finally {
      setBooking(false);
    }
  }

  const selectedDate = day
    ? new Date(year, month, day).toLocaleDateString('es-CO', { weekday:'long', day:'2-digit', month:'long' })
    : null;

  return (
    <div className="bg-paper min-h-full font-sans text-ink">
      <TopNav user={currentUser} currentView="patient" onNavigate={onNavigate} onLogout={onLogout}/>

      {/* HERO */}
      <section className="max-w-[1200px] mx-auto px-10 pt-10 pb-6">
        <div className="flex items-end justify-between">
          <div>
            <div className="text-[12px] font-medium text-mint-600 uppercase tracking-[0.14em]">Nueva consulta</div>
            <h1 className="text-[34px] font-semibold tracking-tight text-midnight-900 mt-2 leading-[1.1]">
              Reserva tu cita en <span className="text-midnight-500">la clinica interna</span>.
            </h1>
            <p className="text-[14px] text-slate-500 mt-2 max-w-[540px]">
              Servicio medico cubierto por la empresa. Atencion presencial en sede o por telemedicina, sin costo para ti.
            </p>
          </div>
          <div className="hidden md:flex items-center gap-2 text-[12px] text-slate-500">
            <I.shield className="h-4 w-4 text-mint-500"/>
            Datos protegidos . HIPAA / Ley 1581
          </div>
        </div>
      </section>

      {/* BODY GRID */}
      <section className="max-w-[1200px] mx-auto px-10 pb-16">
        <div className="grid grid-cols-12 gap-6">

          {/* LEFT */}
          <div className="col-span-8 space-y-6">

            {/* STEP 0: Para quien */}
            {beneficiaries.length > 0 && (
              <div className="bg-white rounded-2xl ring-1 ring-line p-7 shadow-card">
                <StepHeader n="0" done={true} title="Para quien es la cita?" sub="Selecciona si es para ti o un beneficiario."/>
                <div className="flex flex-wrap gap-2">
                  <button onClick={() => setBookingFor('self')}
                    className={`h-10 px-4 rounded-xl text-[12.5px] font-medium ring-1 transition
                      ${bookingFor === 'self' ? 'bg-midnight-900 text-white ring-midnight-900' : 'bg-white text-midnight-800 ring-line hover:ring-midnight-300'}`}>
                    <I.user className="h-3.5 w-3.5 inline mr-1.5"/>Para mi (titular)
                  </button>
                  {beneficiaries.map(b => (
                    <button key={b.id} onClick={() => setBookingFor(b.id)}
                      className={`h-10 px-4 rounded-xl text-[12.5px] font-medium ring-1 transition
                        ${bookingFor === b.id ? 'bg-midnight-900 text-white ring-midnight-900' : 'bg-white text-midnight-800 ring-line hover:ring-midnight-300'}`}>
                      {b.name} <span className="text-[10.5px] ml-1 opacity-60">({b.relation})</span>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* STEP 1: Especialidades */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-7 shadow-card">
              <StepHeader n="1" done={!!selectedSpec} title="Selecciona la especialidad" sub="Filtra por area medica para ver profesionales disponibles."/>
              {loadingSpecs ? (
                <div className="grid grid-cols-4 gap-3">
                  {[0,1,2,3].map(i => <div key={i} className="h-[100px] rounded-2xl bg-slate-100 animate-pulse"/>)}
                </div>
              ) : (
                <div className="grid grid-cols-4 gap-3">
                  {specialties.map(s => (
                    <SpecialtyCard key={s.id} s={s} active={selectedSpec?.id===s.id} onClick={() => setSelectedSpec(s)}/>
                  ))}
                </div>
              )}
            </div>

            {/* STEP 2: Profesionales */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-7 shadow-card">
              <StepHeader n="2" done={!!selectedProf} title="Elige profesional"
                sub={selectedSpec ? `${professionals.length} disponibles en ${selectedSpec.name.toLowerCase()}` : 'Selecciona una especialidad primero'}/>
              {loadingProfs ? (
                <div className="grid grid-cols-3 gap-3">
                  {[0,1,2].map(i => <div key={i} className="h-[120px] rounded-2xl bg-slate-100 animate-pulse"/>)}
                </div>
              ) : professionals.length === 0 ? (
                <div className="py-6 text-center text-[13px] text-slate-400">
                  {selectedSpec ? 'No hay profesionales activos en esta especialidad.' : 'Selecciona una especialidad.'}
                </div>
              ) : (
                <div className="grid grid-cols-3 gap-3">
                  {professionals.map(d => (
                    <DoctorCard key={d.id} d={d} active={selectedProf?.id===d.id} onClick={() => setSelectedProf(d)}/>
                  ))}
                </div>
              )}
            </div>

            {/* STEP 3: Fecha y hora */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-7 shadow-card">
              <StepHeader n="3" done={!!(day && slot)} title="Fecha y hora" sub="Hora local Bogota (GMT-5). Slots de 15 minutos."/>

              <div className="grid grid-cols-12 gap-8">
                <div className="col-span-6">
                  <Calendar
                    year={year} month={month} selected={day}
                    onSelect={setDay}
                    onPrev={()=>{ if (month===0) { setMonth(11); setYear(y=>y-1);} else setMonth(m=>m-1);} }
                    onNext={()=>{ if (month===11){ setMonth(0);  setYear(y=>y+1);} else setMonth(m=>m+1);} }
                    allowedDays={allowedDays}
                  />
                </div>
                <div className="col-span-6 space-y-5">
                  {!selectedProf && (
                    <div className="py-8 text-center text-[13px] text-slate-400">Selecciona un profesional primero.</div>
                  )}
                  {selectedProf && !day && (
                    <div className="py-8 text-center text-[13px] text-slate-400">Selecciona una fecha en el calendario.</div>
                  )}
                  {loadingSlots ? (
                    <div className="space-y-3">
                      {[0,1].map(i=>(
                        <div key={i}>
                          <div className="h-3 w-20 bg-slate-200 rounded animate-pulse mb-2.5"/>
                          <div className="grid grid-cols-4 gap-2">
                            {[...Array(6)].map((_,j)=>(
                              <div key={j} className="h-10 bg-slate-100 rounded-lg animate-pulse"/>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : apiSlots !== null ? (
                    apiSlots.length === 0 ? (
                      <div className="py-8 text-center text-[13px] text-slate-400">
                        No hay horarios disponibles para este dia.
                      </div>
                    ) : (
                      <>
                        {['morning','afternoon'].map(period => {
                          const periodSlots = apiSlots.filter(s => s.period === period);
                          if (!periodSlots.length) return null;
                          return (
                            <div key={period}>
                              <div className="flex items-center justify-between mb-2.5">
                                <div className="text-[12px] font-medium text-slate-500 uppercase tracking-wider">
                                  {period === 'morning' ? 'Manana' : 'Tarde'}
                                </div>
                                <div className="text-[11.5px] text-slate-400 tnum">{periodSlots.length} libres</div>
                              </div>
                              <div className="grid grid-cols-4 gap-2">
                                {periodSlots.map(s => (
                                  <button key={s.start}
                                    onClick={() => setSlot(s.start)}
                                    className={`h-10 rounded-lg text-[13px] font-medium tnum ring-1 transition
                                      ${slot === s.start
                                        ? 'bg-midnight-900 text-white ring-midnight-900'
                                        : 'bg-white text-midnight-800 ring-line hover:ring-midnight-300 hover:bg-paper'}`}>
                                    {s.label}
                                  </button>
                                ))}
                              </div>
                            </div>
                          );
                        })}
                      </>
                    )
                  ) : null}
                </div>
              </div>

              <div className="mt-6 pt-5 border-t border-line flex items-center gap-2">
                {[
                  {id:'present', label:'Presencial', icon:<I.pin className="h-3.5 w-3.5"/>},
                  {id:'tele',    label:'Telemedicina', icon:<I.video className="h-3.5 w-3.5"/>},
                ].map(m => (
                  <button key={m.id} onClick={()=>setMode(m.id)}
                    className={`inline-flex items-center gap-2 rounded-full px-3.5 h-9 text-[12.5px] font-medium ring-1 transition
                      ${mode===m.id
                        ? 'bg-midnight-900 text-white ring-midnight-900'
                        : 'bg-white text-midnight-800 ring-line hover:bg-paper'}`}>
                    {m.icon}{m.label}
                  </button>
                ))}
                <div className="ml-auto text-[12px] text-slate-500">
                  Cambia el modo de atencion en cualquier momento.
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT: SUMMARY */}
          <div className="col-span-4">
            <div className="sticky top-6 space-y-4">
              <div className="bg-midnight-900 text-white rounded-2xl p-6 shadow-pop overflow-hidden relative">
                <div className="absolute -right-10 -top-10 h-32 w-32 rounded-full bg-mint-400/15 blur-2xl"/>
                <div className="text-[11.5px] uppercase tracking-[0.16em] text-mint-300 font-medium">Resumen de la cita</div>

                {/* Para quien */}
                {bookingFor !== 'self' && (
                  <div className="mt-3 flex items-center gap-2 bg-white/5 rounded-lg px-3 py-2 ring-1 ring-white/10 text-[12px]">
                    <I.user className="h-3.5 w-3.5 text-mint-300"/>
                    <span className="text-white/80">Para: <span className="text-white font-medium">{beneficiaries.find(b => b.id === bookingFor)?.name || 'Beneficiario'}</span></span>
                  </div>
                )}

                <div className="mt-5 flex items-start gap-3">
                  <div className="h-12 w-12 rounded-2xl bg-white/10 grid place-items-center text-[18px] font-mono text-mint-300">
                    {selectedSpec ? glyphFor(selectedSpec.name) : '?'}
                  </div>
                  <div>
                    <div className="text-[15px] font-semibold leading-tight">{selectedSpec?.name || 'Especialidad'}</div>
                    <div className="text-[12.5px] text-white/60 mt-0.5">{selectedProf?.full_name || 'Profesional'}</div>
                    <div className="text-[11.5px] text-white/40 mt-0.5">{selectedProf?.sub_specialty || ''}</div>
                  </div>
                </div>

                <div className="mt-5 space-y-3">
                  <div className="flex items-center justify-between text-[13px] py-2 border-b border-white/10">
                    <span className="inline-flex items-center gap-2 text-white/60"><I.cal className="h-4 w-4"/>Fecha</span>
                    <span className="capitalize tnum">{selectedDate || 'Seleccionar'}</span>
                  </div>
                  <div className="flex items-center justify-between text-[13px] py-2 border-b border-white/10">
                    <span className="inline-flex items-center gap-2 text-white/60"><I.clock className="h-4 w-4"/>Hora</span>
                    <span className="tnum">{slot ? (slot.includes('T') ? new Date(slot).toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit', hour12:true }) : slot) : 'Seleccionar'}</span>
                  </div>
                  <div className="flex items-center justify-between text-[13px] py-2 border-b border-white/10">
                    <span className="inline-flex items-center gap-2 text-white/60">
                      {mode==='present' ? <I.pin className="h-4 w-4"/> : <I.video className="h-4 w-4"/>}
                      Modalidad
                    </span>
                    <span>{mode==='present' ? 'Presencial' : 'Telemedicina'}</span>
                  </div>
                  <div className="flex items-center justify-between text-[13px] py-2">
                    <span className="inline-flex items-center gap-2 text-white/60"><I.user className="h-4 w-4"/>Duracion</span>
                    <span className="tnum">15 min</span>
                  </div>
                </div>

                <div className="mt-5 pt-5 border-t border-white/10 grid grid-cols-2 gap-4">
                  <div>
                    <div className="text-[11px] uppercase tracking-wider text-white/40">Consultorio</div>
                    <div className="text-[13px] font-medium mt-1">{selectedProf?.room || 'Por asignar'}</div>
                  </div>
                  <div>
                    <div className="text-[11px] uppercase tracking-wider text-white/40">Cobertura</div>
                    <div className="text-[13px] font-medium mt-1 inline-flex items-center gap-1.5">
                      <span className="h-1.5 w-1.5 rounded-full bg-mint-400"/>Empresa
                    </div>
                  </div>
                </div>

                {bookingError && (
                  <div className="mt-4 flex items-start gap-2 bg-rose-900/30 ring-1 ring-rose-500/40 text-rose-200 text-[12px] px-3 py-2.5 rounded-xl">
                    <svg className="h-3.5 w-3.5 shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
                    </svg>
                    <span>{bookingError}</span>
                  </div>
                )}

                {booked ? (
                  <div className="mt-5 bg-mint-400/20 ring-1 ring-mint-400/50 rounded-xl p-4 text-center space-y-2">
                    <div className="text-mint-300 text-[13px] font-semibold">Cita confirmada!</div>
                    <div className="text-white/60 text-[12px]">Revisa tu correo corporativo y Google Calendar.</div>
                    {booked.google_meet_link && (
                      <a href={booked.google_meet_link} target="_blank"
                        className="inline-flex items-center gap-1.5 text-mint-300 text-[12px] font-medium hover:text-mint-200">
                        <I.video className="h-3.5 w-3.5"/> Unirse a Google Meet
                      </a>
                    )}
                    <button onClick={() => { setBooked(null); setSlot(null); setDay(null); }}
                      className="block w-full mt-2 h-9 rounded-lg bg-white/10 text-white/70 text-[12px] hover:bg-white/15 transition">
                      Agendar otra cita
                    </button>
                  </div>
                ) : (
                  <>
                    <button
                      onClick={handleConfirm}
                      disabled={booking || !day || !slot || !selectedProf}
                      className="mt-5 w-full h-12 rounded-xl bg-mint-400 text-midnight-950 font-semibold text-[14px] hover:bg-mint-300 transition flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                      {booking ? (
                        <>
                          <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"/>
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                          </svg>
                          Confirmando...
                        </>
                      ) : (
                        <>Confirmar reserva <I.chevR className="h-4 w-4"/></>
                      )}
                    </button>
                  </>
                )}
              </div>

              {/* HELPER CARD */}
              <div className="bg-white rounded-2xl ring-1 ring-line p-5 shadow-card">
                <div className="flex items-start gap-3">
                  <div className="h-8 w-8 rounded-lg bg-mint-100 text-mint-700 grid place-items-center">
                    <I.shield className="h-4 w-4"/>
                  </div>
                  <div>
                    <div className="text-[13px] font-semibold text-midnight-900">Politica de reserva</div>
                    <div className="text-[12px] text-slate-500 mt-1 leading-relaxed">
                      Puedes reprogramar o cancelar hasta <span className="text-midnight-800 font-medium">2h antes</span>. RR.HH. registra las inasistencias reiteradas.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.PatientView = PatientView;