/* Page: Roadmap — per-client milestone timeline as a Gantt-style chart
   (portal Strategy layer). Read for any role; agency/client_admin get an
   inline add-milestone form. A year picker in the page head scopes the chart
   to one calendar year. Visual reference: docs/superpowers/portal-mockup.html. */
const { useState: useStateRoad } = React;

const MS_MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const MS_STATUS = { 'planned': 'Planned', 'in-progress': 'In progress', 'done': 'Done' };
function msYearWindow(y) { const s = new Date(y + '-01-01T00:00:00Z').getTime(); const e = new Date((y + 1) + '-01-01T00:00:00Z').getTime(); return { s, span: e - s }; }
function msPctIn(dateStr, win) { return ((new Date(dateStr).getTime() - win.s) / win.span) * 100; }
function msClamp(n) { return Math.max(0, Math.min(100, n)); }

function RoadmapView({ client }) {
  const [version, setVersion] = useStateRoad(0);
  const { data, loading, error } = useApi(`/api/clients/${client.id}/milestones`, [client.id, version]);
  const me = window.__GE_USER__;
  const canWrite = !me || me.role === 'agency' || me.role === 'client_admin';

  const [yearSel, setYearSel] = useStateRoad(null);
  const [title, setTitle] = useStateRoad('');
  const [targetDate, setTargetDate] = useStateRoad('');
  const [status, setStatus] = useStateRoad('planned');
  const [saving, setSaving] = useStateRoad(false);
  const [formErr, setFormErr] = useStateRoad(null);
  const field = { background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 4, padding: '6px 8px', color: 'var(--text)', fontSize: 13, width: '100%' };

  if (loading) return <div className="loading-state">Loading roadmap...</div>;
  if (error) return <div className="error-state">Failed to load roadmap: {error}</div>;

  const milestones = data || [];

  // Years the picker offers: current + next year, plus every year any milestone
  // touches, sorted. So there is always a choice and the chart can look ahead.
  const curYear = Number(new Date().toISOString().slice(0, 4));
  const yearSet = new Set([curYear, curYear + 1]);
  milestones.forEach(m => {
    if (m.start_date) yearSet.add(Number(m.start_date.slice(0, 4)));
    if (m.target_date) yearSet.add(Number(m.target_date.slice(0, 4)));
  });
  const years = [...yearSet].sort((a, b) => a - b);
  const activeYear = (yearSel != null && years.includes(yearSel)) ? yearSel : (years.includes(curYear) ? curYear : years[0]);
  const win = msYearWindow(activeYear);

  // Bars for the active year. start = start_date, else the previous milestone's
  // target, else the year start; clamp to the visible window; drop milestones
  // that fall entirely outside the selected year.
  let prevEnd = activeYear + '-01-01';
  const bars = milestones.map(m => {
    const start = m.start_date || prevEnd;
    const end = m.target_date || start;
    prevEnd = end;
    const rawL = msPctIn(start, win), rawR = msPctIn(end, win);
    if (rawR <= 0 || rawL >= 100) return null;
    const left = msClamp(rawL);
    const width = Math.max(msClamp(rawR) - left, 3);
    return { m, left, width };
  }).filter(Boolean);

  const todayISO = new Date().toISOString().slice(0, 10);
  const showToday = Number(todayISO.slice(0, 4)) === activeYear;
  const todayPct = msPctIn(todayISO, win);

  const submit = (e) => {
    e.preventDefault();
    if (!title.trim()) { setFormErr('Title is required'); return; }
    setSaving(true); setFormErr(null);
    window.apiSend(`/api/clients/${client.id}/milestones`, 'POST', {
      title: title.trim(), target_date: targetDate || null, status,
    }).then(() => {
      setTitle(''); setTargetDate(''); setStatus('planned'); setVersion(v => v + 1);
    }).catch(err => setFormErr(err.message)).finally(() => setSaving(false));
  };

  return (
    <>
      <div className="page-head">
        <div>
          <div className="eyebrow gold"><span className="dot"/>Roadmap · {milestones.length} milestone{milestones.length === 1 ? '' : 's'}</div>
          <h1>Strategy roadmap</h1>
          <div className="sub">The plan for {client.name} across {activeYear}. Bars run to each target date; the red line is today. Requests roll up under these.</div>
        </div>
        <div className="actions">
          <label className="range-pill" style={{cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6}} title="Roadmap year">
            <Icon name="calendar" size={12}/>
            <select value={activeYear} onChange={e => setYearSel(Number(e.target.value))}
                    style={{background: 'transparent', border: 0, color: 'inherit', font: 'inherit', outline: 'none', cursor: 'pointer'}}>
              {years.map(y => <option key={y} value={y}>{y}</option>)}
            </select>
          </label>
        </div>
      </div>

      <div className="panel" style={{padding: '16px 18px'}}>
        <div className="gantt-head"><div/><div className="gantt-months">{MS_MONTHS.map(mo => <span key={mo}>{mo}</span>)}</div></div>
        {bars.map(({ m, left, width }) => (
          <div className="gantt-row" key={m.id}>
            <div className="gantt-label">{m.title}</div>
            <div className="gantt-track">
              <div className={`gantt-bar ${m.status}`} style={{left: `${left}%`, width: `${width}%`}}>{MS_STATUS[m.status] || m.status}</div>
              {showToday && <div className="gantt-today" style={{left: `${todayPct}%`}}/>}
            </div>
          </div>
        ))}
        {bars.length === 0 && <div className="mono-label" style={{padding: '10px 0', color: 'var(--text-dim)'}}>No milestones in {activeYear}.</div>}
      </div>

      {canWrite && (
        <form onSubmit={submit} className="panel" style={{marginTop: 16, padding: '16px 18px'}}>
          <div className="mono-label" style={{marginBottom: 10}}>Add milestone</div>
          <div style={{display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'flex-end'}}>
            <label style={{flex: '2 1 240px', display: 'flex', flexDirection: 'column', gap: 4}}>
              <span className="mono-label">Title</span>
              <input value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. Jurisdictions pages live" style={field}/>
            </label>
            <label style={{flex: '1 1 140px', display: 'flex', flexDirection: 'column', gap: 4}}>
              <span className="mono-label">Target date</span>
              <input type="date" value={targetDate} onChange={e => setTargetDate(e.target.value)} style={field}/>
            </label>
            <label style={{flex: '1 1 140px', display: 'flex', flexDirection: 'column', gap: 4}}>
              <span className="mono-label">Status</span>
              <select value={status} onChange={e => setStatus(e.target.value)} style={field}>
                <option value="planned">Planned</option>
                <option value="in-progress">In progress</option>
                <option value="done">Done</option>
              </select>
            </label>
            <button type="submit" className="btn btn-secondary" disabled={saving}>{saving ? 'Saving...' : 'Add milestone'}</button>
          </div>
          {formErr && <div className="error-state" style={{marginTop: 8}}>{formErr}</div>}
        </form>
      )}
    </>
  );
}

window.RoadmapView = RoadmapView;