/* DEMO BANNER — interactive walkthrough of the booking flow,
   embedded inside the Employee view. */

const TOUR_STEPS = [
  {
    n: 1,
    eyebrow: 'Paso 1 de 4',
    title: 'Elige la especialidad',
    body:  'Filtra por el área médica que necesitas. Ves cuántos profesionales hay disponibles en cada una.',
    accent:'Cardiología',
  },
  {
    n: 2,
    eyebrow: 'Paso 2 de 4',
    title: 'Selecciona al profesional',
    body:  'Compara experiencia, modalidad de atención (presencial o telemed) y horarios disponibles.',
    accent:'Dra. Helena R.',
  },
  {
    n: 3,
    eyebrow: 'Paso 3 de 4',
    title: 'Escoge fecha y franja horaria',
    body:  'Calendario con slots de 30 minutos. Los horarios ocupados aparecen tachados.',
    accent:'21 may · 09:30',
  },
  {
    n: 4,
    eyebrow: 'Paso 4 de 4',
    title: 'Confirma y listo',
    body:  'Revisa el resumen, confirma y recibe el recordatorio por correo. Sin costo, cubierto por la empresa.',
    accent:'Reserva confirmada',
  },
];

/* — Mini mock illustrations, one per step.
   Slightly stylized but use the real UI vocabulary so it feels like the actual app. */

const MockSpecialty = ({ active }) => {
  const items = [
    { glyph:'❤', label:'Cardio',  on:true  },
    { glyph:'+', label:'General', on:false },
    { glyph:'◯', label:'Pediat.', on:false },
    { glyph:'☐', label:'Psico.',  on:false },
  ];
  return (
    <div className="grid grid-cols-2 gap-2.5 w-full max-w-[280px]">
      {items.map((it, i) => (
        <div key={i}
          className={`rounded-xl p-3 ring-1 transition-all duration-500
            ${it.on
              ? 'bg-midnight-900 text-white ring-midnight-900 shadow-card scale-[1.04]'
              : 'bg-white text-midnight-900 ring-line opacity-70'}`}>
          <div className={`h-7 w-7 rounded-lg grid place-items-center font-mono text-[13px]
            ${it.on ? 'bg-white/10 text-mint-300' : 'bg-paper text-midnight-700'}`}>{it.glyph}</div>
          <div className="text-[11.5px] font-semibold mt-2 leading-tight">{it.label}</div>
        </div>
      ))}
    </div>
  );
};

const MockDoctor = () => {
  const rows = [
    { name:'Dra. Helena Restrepo', sub:'Cardiología clínica · 14 años', initials:'HR', on:true },
    { name:'Dr. Mateo Quintero',   sub:'Cardiología pediátrica',         initials:'MQ' },
    { name:'Dra. Lina Ocampo',     sub:'Electrofisiología',              initials:'LO' },
  ];
  return (
    <div className="w-full max-w-[280px] space-y-2">
      {rows.map((d,i) => (
        <div key={i}
          className={`rounded-xl p-2.5 ring-1 flex items-center gap-2.5 transition-all duration-500
            ${d.on ? 'bg-white ring-midnight-900 shadow-card scale-[1.02]' : 'bg-white/60 ring-line opacity-65'}`}>
          <div className="h-8 w-8 rounded-full bg-gradient-to-br from-midnight-700 to-midnight-900 text-white grid place-items-center text-[10px] font-semibold shrink-0">{d.initials}</div>
          <div className="min-w-0 flex-1">
            <div className="text-[11.5px] font-semibold text-midnight-900 truncate flex items-center gap-1.5">
              {d.name}
              {d.on && <span className="h-3 w-3 rounded-full bg-mint-500 grid place-items-center shrink-0"><I.check className="h-2 w-2 text-white"/></span>}
            </div>
            <div className="text-[10px] text-slate-500 mt-0.5 truncate">{d.sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const MockCalendar = () => {
  const days = ['L','M','M','J','V','S','D'];
  const cells = Array.from({length: 28}, (_, i) => i + 1);
  const selected = 21;
  const taken = new Set([3, 7, 14, 17, 25]);
  return (
    <div className="w-full max-w-[280px] flex gap-3">
      <div className="flex-1 bg-white rounded-xl ring-1 ring-line p-2.5">
        <div className="text-[10px] font-semibold text-midnight-900 mb-1.5 capitalize tnum">Mayo 2026</div>
        <div className="grid grid-cols-7 gap-0.5 text-[8px] text-slate-400 font-medium mb-0.5">
          {days.map((d,i)=>(<div key={i} className="h-4 grid place-items-center">{d}</div>))}
        </div>
        <div className="grid grid-cols-7 gap-0.5">
          {cells.map(d => (
            <div key={d}
              className={`h-5 rounded-md text-[9px] font-medium tnum grid place-items-center
                ${d===selected ? 'bg-midnight-900 text-white' :
                  taken.has(d) ? 'text-slate-300' :
                                 'text-midnight-800'}`}>{d}</div>
          ))}
        </div>
      </div>
      <div className="w-[90px] space-y-1">
        {['09:00','09:30','10:00','10:30'].map((t,i) => (
          <div key={t}
            className={`h-7 rounded-md text-[10px] font-medium tnum ring-1 grid place-items-center
              ${t==='09:30' ? 'bg-midnight-900 text-white ring-midnight-900' :
                i===2 ? 'bg-paper text-slate-300 ring-line line-through decoration-slate-300' :
                        'bg-white text-midnight-800 ring-line'}`}>
            {t}
          </div>
        ))}
      </div>
    </div>
  );
};

const MockConfirm = () => (
  <div className="w-full max-w-[280px] bg-midnight-900 text-white rounded-xl p-3.5 relative overflow-hidden">
    <div className="absolute -right-8 -top-8 h-20 w-20 rounded-full bg-mint-400/20 blur-2xl"/>
    <div className="relative">
      <div className="flex items-center gap-2">
        <div className="h-7 w-7 rounded-full bg-mint-400 grid place-items-center">
          <I.check className="h-4 w-4 text-midnight-950"/>
        </div>
        <div>
          <div className="text-[11px] uppercase tracking-wider text-mint-300 font-medium">Reserva confirmada</div>
          <div className="text-[12.5px] font-semibold leading-tight mt-0.5">Cardiología</div>
        </div>
      </div>
      <div className="mt-3 pt-3 border-t border-white/10 space-y-1.5">
        <div className="flex items-center justify-between text-[10.5px]">
          <span className="text-white/50 inline-flex items-center gap-1"><I.cal className="h-3 w-3"/>Fecha</span>
          <span className="tnum">jueves 21 may</span>
        </div>
        <div className="flex items-center justify-between text-[10.5px]">
          <span className="text-white/50 inline-flex items-center gap-1"><I.clock className="h-3 w-3"/>Hora</span>
          <span className="tnum">09:30</span>
        </div>
        <div className="flex items-center justify-between text-[10.5px]">
          <span className="text-white/50 inline-flex items-center gap-1"><I.pin className="h-3 w-3"/>Sede</span>
          <span>Consultorio 4</span>
        </div>
      </div>
    </div>
  </div>
);

const MOCKS = [MockSpecialty, MockDoctor, MockCalendar, MockConfirm];

function TourBanner() {
  const [step, setStep] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  // auto-advance
  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setStep(s => (s + 1) % TOUR_STEPS.length), 4200);
    return () => clearTimeout(t);
  }, [step, paused]);

  const current = TOUR_STEPS[step];
  const Mock = MOCKS[step];

  return (
    <div
      onMouseEnter={()=>setPaused(true)}
      onMouseLeave={()=>setPaused(false)}
      className="bg-white rounded-2xl ring-1 ring-line shadow-card overflow-hidden">

      <div className="grid grid-cols-12 min-h-[260px]">
        {/* LEFT — copy + controls */}
        <div className="col-span-7 p-7 flex flex-col">
          <div className="flex items-center gap-2 text-[10.5px] uppercase tracking-[0.16em] text-mint-700 font-semibold">
            <span className="h-1.5 w-1.5 rounded-full bg-mint-500"/>
            Guía rápida · agenda tu primera cita
          </div>

          {/* step indicator */}
          <div className="mt-4 flex items-center gap-2">
            {TOUR_STEPS.map((s,i) => (
              <button
                key={i}
                onClick={()=>setStep(i)}
                aria-label={`Paso ${i+1}`}
                className="flex-1 h-1 rounded-full bg-slate-100 overflow-hidden relative group">
                <div
                  className={`absolute inset-y-0 left-0 transition-all ease-linear
                    ${i < step ? 'w-full bg-midnight-900' :
                      i === step ? `bg-mint-500 ${paused ? '' : 'animate-tour-fill'}` :
                      'w-0 bg-mint-500'}`}
                  style={i === step && !paused ? { width: '100%', transitionDuration: '4200ms' } : i === step ? { width: '6%' } : undefined}
                />
              </button>
            ))}
          </div>

          <div className="mt-5 flex-1">
            <div key={step} className="animate-tour-fade">
              <div className="text-[11px] uppercase tracking-wider text-slate-400 font-medium tnum">{current.eyebrow}</div>
              <div className="text-[22px] font-semibold tracking-tight text-midnight-900 leading-tight mt-1.5">
                {current.title}
              </div>
              <div className="text-[13px] text-slate-500 mt-2 leading-relaxed max-w-[420px]">
                {current.body}
              </div>
            </div>
          </div>

          <div className="mt-5 flex items-center gap-2">
            <button
              onClick={()=>setStep(s => (s - 1 + TOUR_STEPS.length) % TOUR_STEPS.length)}
              className="h-9 w-9 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={()=>setStep(s => (s + 1) % TOUR_STEPS.length)}
              className="h-9 w-9 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 className="ml-auto flex items-center gap-2">
              <button className="h-9 px-3 text-[12.5px] text-slate-500 hover:text-midnight-800">
                Omitir guía
              </button>
              <button className="inline-flex items-center gap-1.5 h-9 px-4 rounded-lg bg-midnight-900 text-white text-[12.5px] font-semibold hover:bg-midnight-800">
                <I.plus className="h-3.5 w-3.5"/>
                Empezar ahora
              </button>
            </div>
          </div>
        </div>

        {/* RIGHT — mock illustration */}
        <div className="col-span-5 relative bg-paper border-l border-line overflow-hidden">
          {/* faint grid */}
          <div className="absolute inset-0 opacity-[0.5]"
               style={{backgroundImage:'linear-gradient(#E1E6F0 1px,transparent 1px),linear-gradient(90deg,#E1E6F0 1px,transparent 1px)', backgroundSize:'24px 24px'}}/>
          {/* mock device frame */}
          <div className="absolute inset-0 grid place-items-center p-6">
            <div key={step} className="animate-tour-pop">
              <Mock/>
            </div>
          </div>
          {/* accent chip */}
          <div className="absolute top-4 right-4 inline-flex items-center gap-1.5 rounded-full bg-white ring-1 ring-line shadow-card px-2.5 py-1 text-[10.5px] font-medium text-midnight-800">
            <span className="h-1.5 w-1.5 rounded-full bg-mint-500"/>
            {current.accent}
          </div>
        </div>
      </div>

      {/* injected animation styles — scoped to the banner */}
      <style>{`
        @keyframes tour-fade {
          0%   { opacity: 0; transform: translateY(6px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        .animate-tour-fade { animation: tour-fade .45s ease-out both; }

        @keyframes tour-pop {
          0%   { opacity: 0; transform: translateY(10px) scale(.97); }
          60%  { opacity: 1; }
          100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .animate-tour-pop { animation: tour-pop .55s cubic-bezier(.2,.7,.2,1) both; }

        @keyframes tour-fill {
          from { width: 0%; }
          to   { width: 100%; }
        }
        .animate-tour-fill { animation: tour-fill 4200ms linear forwards; }
      `}</style>
    </div>
  );
}

window.TourBanner = TourBanner;