/* Sprint Planner — date-driven Milestone Gantt.
   Used when a project's cadence is Timeline (rollouts, launches, migrations):
   work is framed by calendar dates and milestones, not sprints. Months/weeks
   header, workstream bars across real dates, milestone diamonds, a today line.
   Themed to the Acme migration so it reads as a real plan. */

const { useState: useStateG, useRef: useRefG } = React;

const G_START = new Date(2026, 4, 18);   // Mon May 18
const G_END   = new Date(2026, 7, 3);    // Mon Aug 3
const G_TODAY = new Date(2026, 5, 13);   // Jun 13 (system date)
const G_PXDAY = 11;

const gDayDiff = (a, b) => Math.round((b - a) / 86400000);
const G_TOTAL  = gDayDiff(G_START, G_END);
const gX = d => gDayDiff(G_START, d) * G_PXDAY;
const gFmt = d => d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

const G_MILESTONES = [
  { label: 'Kickoff',             date: new Date(2026, 4, 20) },
  { label: 'Data model sign-off', date: new Date(2026, 5, 5)  },
  { label: 'Beta',                date: new Date(2026, 5, 30) },
  { label: 'UAT complete',        date: new Date(2026, 6, 18) },
  { label: 'Go-live',             date: new Date(2026, 7, 1), big: true },
];

const G_GROUPS = [
  { name: 'Discovery', rows: [
    { id: 'SYM-510', name: 'Field & data mapping', owner: 'maya', kind: 'story', start: new Date(2026,4,20), end: new Date(2026,5,5),  prog: 100 },
    { id: 'SYM-511', name: 'Workflow & status design', owner: 'aria', kind: 'task', start: new Date(2026,4,25), end: new Date(2026,5,12), prog: 80 },
  ]},
  { name: 'Build', rows: [
    { id: 'SYM-512', name: 'Migration engine v2', owner: 'tom', kind: 'epic', start: new Date(2026,5,1),  end: new Date(2026,6,5),  prog: 55 },
    { id: 'SYM-513', name: 'SSO + SCIM integration', owner: 'jin', kind: 'story', start: new Date(2026,5,10), end: new Date(2026,6,8),  prog: 40 },
    { id: 'SYM-514', name: 'Payroll sync',        owner: 'jin', kind: 'story', start: new Date(2026,5,20), end: new Date(2026,6,18), prog: 15 },
  ]},
  { name: 'Validate', rows: [
    { id: 'SYM-515', name: 'UAT cycle',           owner: 'maya', kind: 'task', start: new Date(2026,6,5),  end: new Date(2026,6,25), prog: 0 },
    { id: 'SYM-516', name: 'Cutover rehearsal',   owner: 'tom', kind: 'task', start: new Date(2026,6,20), end: new Date(2026,6,30), prog: 0 },
  ]},
  { name: 'Launch', rows: [
    { id: 'SYM-517', name: 'Go-live & hypercare', owner: 'tom', kind: 'bug', start: new Date(2026,7,1),  end: new Date(2026,7,3),  prog: 0 },
  ]},
];

const G_KIND_COLOR = {
  story: 'oklch(0.55 0.13 195)', task: 'oklch(0.5 0.05 260)',
  epic: 'oklch(0.5 0.13 295)', bug: 'oklch(0.6 0.18 25)',
};

function ganttMonths() {
  const out = []; let cur = new Date(G_START.getFullYear(), G_START.getMonth(), 1);
  while (cur < G_END) {
    const mStart = cur < G_START ? G_START : cur;
    const next = new Date(cur.getFullYear(), cur.getMonth() + 1, 1);
    const mEnd = next > G_END ? G_END : next;
    out.push({ label: MONTHS[cur.getMonth()] + ' ' + cur.getFullYear(), left: gX(mStart), width: gDayDiff(mStart, mEnd) * G_PXDAY });
    cur = next;
  }
  return out;
}
function ganttWeeks() {
  const out = []; let cur = new Date(G_START);
  while (cur < G_END) { out.push(gX(cur)); cur = new Date(cur.getFullYear(), cur.getMonth(), cur.getDate() + 7); }
  return out;
}

function GanttView() {
  const [hover, setHover] = useStateG(null);
  const canvasW = G_TOTAL * G_PXDAY;
  const months = ganttMonths(), weeks = ganttWeeks();

  return (
    <div className="gantt-wrap">
      <div className="gantt">
        {/* header */}
        <div className="g-head">
          <div className="g-head__corner">
            <span className="g-head__title">Workstream</span>
            <span className="g-head__range">{gFmt(G_START)} – {gFmt(G_END)}</span>
          </div>
          <div className="g-head__time" style={{ width: canvasW }}>
            {months.map((m, i) => <div key={i} className="g-month" style={{ left: m.left, width: m.width }}>{m.label}</div>)}
            {weeks.map((w, i) => <div key={'w' + i} className="g-week" style={{ left: w }} />)}
          </div>
        </div>

        {/* body */}
        <div className="g-body">
          {/* left labels */}
          <div className="g-labels">
            <div className="g-mile-label">Milestones</div>
            {G_GROUPS.map(g => (
              <React.Fragment key={g.name}>
                <div className="g-group-label">{g.name}</div>
                {g.rows.map(r => {
                  const p = PEOPLE.find(x => x.id === r.owner);
                  return (
                    <div key={r.id} className="g-row-label">
                      {p && <span className="avatar avatar--sm" data-tone={p.tone} title={p.name}>{p.name.charAt(0)}</span>}
                      <span className="g-row-label__txt">{r.name}</span>
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>

          {/* canvas */}
          <div className="g-canvas" style={{ width: canvasW }}>
            {/* gridlines */}
            {weeks.map((w, i) => <div key={'g' + i} className="g-grid" style={{ left: w }} />)}
            {G_MILESTONES.map((m, i) => <div key={'ml' + i} className="g-mile-line" style={{ left: gX(m.date) }} />)}
            <div className="g-today" style={{ left: gX(G_TODAY) }}><span className="g-today__lbl">Today</span></div>

            {/* milestones row */}
            <div className="g-mile-track">
              {G_MILESTONES.map((m, i) => (
                <div key={i} className={"g-mile" + (m.big ? " is-big" : "")} style={{ left: gX(m.date) }}
                     onMouseEnter={() => setHover('m' + i)} onMouseLeave={() => setHover(null)}>
                  <span className="g-mile__diamond" />
                  <span className="g-mile__lbl">{m.label}</span>
                  {hover === 'm' + i && <span className="g-tip">{m.label} · {gFmt(m.date)}</span>}
                </div>
              ))}
            </div>

            {/* group + rows */}
            {G_GROUPS.map(g => (
              <React.Fragment key={g.name}>
                <div className="g-group-track" />
                {g.rows.map(r => {
                  const left = gX(r.start), width = Math.max(gX(r.end) - gX(r.start), 8);
                  const color = G_KIND_COLOR[r.kind] || 'var(--ink-3)';
                  const done = r.prog >= 100;
                  return (
                    <div key={r.id} className="g-row">
                      <div className={"g-bar" + (done ? " is-done" : "")} style={{ left, width, '--bar': color }}
                           onMouseEnter={() => setHover(r.id)} onMouseLeave={() => setHover(null)}>
                        <div className="g-bar__fill" style={{ width: r.prog + '%' }} />
                        <span className="g-bar__lbl">{r.id} · {r.prog}%</span>
                        {hover === r.id && (
                          <span className="g-tip">{r.name} · {gFmt(r.start)} → {gFmt(r.end)} · {r.prog}% done</span>
                        )}
                      </div>
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.GanttView = GanttView;