// Live booking calendar — the hero centerpiece.
// Mocks "Studio Lia · estúdio de beleza" with appointments staggering in.

const SBCalendar = () => {
  // Each appt: day idx (0..5), startHour (decimal), durationHours, service, client, tone, delay
  const appts = [
  { d: 0, s: 9.5, dur: 1.0, service: "Manicure", client: "Camila A.", tone: "clay", delay: 0.4 },
  { d: 0, s: 11, dur: 1.5, service: "Eletricista", client: "Júlia P.", tone: "rose", delay: 0.7 },
  { d: 1, s: 9, dur: 2, service: "Coloração + Corte", client: "Marina V.", tone: "sand", delay: 1.0 },
  { d: 1, s: 14, dur: 1, service: "Aula de piano", client: "Helena R.", tone: "green", delay: 1.3 },
  { d: 2, s: 10, dur: 1.5, service: "Manicure + Pedicure", client: "Larissa M.", tone: "clay", delay: 1.55 },
  { d: 2, s: 15.5, dur: 1.5, service: "Mecânico", client: "Ana B.", tone: "rose", delay: 1.8 },
  { d: 3, s: 9, dur: 1, service: "Limpeza de Pele", client: "Sofia C.", tone: "sand", delay: 2.0 },
  { d: 3, s: 13.5, dur: 1.5, service: "Cílios Volume", client: "Bia F.", tone: "ink", delay: 2.25 },
  { d: 4, s: 10.5, dur: 1, service: "Manicure Express", client: "Carla N.", tone: "clay", delay: 2.5 },
  { d: 4, s: 16, dur: 1, service: "Corte + Escova", client: "Renata L.", tone: "green", delay: 3.0 },
  { d: 5, s: 11, dur: 2, service: "Dia da Noiva", client: "Isabela G.", tone: "rose", delay: 3.4 }];


  const days = [
  { lab: "SEG", num: 11 },
  { lab: "TER", num: 12 },
  { lab: "QUA", num: 13 },
  { lab: "QUI", num: 14, today: true },
  { lab: "SEX", num: 15 },
  { lab: "SÁB", num: 16 }];


  // Visible time range 9 → 18
  const startHour = 9;
  const endHour = 18;
  const rowH = 44; // matches CSS .time-row height
  const hours = endHour - startHour;
  const bodyHeight = hours * rowH;

  // "Now" line — Thursday-ish, 13:10
  const nowHour = 13 + 10 / 60;
  const nowTop = (nowHour - startHour) * rowH;

  return (
    <div className="cal-frame" aria-label="Visualização da agenda do estúdio Lia, com horários se preenchendo em tempo real.">
      <div className="cal-bar">
        <div className="dots"><span /><span /><span /></div>
        <div className="biz">
          <div className="biz-logo">L</div>
          <span>studiopousa.com.br <span style={{ opacity: 0.5, marginLeft: 4 }}>· painel</span></span>
        </div>
        <div className="url">studipousa.com.br/admin/agenda</div>
        <div className="live"><span className="pulse" />ao vivo</div>
      </div>

      <div className="cal-sub">
        <div>
          <h4>Esta semana</h4>
          <div className="week mono">11 — 16 nov · 11 agendamentos</div>
        </div>
        <div className="nav-arrows">
          <button aria-label="semana anterior">‹</button>
          <button aria-label="próxima semana">›</button>
        </div>
      </div>

      <div className="cal-grid">
        {/* Header row */}
        <div className="col-head" aria-hidden="true" />
        {days.map((d, i) =>
        <div key={i} className={"col-head " + (d.today ? "today" : "")}>
            <div className="day-label">{d.lab}</div>
            <div className="day-num">{d.num}</div>
          </div>
        )}

        {/* Time column */}
        <div className="time-col body-col" style={{ borderLeft: "none" }}>
          {Array.from({ length: hours }).map((_, i) =>
          <div key={i} className="time-row">
              <span>{String(startHour + i).padStart(2, "0")}:00</span>
            </div>
          )}
        </div>

        {/* Day columns */}
        {days.map((d, di) =>
        <div key={di} className="body-col" style={{ position: "relative" }}>
            {Array.from({ length: hours }).map((_, i) =>
          <div key={i} className="time-row" />
          )}
            {appts.filter((a) => a.d === di).map((a, ai) => {
            const top = (a.s - startHour) * rowH + 2;
            const height = a.dur * rowH - 4;
            return (
              <div
                key={ai}
                className={"appt " + a.tone}
                style={{
                  top: `${top}px`,
                  height: `${height}px`,
                  animationDelay: `${a.delay}s`
                }}>
                
                  <div className="appt-service">{a.service}</div>
                  <div className="appt-client">{a.client}</div>
                  <div className="appt-time mono">
                    {fmtHr(a.s)} – {fmtHr(a.s + a.dur)}
                  </div>
                </div>);

          })}
          </div>
        )}

        {/* Now line on Thursday (index 3) — placed on absolute layer overlay */}
        <div className="now-line" style={{ top: `${44 /* head approx */ + nowTop + 36}px` }} />
      </div>

      {/* Booking notification */}
      <div className="cal-toast" role="status">
        <div className="avatar">RT</div>
        <div>
          <div><strong>Rafaela T.</strong> agendou</div>
          <div className="muted">Manicure Russa · sex 14:00</div>
        </div>
      </div>

      {/* Floating mobile booker — the customer view */}
      <div className="cal-mobile" aria-label="Visualização do cliente reservando um horário pelo celular">
        <div className="mob-title">Escolha um horário</div>
        <div className="mob-sub">Quinta, 14 de novembro</div>
        <div className="slots">
          <div className="slot taken mono">09:00</div>
          <div className="slot taken mono">10:30</div>
          <div className="slot mono">12:00</div>
          <div className="slot taken mono">13:30</div>
          <div className="slot sel mono">15:00</div>
          <div className="slot mono">16:30</div>
        </div>
        <div className="mob-btn">Confirmar agendamento</div>
      </div>
    </div>);

};

function fmtHr(h) {
  const hr = Math.floor(h);
  const m = Math.round((h - hr) * 60);
  return `${String(hr).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
}

window.SBCalendar = SBCalendar;