/* Interviews — Google-Calendar-style month grid with date selection + day agenda. */
const IG = window.GreydigiComponents;
const { Avatar: IAvatar, Badge: IBadge, Button: IButton } = IG;
const { useState: useIS } = React;

const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const MODE_ICON = { Video: 'video', Onsite: 'mapPin', Phone: 'phone' };
const MODE_COLOR = { Video: 'var(--gd-success)', Onsite: 'var(--gd-warning)', Phone: 'var(--gd-coral)' };

function ymd(y, m, d) { return `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`; }

// Track the real current date so the "today" marker is never stale.
const _NOW = new Date();
const TODAY = ymd(_NOW.getFullYear(), _NOW.getMonth(), _NOW.getDate());
const TODAY_VIEW = { y: _NOW.getFullYear(), m: _NOW.getMonth() };
function fmtLong(iso) {
  const [y, m, d] = iso.split('-').map(Number);
  const dt = new Date(y, m - 1, d);
  return `${DOW[dt.getDay()]}, ${MONTHS[m - 1]} ${d}`;
}

function InterviewsView({ job, candidates, interviews, onOpenCandidate }) {
  const [view, setView] = useIS(TODAY_VIEW);
  const [sel, setSel] = useIS(TODAY);

  const byDate = {};
  interviews.forEach((iv) => { (byDate[iv.date] = byDate[iv.date] || []).push(iv); });
  Object.values(byDate).forEach((arr) => arr.sort((a, b) => a.start.localeCompare(b.start)));

  const first = new Date(view.y, view.m, 1);
  const startDow = first.getDay();
  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < startDow; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const prevMonth = () => setView((v) => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 });
  const nextMonth = () => setView((v) => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 });
  const goToday = () => { setView(TODAY_VIEW); setSel(TODAY); };

  const dayEvents = byDate[sel] || [];
  const candOf = (id) => candidates.find((c) => c.id === id);

  return (
    <div className="view-scroll">
      <div className="view-inner view-wide">
        <PageHead title="Interviews" subtitle={`${job.title} · ${interviews.length} scheduled`}>
          <IButton label="Schedule" variant="primary" />
        </PageHead>

        <div className="cal-wrap">
          {/* calendar */}
          <div className="cal">
            <div className="cal-toolbar">
              <div className="cal-nav">
                <button className="cal-navbtn" onClick={prevMonth} aria-label="Previous month"><Icon name="chevronLeft" size={16} /></button>
                <button className="cal-navbtn" onClick={nextMonth} aria-label="Next month"><Icon name="chevronRight" size={16} /></button>
              </div>
              <div className="cal-month">{MONTHS[view.m]} {view.y}</div>
              <button className="cal-today" onClick={goToday}>Today</button>
            </div>
            <div className="cal-dow">{DOW.map((d) => <div key={d} className="cal-dowcell">{d}</div>)}</div>
            <div className="cal-grid">
              {cells.map((d, i) => {
                if (d == null) return <div key={i} className="cal-cell cal-empty" />;
                const iso = ymd(view.y, view.m, d);
                const evs = byDate[iso] || [];
                const isToday = iso === TODAY;
                const isSel = iso === sel;
                return (
                  <button key={i} className={'cal-cell' + (isSel ? ' is-sel' : '') + (isToday ? ' is-today' : '')} onClick={() => setSel(iso)}>
                    <span className="cal-date">{d}</span>
                    <span className="cal-events">
                      {evs.slice(0, 3).map((ev) => {
                        const c = candOf(ev.candidateId);
                        return <span key={ev.id} className="cal-ev" style={{ background: MODE_COLOR[ev.mode] }}>{ev.start} {c ? c.name.split(' ')[0] : ev.kind}</span>;
                      })}
                      {evs.length > 3 && <span className="cal-more">+{evs.length - 3} more</span>}
                    </span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* day agenda */}
          <div className="agenda">
            <div className="agenda-head">
              <div className="agenda-date">{fmtLong(sel)}</div>
              <div className="agenda-count">{dayEvents.length} interview{dayEvents.length !== 1 ? 's' : ''}</div>
            </div>
            <div className="agenda-list">
              {dayEvents.map((ev) => {
                const c = candOf(ev.candidateId);
                return (
                  <button key={ev.id} className="agenda-card" onClick={() => c && onOpenCandidate(c.id, ev.jobId)}>
                    <div className="agenda-time">
                      <span className="agenda-start">{ev.start}</span>
                      <span className="agenda-end">{ev.end}</span>
                    </div>
                    <span className="agenda-rail" style={{ background: MODE_COLOR[ev.mode] }} />
                    <div className="agenda-body">
                      <div className="agenda-row1">
                        {c && <IAvatar initials={c.initials} size="sm" color="charcoal" />}
                        <span className="agenda-name">{c ? c.name : 'Candidate'}</span>
                        <IBadge label={ev.mode} variant={ev.mode === 'Video' ? 'success' : ev.mode === 'Onsite' ? 'warning' : 'neutral'} />
                      </div>
                      <div className="agenda-kind"><Icon name={MODE_ICON[ev.mode]} size={12} /> {ev.kind}</div>
                      <div className="agenda-panel">
                        <span className="agenda-panel-label">Panel</span>
                        {ev.panel.map((p, j) => <IAvatar key={j} initials={p} size="sm" color="charcoal" />)}
                      </div>
                    </div>
                  </button>
                );
              })}
              {!dayEvents.length && (
                <div className="agenda-empty">
                  <span className="agenda-empty-ico"><Icon name="calendar" size={20} /></span>
                  <div className="agenda-empty-t">No interviews</div>
                  <div className="agenda-empty-s">Nothing scheduled for this day.</div>
                  <button className="agenda-add"><Icon name="plus" size={14} /> Schedule one</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InterviewsView });