/* ServiceBridge — Timeline Planning · Option C: interactive day-by-day calendar */
const calSb = window.sbStyles;

const CAL_STATE = {
  todo:   { color: '#688DAF', label: 'Not started',          verb: 'Est. start' },
  tbd:    { color: '#722ed1', label: 'TBD — needs decision', verb: 'Est. start' },
  design: { color: '#09B0ED', label: 'In progress · design', verb: 'Est. design done' },
  dev:    { color: '#142E47', label: 'In progress · dev',    verb: 'Est. dev done' },
  done:   { color: '#52c41a', label: 'Completed',            verb: 'Completed' },
};
const CAL_ORDER = ['design', 'dev', 'todo', 'tbd', 'done'];
const CAL_MONTHS = [
  { i: 5, name: 'June' }, { i: 6, name: 'July' }, { i: 7, name: 'August' },
  { i: 8, name: 'September' }, { i: 9, name: 'October' },
];
const DOW = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

const calFmt = (dt) => dt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
const calFull = (dt) => dt.toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();

/* current state of a deliverable → which key date it lands on */
function calDerive(d, getTs, status) {
  const dts = getTs(d.id, 'design');
  const vts = getTs(d.id, 'dev');
  const sc = window.schedule(d);
  const today = window.CAL_TODAY;
  if (status === 'tbd' && !dts && !vts) return { key: 'tbd', date: sc.start, sc };
  if (vts || status === 'done')          return { key: 'done', date: vts ? new Date(vts) : sc.devDone, actual: !!vts, sc };
  if (dts)                                 return { key: 'dev',  date: sc.devDone, sc };
  if (today < sc.start)                    return { key: 'todo', date: sc.start, sc };
  if (today < sc.designDone)               return { key: 'design', date: sc.designDone, sc };
  return { key: 'dev', date: sc.devDone, sc };
}

/* collapsible sidebar section — header toggles open/closed */
function CalSection({ title, count, defaultOpen, children }) {
  const [open, setOpen] = React.useState(defaultOpen !== false);
  const sb = window.sbStyles;
  return React.createElement('div', { style: sb.calCard },
    React.createElement('div', { style: sb.calCollapseHead, onClick: () => setOpen(!open) },
      React.createElement('span', { style: sb.calCollapseTitle }, title),
      (count != null) ? React.createElement('span', { style: { ...sb.calSecCount, marginLeft: 0 } }, count) : null,
      React.createElement(window.Icon, { name: open ? 'down' : 'right', style: { width: 13, height: 13, marginLeft: 'auto', color: 'rgba(0,0,0,.4)' } })
    ),
    open ? React.createElement('div', { style: { marginTop: 12 } }, children) : null
  );
}

function CalendarView({ getTs, getStatus }) {
  const [mi, setMi] = React.useState(5);
  const [sel, setSel] = React.useState(null);

  const events = window.DELIVERABLES.map((d) => {
    const status = (getStatus && getStatus(d.id)) || d.status;
    return { d, status, st: calDerive(d, getTs, status) };
  });
  const inMonth = (dt) => dt.getFullYear() === 2026 && dt.getMonth() === mi;

  /* month grid */
  const first = new Date(2026, mi, 1);
  const lead = (first.getDay() + 6) % 7;
  const dim = new Date(2026, mi + 1, 0).getDate();
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let day = 1; day <= dim; day++) cells.push(new Date(2026, mi, day));
  while (cells.length % 7 !== 0) cells.push(null);

  const dot = (color, extra) => React.createElement('span', { style: { ...calSb.calDot, background: color, ...(extra || {}) } });

  /* ---- a day cell ---- */
  const renderCell = (dt, idx) => {
    if (!dt) return React.createElement('div', { key: 'e' + idx, style: calSb.calCellEmpty });
    const isToday = sameDay(dt, window.CAL_TODAY);
    const isWeekend = dt.getDay() === 0 || dt.getDay() === 6;
    const dayEvents = events.filter((e) => inMonth(e.st.date) && e.st.date.getDate() === dt.getDate());
    return React.createElement('div', {
      key: dt.getDate(),
      style: { ...calSb.calCell, ...(isWeekend ? calSb.calCellMuted : null), ...(isToday ? calSb.calToday : null) }
    },
      React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
        React.createElement('span', { style: { ...calSb.calDayNum, ...(isToday ? calSb.calTodayNum : null) } }, dt.getDate()),
        isToday ? React.createElement('span', { style: calSb.calTodayTag }, 'Today') : null),
      dayEvents.map((e) => {
        const m = CAL_STATE[e.st.key];
        return React.createElement('div', {
          key: e.d.id, className: 'cal-chip', onClick: () => setSel(e.d.id),
          title: m.label + ' · ' + m.verb + ' ' + calFmt(e.st.date) + ' — ' + e.d.name,
          style: { ...calSb.calChip, ...(sel === e.d.id ? { boxShadow: '0 0 0 2px ' + m.color } : null) }
        },
          dot(m.color),
          React.createElement('span', { style: calSb.calChipName }, e.d.name));
      })
    );
  };

  /* ---- sidebar: legend + (summary | detail) ---- */
  const LEGEND_KEYS = [
    { color: '#688DAF', label: 'Design Started' },
    { color: '#09B0ED', label: 'Design Completed' },
    { color: '#142E47', label: 'Development Completed' },
  ];
  const legend = React.createElement('div', { style: calSb.calCard },
    React.createElement('div', { style: calSb.calCardTitle }, 'Legend'),
    React.createElement('div', { style: calSb.calLegend },
      LEGEND_KEYS.map((k) => React.createElement('div', { key: k.label, style: calSb.calLegendItem },
        dot(k.color), k.label))));

  const designCompleted = events.filter((e) => getTs(e.d.id, 'design'));
  const devCompleted = events.filter((e) => getTs(e.d.id, 'dev'));
  const calEmpty = (msg) => React.createElement('div', { style: { fontSize: 12.5, color: 'rgba(0,0,0,.35)', padding: '2px 2px 4px' } }, msg);
  const completedItem = (e, kind) => React.createElement('div', {
      key: e.d.id, className: 'cal-item', onClick: () => setSel(e.d.id), style: calSb.calItem
    },
    React.createElement('span', { style: calSb.calItemName }, e.d.name),
    React.createElement('div', { style: calSb.calItemMeta },
      React.createElement('div', { style: calSb.calItemDate }, '✓ ' + calFmt(new Date(getTs(e.d.id, kind))))));

  const summary = React.createElement(React.Fragment, null,
    React.createElement(CalSection, { title: 'All Deliverables', count: events.length, defaultOpen: true },
      React.createElement('div', { style: { ...calSb.calSub, marginTop: 0 } }, 'Date shown = estimated completion of the current step · ✓ = actual sign-off'),
      CAL_ORDER.map((k) => {
        const list = events.filter((e) => e.st.key === k);
        if (!list.length) return null;
        const m = CAL_STATE[k];
        return React.createElement('div', { key: k },
          React.createElement('div', { style: calSb.calSecHead }, dot(m.color), m.label, React.createElement('span', { style: calSb.calSecCount }, list.length)),
          list.map((e) => React.createElement('div', {
            key: e.d.id, className: 'cal-item', onClick: () => setSel(e.d.id), style: calSb.calItem
          },
            React.createElement('span', { style: calSb.calItemName }, e.d.name),
            (e.st.key === 'dev') ? null : React.createElement('div', { style: calSb.calItemMeta },
              React.createElement('div', { style: calSb.calItemVerb }, CAL_STATE[e.st.key].verb),
              React.createElement('div', { style: calSb.calItemDate }, (e.st.key === 'done' ? '✓ ' : '') + calFmt(e.st.date))))));
      })),
    React.createElement(CalSection, { title: 'Completed - Design', count: designCompleted.length, defaultOpen: false },
      designCompleted.length ? designCompleted.map((e) => completedItem(e, 'design')) : calEmpty('No design sign-offs yet.')),
    React.createElement(CalSection, { title: 'Completed - Dev', count: devCompleted.length, defaultOpen: false },
      devCompleted.length ? devCompleted.map((e) => completedItem(e, 'dev')) : calEmpty('No dev sign-offs yet.')));

  let detail = null;
  if (sel != null) {
    const e = events.find((x) => x.d.id === sel);
    if (e) {
      const d = e.d, sc = e.st.sc, m = CAL_STATE[e.st.key];
      const dts = getTs(d.id, 'design'), vts = getTs(d.id, 'dev');
      const mile = (color, label, dateStr, active, badge) => React.createElement('div', { style: { ...calSb.calMile, ...(active ? calSb.calMileActive : null) } },
        dot(color, { marginTop: 5 }),
        React.createElement('div', { style: { flex: 1 } },
          React.createElement('div', { style: { fontWeight: active ? 600 : 500, color: '#142E47', fontSize: 13 } }, label),
          React.createElement('div', { style: calSb.calMileDate }, dateStr)),
        badge ? React.createElement('span', { style: calSb.calMileBadge }, badge) : null);
      detail = React.createElement('div', { style: calSb.calCard },
        React.createElement('div', { className: 'cal-back', style: calSb.calBack, onClick: () => setSel(null) },
          React.createElement(window.Icon, { name: 'left', style: { width: 12, height: 12 } }), 'All Deliverables'),
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 } },
          React.createElement('span', { style: calSb.rowNum }, d.id),
          React.createElement('span', { style: { fontSize: 15, fontWeight: 700, color: '#142E47' } }, d.name)),
        React.createElement('div', { style: { margin: '6px 0 14px' } }, React.createElement(window.StatusTag, { status: e.status })),
        React.createElement('div', { style: { ...calSb.calBanner, background: m.color } },
          dot('#fff'),
          React.createElement('span', null, m.label),
          React.createElement('b', { style: { marginLeft: 'auto' } },
            e.st.key === 'done' && e.st.actual ? calFull(e.st.date) : (m.verb + ' · ' + calFmt(e.st.date)))),
        React.createElement('div', { style: { marginTop: 14 } },
          mile('#688DAF', 'Estimated start', calFmt(sc.start), e.st.key === 'todo' || e.st.key === 'tbd'),
          mile('#09B0ED', 'Design — est. complete', calFmt(sc.designDone), e.st.key === 'design', dts ? '✓ ' + calFmt(new Date(dts)) : null),
          mile('#142E47', 'Dev / build — est. complete', calFmt(sc.devDone), e.st.key === 'dev', vts ? '✓ ' + calFmt(new Date(vts)) : null)),
        React.createElement('div', { style: calSb.calNote }, d.note));
    }
  }

  return React.createElement('div', { style: calSb.calWrap },
    React.createElement('div', { style: calSb.calMain },
      React.createElement('div', { style: calSb.calHead },
        React.createElement('div', { style: calSb.calNav },
          React.createElement('button', { type: 'button', className: 'cal-nav', style: { ...calSb.calNavBtn, ...(mi <= 5 ? calSb.calNavOff : null) }, onClick: () => mi > 5 && setMi(mi - 1) },
            React.createElement(window.Icon, { name: 'left', style: { width: 13, height: 13 } })),
          React.createElement('span', { style: calSb.calTitle }, CAL_MONTHS.find((x) => x.i === mi).name + ' 2026'),
          React.createElement('button', { type: 'button', className: 'cal-nav', style: { ...calSb.calNavBtn, ...(mi >= 9 ? calSb.calNavOff : null) }, onClick: () => mi < 9 && setMi(mi + 1) },
            React.createElement(window.Icon, { name: 'right', style: { width: 13, height: 13 } }))),
        React.createElement('div', { style: calSb.calMonthTabs },
          CAL_MONTHS.map((x) => React.createElement('button', {
            key: x.i, type: 'button', className: 'cal-mtab',
            style: { ...calSb.calMtab, ...(mi === x.i ? calSb.calMtabOn : null) }, onClick: () => setMi(x.i)
          }, x.name.slice(0, 3))))),
      React.createElement('div', { style: calSb.calGrid },
        DOW.map((w) => React.createElement('div', { key: w, style: calSb.calDow }, w)),
        cells.map(renderCell))),
    React.createElement('div', { style: calSb.calSide }, legend, sel != null ? detail : summary));
}

window.CalendarView = CalendarView;