// Booking modal, confirmation modal, session detail modal.
// Driven by props from the timeline state machine in app.jsx.

// Coach list order as it appears in the live dropdown (per screenshots).
const COACH_LIST = [
  ['Jerry Chen','J'], ['Michael Ross','M'], ['Pranav Balakrishnan','P'],
  ['Cyrus Esmailzadeh','C'], ['Kush Vijapure','K'], ['Eric Gong','E'],
  ['Jordan Keller','J', true], ['Kailey Cabrera','K'], ['Rowan Maclean','R'],
  ['Kavneer Majhail','K'], ['David Wise','D'], ['Ariel Gabay','A'],
  ['Elaine Yates','E'], ['Ezra Segal','E'], ['Archan Sen','A'],
  ['Ethan Andrew','E'], ['Riley Reichel','R'], ['Sophia Dal Pra','S'],
  ['Ava Moon','A'], ['Bryce Sheffield','B'],
];

const DURATIONS = ['45 mins', '50 mins', '60 mins', '75 mins'];

// --- Booking modal ----------------------------------------------------------
function BookingModal({
  state,         // booking state from app.jsx
  refs,          // { coachField, durationField, archanItem, sixtyItem, may16, sevenAm, confirmBtn }
}) {
  const {
    coachName = 'Jerry Chen',
    duration = '45 mins',
    coachDropdownOpen = false,
    durationDropdownOpen = false,
    coachListScroll = 0,    // 0..1
    selectedDay = null,      // null | 16
    selectedTime = null,     // null | '07:00 AM'
    hoveredTime = null,       // null | '07:00 AM'
    selectedDateLabel = 'Friday, May 15',
  } = state;

  const slotsForCoach = coachName === 'Archan Sen' ? SLOTS_ARCHAN : SLOTS_JERRY;
  const slotScrollPct = state.timeSlotsScroll || 0;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24,
      pointerEvents: 'none',
    }}>
      <div style={{
        width: 1180, height: 760,
        background: '#fff',
        borderRadius: 16,
        boxShadow: '0 30px 80px rgba(11, 18, 48, 0.18)',
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
      }}>
        {/* Body — three columns */}
        <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
          {/* Left column */}
          <div style={{ width: 380, padding: '28px 28px 28px 32px', display: 'flex', flexDirection: 'column', gap: 16, borderRight: `1px solid ${BD.borderSoft}` }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: BD.ink, letterSpacing: '-0.015em' }}>Book session</div>

            {/* Coach dropdown */}
            <div ref={refs.coachField} style={{ position: 'relative' }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px',
                border: `1px solid ${BD.border}`,
                borderRadius: 10,
                background: '#fff',
              }}>
                <Icon.Person size={18} color={BD.textMute}/>
                <span style={{ flex: 1, fontSize: 15, color: BD.ink, fontWeight: 500 }}>{coachName}</span>
                <Icon.ChevronDown size={16} color={BD.textMute}/>
              </div>

              {coachDropdownOpen && (
                <CoachDropdown
                  scrollPct={coachListScroll}
                  archanItemRef={refs.archanItem}
                  highlightArchan={state.highlightArchan}
                />
              )}
            </div>

            {/* Duration dropdown */}
            <div ref={refs.durationField} style={{ position: 'relative' }}>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '12px 14px',
                border: `1px solid ${BD.border}`,
                borderRadius: 10,
                background: '#fff',
              }}>
                <Icon.Clock size={18} color={BD.textMute}/>
                <span style={{ flex: 1, fontSize: 15, color: BD.ink, fontWeight: 500 }}>{duration}</span>
                <Icon.ChevronDown size={16} color={BD.textMute}/>
              </div>

              {durationDropdownOpen && (
                <DurationDropdown
                  current={duration}
                  sixtyItemRef={refs.sixtyItem}
                  highlightSixty={state.highlightSixty}
                />
              )}
            </div>

            {/* Selected sessions area */}
            <div style={{ marginTop: 8, flex: 1, display: 'flex', flexDirection: 'column' }}>
              {selectedDay && selectedTime ? (
                <>
                  <div style={{ fontSize: 14, fontWeight: 600, color: BD.ink, marginBottom: 14, letterSpacing: '-0.005em' }}>Selected Sessions</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <div style={{
                      width: 50, height: 50, borderRadius: 6,
                      background: '#fff',
                      border: `1px solid ${BD.border}`,
                      textAlign: 'center',
                      display: 'flex', flexDirection: 'column', justifyContent: 'center',
                    }}>
                      <div style={{ fontSize: 10, fontWeight: 600, color: BD.textMute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>May</div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: BD.ink, lineHeight: 1 }}>{selectedDay}</div>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 600, color: BD.ink }}>07:00 AM – 08:00 AM</div>
                      <div style={{ fontSize: 13, color: BD.textMute, marginTop: 3 }}>Saturday</div>
                    </div>
                    <Icon.Trash size={16} color={BD.textMute}/>
                  </div>
                </>
              ) : (
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                  <CalendarEmpty size={92}/>
                  <div style={{ fontSize: 14, color: BD.textMute, marginTop: 12 }}>No sessions selected</div>
                </div>
              )}
            </div>
          </div>

          {/* Middle column — calendar */}
          <div style={{ width: 440, padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 8px' }}>
              <Icon.ChevronLeft size={18} color={BD.ink}/>
              <div style={{ fontSize: 15, fontWeight: 500, color: BD.ink }}>May <span style={{ marginLeft: 6 }}>2026</span></div>
              <Icon.ChevronRight size={18} color={BD.ink}/>
            </div>

            <CalendarGrid selectedDay={selectedDay} may16Ref={refs.may16}/>

            <div style={{ marginTop: 8 }}>
              <div style={{ fontSize: 13, color: BD.textMute, marginBottom: 8 }}>Time zone</div>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px',
                border: `1px solid ${BD.border}`,
                borderRadius: 10,
              }}>
                <Icon.Globe size={16} color={BD.textMute}/>
                <span style={{ flex: 1, fontSize: 14, color: BD.ink }}>America/New_York (GMT -04:00)</span>
                <Icon.ChevronDown size={14} color={BD.textMute}/>
              </div>
            </div>
          </div>

          {/* Right column — time slots */}
          <div style={{ flex: 1, padding: '28px 24px 28px 0', display: 'flex', flexDirection: 'column', minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
              <div style={{ fontSize: 17, fontWeight: 600, color: BD.ink, letterSpacing: '-0.01em' }}>{selectedDateLabel}</div>
              <div style={{
                display: 'inline-flex',
                border: `1px solid ${BD.border}`,
                borderRadius: 8,
                overflow: 'hidden',
              }}>
                <div style={{ padding: '6px 12px', background: BD.borderSoft, fontSize: 13, fontWeight: 500, color: BD.ink }}>12h</div>
                <div style={{ padding: '6px 12px', fontSize: 13, fontWeight: 500, color: BD.textMute }}>24h</div>
              </div>
            </div>

            <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', flexDirection: 'column', gap: 10,
                transform: `translateY(${-slotScrollPct * 200}px)`,
                transition: 'transform 600ms cubic-bezier(0.4, 0, 0.2, 1)',
              }}>
                {slotsForCoach.map(slot => {
                  const isSelected = selectedTime === slot;
                  const isHovered = hoveredTime === slot;
                  return (
                    <div
                      key={slot}
                      ref={slot === '07:00 AM' ? refs.sevenAm : null}
                      style={{
                        padding: '13px 0',
                        textAlign: 'center',
                        border: `1px solid ${isSelected ? BD.ink : BD.border}`,
                        borderRadius: 10,
                        background: isSelected ? BD.ink : (isHovered ? BD.slotHover : BD.slot),
                        color: isSelected ? '#fff' : BD.ink,
                        fontSize: 15, fontWeight: 500,
                        transition: 'background 200ms, border-color 200ms, color 200ms',
                      }}
                    >
                      {slot}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>

        {/* Footer */}
        <div style={{
          padding: '18px 32px',
          borderTop: `1px solid ${BD.borderSoft}`,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: BD.textMute, fontSize: 14, fontWeight: 500 }}>
            <Icon.Calendar size={18} color={BD.textMute}/>
            {selectedDay && selectedTime ? '1 session selected' : '0 sessions selected'}
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <div style={{
              padding: '11px 22px',
              border: `1px solid ${BD.border}`,
              borderRadius: 8,
              color: BD.ink,
              fontSize: 14.5, fontWeight: 500,
            }}>Discard</div>
            <div ref={refs.confirmBtn} style={{
              padding: '11px 22px',
              background: state.confirmActive ? BD.ink : '#cdd2de',
              color: state.confirmActive ? '#fff' : '#fff',
              borderRadius: 8,
              fontSize: 14.5, fontWeight: 500,
              transition: 'background 300ms',
            }}>Confirm</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- Calendar grid ----------------------------------------------------------
function CalendarGrid({ selectedDay, may16Ref }) {
  const dayHeaders = ['Su','Mo','Tu','We','Th','Fr','Sa'];
  // May 2026: 1st falls on Friday. Grid starts with Apr 26 (Sun).
  const cells = [
    {d:26,m:'prev'},{d:27,m:'prev'},{d:28,m:'prev'},{d:29,m:'prev'},{d:30,m:'prev'},{d:1,m:'cur'},{d:2,m:'cur'},
    {d:3,m:'cur'},{d:4,m:'cur'},{d:5,m:'cur'},{d:6,m:'cur'},{d:7,m:'cur'},{d:8,m:'cur'},{d:9,m:'cur'},
    {d:10,m:'cur'},{d:11,m:'cur'},{d:12,m:'cur'},{d:13,m:'cur'},{d:14,m:'cur'},{d:15,m:'cur',today:true},{d:16,m:'cur'},
    {d:17,m:'cur'},{d:18,m:'cur'},{d:19,m:'cur'},{d:20,m:'cur'},{d:21,m:'cur'},{d:22,m:'cur'},{d:23,m:'cur'},
    {d:24,m:'cur'},{d:25,m:'cur'},{d:26,m:'cur'},{d:27,m:'cur'},{d:28,m:'cur'},{d:29,m:'cur'},{d:30,m:'cur'},
    {d:31,m:'cur'},{d:1,m:'next'},{d:2,m:'next'},{d:3,m:'next'},{d:4,m:'next'},{d:5,m:'next'},{d:6,m:'next'},
  ];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', rowGap: 8 }}>
      {dayHeaders.map(h => (
        <div key={h} style={{ textAlign: 'center', fontSize: 13, color: BD.textMute, padding: '4px 0 8px' }}>{h}</div>
      ))}
      {cells.map((c, i) => {
        const isSelected = selectedDay === c.d && c.m === 'cur';
        const isToday = c.today && !isSelected;
        const isOther = c.m !== 'cur';
        const isMay16Ref = c.d === 16 && c.m === 'cur';
        return (
          <div key={i} ref={isMay16Ref ? may16Ref : null} style={{ display: 'flex', justifyContent: 'center' }}>
            <div style={{
              width: 36, height: 36,
              borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14,
              fontWeight: isSelected ? 600 : 500,
              background: isSelected ? BD.ink : (isToday ? 'transparent' : 'transparent'),
              border: isToday ? `1px solid ${BD.border}` : 'none',
              color: isSelected ? '#fff' : (isOther ? '#c5c9d1' : BD.ink),
              transition: 'background 250ms, color 250ms, border 250ms',
            }}>{c.d}</div>
          </div>
        );
      })}
    </div>
  );
}

// --- Coach dropdown ---------------------------------------------------------
function CoachDropdown({ scrollPct = 0, archanItemRef, highlightArchan = false }) {
  // Show ~10 rows at a time, scroll smoothly.
  const ROW_H = 44;
  const VISIBLE = 10;
  const maxScroll = COACH_LIST.length * ROW_H - VISIBLE * ROW_H;
  const offsetY = -scrollPct * maxScroll;

  return (
    <div style={{
      position: 'absolute', top: 52, left: 0, right: 0,
      background: '#fff',
      border: `1px solid ${BD.border}`,
      borderRadius: 12,
      boxShadow: '0 12px 32px rgba(11,18,48,0.12)',
      height: VISIBLE * ROW_H + 10,
      overflow: 'hidden',
      zIndex: 5,
    }}>
      <div style={{
        position: 'absolute', left: 0, right: 0, top: 5,
        transform: `translateY(${offsetY}px)`,
        transition: 'transform 700ms cubic-bezier(0.4, 0, 0.2, 1)',
      }}>
        {COACH_LIST.map(([name, letter, hasPhoto], i) => {
          const isArchan = name === 'Archan Sen';
          return (
            <div
              key={name}
              ref={isArchan ? archanItemRef : null}
              style={{
                height: ROW_H,
                display: 'flex', alignItems: 'center', padding: '0 16px',
                fontSize: 14.5, color: BD.ink, fontWeight: 500,
                background: (isArchan && highlightArchan) ? BD.borderSoft : 'transparent',
                transition: 'background 200ms',
              }}
            >
              {name}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// --- Duration dropdown -------------------------------------------------------
function DurationDropdown({ current, sixtyItemRef, highlightSixty = false }) {
  return (
    <div style={{
      position: 'absolute', top: 52, left: 0, right: 0,
      background: '#fff',
      border: `1px solid ${BD.border}`,
      borderRadius: 12,
      boxShadow: '0 12px 32px rgba(11,18,48,0.12)',
      padding: 5,
      zIndex: 5,
    }}>
      {DURATIONS.map(d => {
        const isCurrent = d === current;
        const isSixty = d === '60 mins';
        return (
          <div
            key={d}
            ref={isSixty ? sixtyItemRef : null}
            style={{
              padding: '11px 14px',
              fontSize: 14.5,
              fontWeight: 500,
              color: BD.ink,
              borderRadius: 7,
              background: isCurrent ? BD.borderSoft : ((isSixty && highlightSixty) ? BD.borderSoft : 'transparent'),
              transition: 'background 200ms',
            }}
          >{d}</div>
        );
      })}
    </div>
  );
}

// --- Time slot data ---------------------------------------------------------
const SLOTS_JERRY = ['03:00 PM','03:30 PM','04:00 PM','04:30 PM','05:00 PM','05:30 PM'];
const SLOTS_ARCHAN = ['04:00 AM','04:30 AM','05:00 AM','05:30 AM','06:00 AM','06:30 AM','07:00 AM','07:30 AM','08:00 AM'];

// --- Confirmation modal -----------------------------------------------------
function ConfirmModal({ refs }) {
  return (
    <div style={{
      width: 540,
      background: '#fff',
      borderRadius: 14,
      padding: '32px 36px',
      boxShadow: '0 30px 80px rgba(11, 18, 48, 0.22)',
    }}>
      <div style={{ fontSize: 22, fontWeight: 700, color: BD.ink, marginBottom: 24, letterSpacing: '-0.015em' }}>You are booking 1 session</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
        <Icon.Person size={18} color={BD.textMute}/>
        <span style={{ fontSize: 15, color: BD.ink, fontWeight: 500 }}>Archan Sen</span>
      </div>

      <div style={{
        display: 'flex', alignItems: 'center', gap: 12,
        padding: '12px 14px',
        border: `1px solid ${BD.border}`,
        borderRadius: 10,
        marginBottom: 14,
      }}>
        <Icon.Clock size={18} color={BD.textMute}/>
        <span style={{ flex: 1, fontSize: 15, color: BD.ink, fontWeight: 500 }}>60 mins</span>
        <Icon.ChevronDown size={16} color={BD.textMute}/>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
        <Icon.Globe size={16} color={BD.textMute}/>
        <span style={{ fontSize: 14, color: BD.ink }}>America/New_York (GMT -04:00)</span>
      </div>

      <div style={{ fontSize: 14, fontWeight: 600, color: BD.ink, marginBottom: 12, letterSpacing: '-0.005em' }}>Sessions</div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
        <div style={{
          width: 50, height: 50, borderRadius: 6,
          background: '#fff', border: `1px solid ${BD.border}`,
          textAlign: 'center',
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
        }}>
          <div style={{ fontSize: 10, fontWeight: 600, color: BD.textMute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>May</div>
          <div style={{ fontSize: 18, fontWeight: 700, color: BD.ink, lineHeight: 1 }}>16</div>
        </div>
        <div>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: BD.ink }}>07:00 AM – 08:00 AM</div>
          <div style={{ fontSize: 13, color: BD.textMute, marginTop: 3 }}>Saturday</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12 }}>
        <div style={{
          flex: 1, padding: '14px 0', textAlign: 'center',
          border: `1px solid ${BD.border}`, borderRadius: 10,
          color: BD.ink, fontSize: 15, fontWeight: 500,
        }}>Go Back</div>
        <div ref={refs.confirmBookingBtn} style={{
          flex: 1, padding: '14px 0', textAlign: 'center',
          background: BD.ink, color: '#fff', borderRadius: 10,
          fontSize: 15, fontWeight: 500,
        }}>Confirm Booking</div>
      </div>
    </div>
  );
}

// --- Session detail modal ---------------------------------------------------
function SessionDetailModal() {
  return (
    <div style={{
      width: 760,
      background: '#fff',
      borderRadius: 14,
      padding: '28px 36px 32px',
      boxShadow: '0 30px 80px rgba(11, 18, 48, 0.22)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 28 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, color: BD.ink, letterSpacing: '-0.015em' }}>Shyla Maan</div>
          <div style={{ fontSize: 14, color: BD.textMute, marginTop: 3 }}>LD Drill Sessions</div>
        </div>
        <div style={{
          width: 30, height: 30, borderRadius: '50%',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: BD.borderSoft,
        }}>
          <Icon.X size={14} color={BD.ink}/>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 28 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div style={{
            width: 56,
            background: '#fff', border: `1px solid ${BD.border}`, borderRadius: 6,
            textAlign: 'center', padding: '8px 0',
          }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: BD.textMute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>May</div>
            <div style={{ fontSize: 22, fontWeight: 700, color: BD.ink, lineHeight: 1.05 }}>16</div>
          </div>
          <div>
            <div style={{ fontSize: 17, fontWeight: 600, color: BD.ink, marginBottom: 6 }}>Live Session</div>
            <div style={{ fontSize: 13.5, color: BD.textMute, marginBottom: 8 }}>Sat, 07:00 AM – 08:00 AM</div>
            <div style={{
              display: 'inline-block', padding: '3px 10px', borderRadius: 4,
              background: BD.pillBlue, color: BD.pillBlueText,
              fontSize: 12, fontWeight: 500,
            }}>Upcoming</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            padding: '9px 16px',
            border: `1px solid ${BD.border}`, borderRadius: 8,
            fontSize: 13.5, color: BD.ink, fontWeight: 500,
            background: '#fff',
          }}>Cancel session</div>
          <Icon.Dots size={18} color={BD.textMute}/>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 6 }}>
        <div style={{
          width: 44, height: 44, borderRadius: '50%',
          background: BD.ink, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 16, fontWeight: 600,
        }}>A</div>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: BD.textMute, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Hosted by</div>
          <div style={{ fontSize: 16, fontWeight: 600, color: BD.ink, marginTop: 2 }}>Archan Sen</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  BookingModal, CalendarGrid, CoachDropdown, DurationDropdown,
  ConfirmModal, SessionDetailModal,
  COACH_LIST, DURATIONS, SLOTS_JERRY, SLOTS_ARCHAN,
});