/* EMPLOYEE VIEW — personal traceability + upcoming visits
   Hydrated: recibe { user, onNavigate, onLogout } desde MainApp.
   Carga citas reales desde /api/appointments/me.
   Cancelacion via PATCH /api/appointments/:id/cancel. */

const TabBtn = ({ active, n, children, onClick }) => (
  <button onClick={onClick} className={`relative h-10 px-1 text-[13.5px] font-medium transition
    ${active ? 'text-midnight-900' : 'text-slate-500 hover:text-midnight-700'}`}>
    {children}
    {n!=null && <span className={`ml-2 inline-flex items-center justify-center min-w-[18px] h-[18px] rounded-full text-[10.5px] tnum px-1.5
      ${active ? 'bg-midnight-900 text-white' : 'bg-slate-100 text-slate-500'}`}>{n}</span>}
    {active && <span className="absolute -bottom-px left-0 right-0 h-[2px] bg-midnight-900 rounded-full"/>}
  </button>
);

const HistoryRow = ({ h, last, onCancel }) => {
  const startDate = new Date(h.start_at);
  const dateStr   = startDate.toLocaleDateString('es-CO', { day:'2-digit', month:'short', year:'numeric' });
  const timeStr   = startDate.toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit', hour12:false });
  const specName  = h.specialty?.name || 'Consulta';
  const docName   = h.professional?.full_name || '';
  const mode      = h.mode === 'telemedicina' ? 'Telemed' : 'Presencial';
  const tone      = h.status === 'cancelled' ? 'rose' : h.status === 'confirmed' ? 'mint' : 'slate';
  const statusMap = { confirmed:'Confirmada', completed:'Atendida', cancelled:'Cancelada', in_progress:'En consulta', no_show:'No asistio' };

  return (
    <div className={`flex items-start gap-4 py-4 ${last ? '' : 'border-b border-line'}`}>
      <div className="w-[120px] shrink-0">
        <div className="text-[13px] font-medium text-midnight-900 tnum">{dateStr}</div>
        <div className="text-[11.5px] text-slate-500 tnum">{timeStr}</div>
      </div>
      <div className="relative shrink-0 pt-1.5">
        <div className={`h-2.5 w-2.5 rounded-full ring-4 ring-white
          ${tone==='rose' ? 'bg-rose-400' : tone==='mint' ? 'bg-mint-500' : 'bg-midnight-300'}`}/>
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <div className="text-[13.5px] font-semibold text-midnight-900">{specName}</div>
          {docName && <Badge tone="neutral">{docName}</Badge>}
          <span className="inline-flex items-center gap-1 text-[11.5px] text-slate-500">
            {mode==='Telemed' ? <I.video className="h-3 w-3"/> : <I.pin className="h-3 w-3"/>}
            {mode}
          </span>
        </div>
        {h.reason && <div className="text-[12.5px] text-slate-500 mt-1.5">{h.reason}</div>}
        <div className="mt-2 inline-flex items-center gap-3 text-[11.5px]">
          <span className="text-slate-400 tnum">{h.id.slice(0,8)}</span>
          {h.status === 'confirmed' && onCancel && (
            <button onClick={() => onCancel(h.id)} className="text-rose-600 hover:text-rose-700 font-medium">
              Cancelar
            </button>
          )}
          {h.google_meet_link && (
            <a href={h.google_meet_link} target="_blank" rel="noopener" className="text-mint-700 hover:text-mint-900 font-medium inline-flex items-center gap-1">
              <I.video className="h-3 w-3"/>Meet
            </a>
          )}
        </div>
      </div>
      <div className="shrink-0">
        <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11.5px] font-medium ring-1 ring-inset
          ${tone==='rose' ? 'bg-rose-50 text-rose-700 ring-rose-200' :
            tone==='mint' ? 'bg-mint-50 text-mint-700 ring-mint-200' :
                            'bg-slate-50 text-slate-600 ring-slate-200'}`}>
          <StatusDot tone={tone}/>{statusMap[h.status] || h.status}
        </span>
      </div>
    </div>
  );
};

const ICON_MAP = {
  cal: (p) => <I.cal {...p}/>,
  shield: (p) => <I.shield {...p}/>,
  clock: (p) => <I.clock {...p}/>,
  chart: (p) => <I.chart {...p}/>,
  bell: (p) => <I.bell {...p}/>,
  video: (p) => <I.video {...p}/>,
  user: (p) => <I.user {...p}/>,
  check: (p) => <I.check {...p}/>,
};

function EmployeeView({ user, onNavigate, onLogout }) {
  /* Fallback para design mode */
  const u = user || { full_name:'Valentina Aguirre', code:'1-0001', company:'Polyec', role:'employee', eps:'Compensar' };
  const initials = u.full_name.split(' ').map(n => n[0]).slice(0,2).join('').toUpperCase();
  const firstName = u.full_name.split(' ')[0];

  const [appointments, setAppointments] = React.useState({ upcoming:[], past:[], total:0 });
  const [loading, setLoading]           = React.useState(true);
  const [tab, setTab]                   = React.useState('upcoming');
  const [cancelling, setCancelling]     = React.useState(null);
  const [cancelError, setCancelError]   = React.useState('');
  const [promotions, setPromotions]     = React.useState([]);

  /* Cargar citas al montar */
  React.useEffect(() => {
    window.apiFetch('/api/appointments/me')
      .then(r => r.ok ? r.json() : { upcoming:[], past:[], total:0 })
      .then(data => setAppointments(data))
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  /* Cargar promociones de salud */
  React.useEffect(() => {
    window.apiFetch('/api/promotions')
      .then(r => r.ok ? r.json() : { promotions: [] })
      .then(data => setPromotions(data.promotions || []))
      .catch(() => {});
  }, []);

  /* Cancelar cita */
  const handleCancel = async (appointmentId) => {
    if (!confirm('Vas a cancelar esta cita. Esta accion no se puede deshacer.')) return;
    setCancelling(appointmentId);
    setCancelError('');
    try {
      const res = await window.apiFetch(`/api/appointments/${appointmentId}/cancel`, { method:'PATCH', body:JSON.stringify({ reason:'Cancelada por el empleado' }) });
      const data = await res.json();
      if (!res.ok) { setCancelError(data.error || 'Error al cancelar'); return; }
      /* Refrescar */
      const r2 = await window.apiFetch('/api/appointments/me');
      if (r2.ok) setAppointments(await r2.json());
    } catch { setCancelError('Error de conexion'); }
    finally { setCancelling(null); }
  };

  const next = appointments.upcoming[0];
  const listToShow = tab === 'upcoming' ? appointments.upcoming : appointments.past;

  /* Countdown para proxima cita */
  let countdown = null;
  if (next) {
    const diff = new Date(next.start_at) - new Date();
    if (diff > 0) {
      const days = Math.floor(diff / 86400000);
      const hours = Math.floor((diff % 86400000) / 3600000);
      const mins = Math.floor((diff % 3600000) / 60000);
      countdown = { days, hours, mins };
    }
  }

  const stats = [
    { label:'Citas totales', value: String(appointments.total), hint:'historico' },
    { label:'Pendientes',    value: String(appointments.upcoming.length), hint:'proximas' },
    { label:'Completadas',   value: String(appointments.past.filter(a => a.status === 'completed').length), hint:'atendidas' },
    { label:'Canceladas',    value: String(appointments.past.filter(a => a.status === 'cancelled').length), hint:'por ti o admin' },
  ];

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

      {/* HERO ROW */}
      <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]">Bienvenid@ de vuelta</div>
            <h1 className="text-[32px] font-semibold tracking-tight text-midnight-900 mt-2 leading-[1.1]">
              Hola, {firstName}.
            </h1>
            <p className="text-[14px] text-slate-500 mt-2 max-w-[520px]">
              Aqui esta tu trazabilidad medica. Solo tu y el personal autorizado pueden ver este historial.
            </p>
          </div>
          <button onClick={() => onNavigate && onNavigate('patient')} className="inline-flex items-center gap-2 h-11 px-5 rounded-xl bg-midnight-900 text-white text-[13.5px] font-semibold hover:bg-midnight-800">
            <I.plus className="h-4 w-4"/>Reservar nueva cita
          </button>
        </div>

        {/* quick stats */}
        <div className="mt-7 grid grid-cols-4 gap-3">
          {stats.map((s,i) => (
            <div key={i} className="bg-white rounded-2xl ring-1 ring-line p-4 shadow-card">
              <div className="text-[11.5px] text-slate-500 font-medium">{s.label}</div>
              <div className="text-[20px] font-semibold text-midnight-900 mt-1.5 tnum tracking-tight">{s.value}</div>
              <div className="text-[11px] text-slate-400 mt-0.5">{s.hint}</div>
            </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: content */}
          <div className="col-span-8 space-y-6">

            {/* NEXT APPOINTMENT HERO */}
            {next && (
              <div className="bg-midnight-900 text-white rounded-2xl p-7 shadow-pop overflow-hidden relative">
                <div className="absolute -right-20 -top-20 h-48 w-48 rounded-full bg-mint-400/15 blur-3xl"/>
                <div className="absolute -left-10 -bottom-10 h-32 w-32 rounded-full bg-midnight-600/40 blur-3xl"/>
                <div className="relative flex items-start justify-between gap-6">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.16em] text-mint-300 font-medium">
                      <span className="h-1.5 w-1.5 rounded-full bg-mint-400 animate-pulse"/>
                      Tu proxima cita
                    </div>
                    <div className="text-[26px] font-semibold tracking-tight mt-3 leading-tight">{next.specialty?.name || 'Consulta'}</div>
                    <div className="text-white/60 text-[13.5px] mt-1">{next.professional?.full_name}</div>

                    <div className="mt-5 grid grid-cols-4 gap-5">
                      <div>
                        <div className="text-[10.5px] uppercase tracking-wider text-white/40">Fecha</div>
                        <div className="text-[13.5px] font-medium mt-1 capitalize tnum">
                          {new Date(next.start_at).toLocaleDateString('es-CO', { weekday:'long', day:'numeric', month:'long' })}
                        </div>
                      </div>
                      <div>
                        <div className="text-[10.5px] uppercase tracking-wider text-white/40">Hora</div>
                        <div className="text-[13.5px] font-medium mt-1 tnum">
                          {new Date(next.start_at).toLocaleTimeString('es-CO', { hour:'2-digit', minute:'2-digit', hour12:false })}
                        </div>
                      </div>
                      <div>
                        <div className="text-[10.5px] uppercase tracking-wider text-white/40">Modalidad</div>
                        <div className="text-[13.5px] font-medium mt-1 inline-flex items-center gap-1.5">
                          {next.mode === 'telemedicina' ? <I.video className="h-3.5 w-3.5 text-mint-300"/> : <I.pin className="h-3.5 w-3.5 text-mint-300"/>}
                          {next.mode === 'telemedicina' ? 'Telemedicina' : 'Presencial'}
                        </div>
                      </div>
                      <div>
                        <div className="text-[10.5px] uppercase tracking-wider text-white/40">Ubicacion</div>
                        <div className="text-[13.5px] font-medium mt-1">{next.room || next.professional?.room || 'Por asignar'}</div>
                      </div>
                    </div>

                    <div className="mt-5 flex items-center gap-2">
                      {next.google_meet_link && (
                        <a href={next.google_meet_link} target="_blank" rel="noopener"
                          className="h-10 px-4 rounded-xl bg-mint-400 text-midnight-950 text-[12.5px] font-semibold hover:bg-mint-300 inline-flex items-center gap-1.5">
                          <I.video className="h-3.5 w-3.5"/>Unirse a Meet
                        </a>
                      )}
                      <button onClick={() => handleCancel(next.id)}
                        disabled={cancelling === next.id}
                        className="h-10 px-4 rounded-xl bg-white/5 text-white/70 text-[12.5px] font-medium hover:bg-white/10 disabled:opacity-50">
                        {cancelling === next.id ? 'Cancelando...' : 'Cancelar'}
                      </button>
                    </div>
                    {cancelError && <div className="mt-2 text-[12px] text-rose-300">{cancelError}</div>}
                  </div>

                  {/* countdown */}
                  {countdown && (
                    <div className="shrink-0 text-right">
                      <div className="text-[11px] uppercase tracking-wider text-white/40">Faltan</div>
                      {countdown.days > 0 ? (
                        <div className="text-[44px] font-semibold tnum tracking-tight leading-none mt-1">
                          {countdown.days}<span className="text-[18px] text-white/40 ml-1">d</span>
                        </div>
                      ) : (
                        <div className="text-[44px] font-semibold tnum tracking-tight leading-none mt-1">
                          {countdown.hours}<span className="text-[18px] text-white/40 ml-1">h</span>
                        </div>
                      )}
                      <div className="text-[11px] text-white/50 tnum">{countdown.mins} min</div>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* No upcoming */}
            {!loading && !next && (
              <div className="bg-white rounded-2xl ring-1 ring-line p-10 shadow-card text-center">
                <div className="text-[15px] font-semibold text-midnight-900">No tienes citas pendientes</div>
                <div className="text-[13px] text-slate-500 mt-2">Reserva una nueva cita para empezar.</div>
                <button onClick={() => onNavigate && onNavigate('patient')}
                  className="mt-4 inline-flex items-center gap-2 h-10 px-5 rounded-xl bg-midnight-900 text-white text-[13px] font-semibold hover:bg-midnight-800">
                  <I.plus className="h-4 w-4"/>Agendar cita
                </button>
              </div>
            )}

            {/* HISTORY */}
            <div className="bg-white rounded-2xl ring-1 ring-line shadow-card">
              <div className="px-6 pt-5 border-b border-line flex items-center gap-7">
                <TabBtn active={tab==='upcoming'} n={appointments.upcoming.length} onClick={() => setTab('upcoming')}>Proximas</TabBtn>
                <TabBtn active={tab==='past'} n={appointments.past.length} onClick={() => setTab('past')}>Historial</TabBtn>
              </div>

              <div className="px-6 py-2 relative">
                <div className="absolute left-[164px] top-6 bottom-6 w-px bg-line"/>
                {loading && <div className="py-8 text-center text-[13px] text-slate-400">Cargando citas...</div>}
                {!loading && listToShow.length === 0 && (
                  <div className="py-8 text-center text-[13px] text-slate-400">
                    {tab === 'upcoming' ? 'Sin citas pendientes' : 'Sin historial aun'}
                  </div>
                )}
                {listToShow.map((h, i) => (
                  <HistoryRow key={h.id} h={h} last={i===listToShow.length-1} onCancel={handleCancel}/>
                ))}
              </div>

              {appointments.total > 0 && (
                <div className="px-6 py-4 border-t border-line flex items-center justify-between text-[12px] text-slate-500">
                  <div>Total: {appointments.total} registros</div>
                </div>
              )}
            </div>
          </div>

          {/* RIGHT: sidebar */}
          <div className="col-span-4 space-y-4">

            {/* employee card */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-6 shadow-card">
              <div className="flex items-start gap-3">
                <div className="h-14 w-14 rounded-2xl bg-gradient-to-br from-mint-300 to-mint-500 grid place-items-center text-white text-[18px] font-semibold">{initials}</div>
                <div className="min-w-0">
                  <div className="text-[15px] font-semibold text-midnight-900 leading-tight">{u.full_name}</div>
                  <div className="text-[12px] text-slate-500 mt-0.5">{u.company || 'Empresa'}</div>
                  <div className="mt-1.5 inline-flex items-center gap-1.5 rounded-full bg-mint-50 ring-1 ring-inset ring-mint-200 px-2 py-0.5 text-[10.5px] font-medium tnum text-mint-700">
                    <I.shield className="h-3 w-3"/>{u.code}
                  </div>
                </div>
              </div>

              <div className="mt-5 grid grid-cols-2 gap-x-4 gap-y-3 text-[12px]">
                <div>
                  <div className="text-slate-400">EPS</div>
                  <div className="text-midnight-900 font-medium mt-0.5">{u.eps || 'N/A'}</div>
                </div>
                <div>
                  <div className="text-slate-400">Rol</div>
                  <div className="text-midnight-900 font-medium mt-0.5 capitalize">{u.role}</div>
                </div>
              </div>
            </div>

            {/* preventive reminders */}
            <div className="bg-white rounded-2xl ring-1 ring-line p-6 shadow-card">
              <div className="flex items-center justify-between">
                <div className="text-[13.5px] font-semibold text-midnight-900">Salud preventiva</div>
              </div>
              <div className="mt-4 space-y-3">
                {promotions.length === 0 && (
                  <div className="text-[12px] text-slate-400 py-2">Sin promociones activas</div>
                )}
                {promotions.map(r => {
                  const IconFn = ICON_MAP[r.icon] || ICON_MAP.shield;
                  return (
                    <div key={r.id} className="flex items-start gap-3 p-3 rounded-xl bg-paper ring-1 ring-line">
                      <div className={`h-8 w-8 rounded-lg grid place-items-center shrink-0
                        ${r.tone==='amber' ? 'bg-amber-50 text-amber-700' :
                          r.tone==='mint'  ? 'bg-mint-100 text-mint-700' :
                          r.tone==='rose'  ? 'bg-rose-50 text-rose-700' :
                                             'bg-slate-100 text-slate-600'}`}>
                        <IconFn className="h-4 w-4"/>
                      </div>
                      <div className="min-w-0 flex-1">
                        <div className="text-[12.5px] font-medium text-midnight-900 leading-tight">{r.title}</div>
                        <div className="text-[11.5px] text-slate-500 mt-0.5">{r.subtitle}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            {/* privacy note */}
            <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-midnight-50 text-midnight-700 grid place-items-center shrink-0">
                  <I.shield className="h-4 w-4"/>
                </div>
                <div>
                  <div className="text-[13px] font-semibold text-midnight-900">Tu historial es privado</div>
                  <div className="text-[12px] text-slate-500 mt-1 leading-relaxed">
                    Solo tu y el personal medico tratante pueden ver el detalle. RR.HH. ve solo el estado de asistencia.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.EmployeeView = EmployeeView;