// calendar.jsx — Calendar view: week grid + booking links + Google sync (mocked)

function CalendarView({ onOpenLead, onToast }) {
  const days = window.APPORTOO.CALENDAR_DAYS;
  const dates = window.APPORTOO.CALENDAR_DATES;
  const today = window.APPORTOO.CALENDAR_TODAY;
  const events = window.APPORTOO.CALENDAR_EVENTS;
  const links = window.APPORTOO.BOOKING_LINKS;

  const HOUR_START = 9, HOUR_END = 20, ROW_H = 56; // 11 hours, 56px each

  const positionEvent = (e) => {
    const top = (e.start - HOUR_START) * ROW_H;
    const height = Math.max(28, (e.end - e.start) * ROW_H - 4);
    return { top: `${top}px`, height: `${height}px` };
  };

  const fmtHour = (h) => {
    const hh = Math.floor(h);
    const mm = (h - hh) * 60;
    return mm ? `${hh}h${String(mm).padStart(2, '0')}` : `${hh}h`;
  };

  const upcoming = events
    .filter(e => e.day >= today)
    .sort((a, b) => a.day - b.day || a.start - b.start)
    .slice(0, 8);

  const copyBookingLink = (slug) => {
    navigator.clipboard?.writeText(`https://${slug}`);
    onToast(`Lien copié : ${slug}`);
  };

  // Today now-line position (e.g. 11h30 -> halfway)
  const nowHour = 10.75; // mock 10:45
  const nowTop = (nowHour - HOUR_START) * ROW_H;

  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="cal-page">
        <div className="cal-main">
          <div className="cal-toolbar">
            <h2>Semaine 20 · mai 2026</h2>
            <span className="chip turq dot sm">Synchro Google</span>
            <div className="spacer" />
            <div className="cal-nav">
              <button><window.Icon.chev size={13} style={{ transform: 'rotate(180deg)' }} /></button>
              <button>Aujourd'hui</button>
              <button><window.Icon.chev size={13} /></button>
            </div>
            <button className="btn"><window.Icon.calendar size={13} /> Semaine ▾</button>
            <button className="btn primary"><window.Icon.plus size={13} /> Nouvel évènement</button>
          </div>

          <div className="cal-week">
            <div className="cal-week-head-blank" />
            {days.map((d, i) => (
              <div key={i} className={`cal-week-head-cell ${i === today ? 'today' : ''}`}>
                <span>{d}</span>
                <span className="d">{dates[i]}</span>
              </div>
            ))}
            <div className="cal-week-body">
              <div className="cal-hour-col">
                {Array.from({ length: 11 }).map((_, i) => (
                  <div key={i} className="hour">{fmtHour(HOUR_START + i)}</div>
                ))}
              </div>
              {days.map((_, dayIdx) => (
                <div key={dayIdx} className={`cal-day-col ${dayIdx === today ? 'today' : ''}`}>
                  {Array.from({ length: 11 }).map((_, i) => <div key={i} className="slot" />)}
                  {events.filter(e => e.day === dayIdx).map(e => (
                    <div key={e.id}
                         className={`cal-event ${e.color}`}
                         style={positionEvent(e)}
                         onClick={() => e.leadId && onOpenLead(e.leadId)}>
                      <span className="et">{e.title}</span>
                      <span className="em">{fmtHour(e.start)} → {fmtHour(e.end)}</span>
                    </div>
                  ))}
                </div>
              ))}
              <div className="cal-now-line" style={{
                top: `${nowTop}px`,
                left: `calc(56px + (100% - 56px) / 5 * ${today})`,
                width: `calc((100% - 56px) / 5)`,
              }} />
            </div>
          </div>
        </div>

        <div className="cal-side">
          <div className="cal-side-card">
            <h3>Synchronisation</h3>
            <div className="cal-sync">
              <div className="logo">G</div>
              <div className="info">
                <b>francois@apportoo.fr</b>
                <span>Synchro bidirectionnelle · 42s</span>
              </div>
              <window.Icon.check size={14} style={{ color: 'var(--turq-deep)' }} />
            </div>
          </div>

          <div className="cal-side-card">
            <h3>Liens de prise de RDV</h3>
            <div className="sub">Partage l'un de ces liens dans tes DM — les RDV se créent automatiquement dans ton calendrier.</div>
            {links.map(l => (
              <div key={l.id} className="booking-link" onClick={() => copyBookingLink(l.slug)}>
                <div className="b-icon"><window.Icon.calendar size={14} /></div>
                <div className="b-meta">
                  <b>{l.label}</b>
                  <span>{l.slug} · {l.uses} utilisations</span>
                </div>
                <window.Icon.copy size={13} style={{ color: 'var(--ink-3)' }} />
              </div>
            ))}
            <button className="btn ghost" style={{ marginTop: 6, width: '100%', justifyContent: 'center' }}>
              <window.Icon.plus size={12} /> Nouveau lien
            </button>
          </div>

          <div className="cal-side-card" style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
            <h3>À venir</h3>
            <div className="upcoming-list">
              {upcoming.map(e => (
                <div key={e.id} className={`upcoming-row ${e.color}`}
                     onClick={() => e.leadId && onOpenLead(e.leadId)}>
                  <div className="stripe" />
                  <div className="when">
                    {days[e.day].toLowerCase()}<br/>{fmtHour(e.start)}
                  </div>
                  <div className="what">{e.title}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.CalendarView = CalendarView;