// CALENDAR view — 14-week heatmap

function CalendarView() {
  const { state, update } = useStore();
  const data = window.PLAN_DATA;
  const TODAY = useToday();
  const today = fmtDate(TODAY);
  const [hover, setHover] = React.useState(null);
  const [focusDate, setFocusDate] = React.useState(state.focusDate || null);

  React.useEffect(() => {
    if (state.focusDate) { setFocusDate(state.focusDate); update({ focusDate: null }); }
  }, [state.focusDate]);

  // Map calendar by date
  const byDate = {};
  data.calendar.forEach(d => byDate[d.date] = d);

  // Build a grid: weeks (rows) × Mon-Sun (cols)
  // Find first Monday on/before sprint start
  const sprintStart = parseDate(data.meta.sprintStart);
  // Walk back to the Monday on/before the first calendar entry so the grid aligns
  const firstEntry = parseDate(data.calendar[0].date);
  const startMon = new Date(firstEntry);
  while (startMon.getDay() !== 1) startMon.setDate(startMon.getDate() - 1);

  const sprintEnd = parseDate(data.meta.sprintEnd);
  const lastEntry = parseDate(data.calendar[data.calendar.length - 1].date);
  // weeks needed
  const totalDays = daysBetween(startMon, lastEntry) + 1;
  const weeks = Math.ceil(totalDays / 7);

  const grid = [];
  for (let w = 0; w < weeks; w++) {
    const row = [];
    for (let dow = 0; dow < 7; dow++) {
      const d = new Date(startMon);
      d.setDate(d.getDate() + w*7 + dow);
      row.push(d);
    }
    grid.push(row);
  }

  function dayCell(d) {
    const k = fmtDate(d);
    const entry = byDate[k];
    const ds = state.days[k] || {};
    if (!entry) {
      return { kind: 'empty', date: k, display: d.toLocaleDateString('en-US', { month:'short', day:'numeric' }) };
    }
    return { kind: 'real', date: k, entry, done: ds.done, isToday: k === today };
  }

  const focusEntry = focusDate ? byDate[focusDate] : null;
  const focusState = focusDate ? (state.days[focusDate] || {}) : {};

  function setFocusDay(patch) {
    update(prev => ({
      ...prev,
      days: { ...prev.days, [focusDate]: { ...prev.days[focusDate], ...patch } }
    }));
  }

  const typeColors = {
    DSA: 'oklch(0.86 0.13 200)',
    LLD: 'oklch(0.84 0.14 165)',
    MOCK: 'oklch(0.85 0.16 25)',
    APPLY: 'var(--accent)',
    POWER: 'oklch(0.85 0.15 80)',
    LIGHT: 'oklch(0.7 0.04 250)',
    RECOVERY: 'oklch(0.7 0.05 220)',
  };

  return (
    <div className="fade-in">
      <div className="section-h">
        <div>
          <div className="kicker">14-Week Sprint</div>
          <h1 className="h-title">Every <em>day</em> mapped.</h1>
        </div>
        <div style={{display:'flex', gap:'14px', alignItems:'center', flexWrap:'wrap'}}>
          {Object.entries(typeColors).map(([k, c]) => (
            <div key={k} style={{display:'flex',alignItems:'center',gap:'6px'}}>
              <div style={{width:'10px',height:'10px',borderRadius:'2px',background:c}}/>
              <span className="mono" style={{fontSize:'10px',color:'var(--ink-2)',letterSpacing:'0.06em'}}>{k}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Heatmap */}
      <div className="card" style={{padding:'24px 28px', position:'relative'}}>
        {/* Day-of-week header */}
        <div style={{display:'grid', gridTemplateColumns:'60px repeat(7, 1fr)', gap:'6px', marginBottom:'10px'}}>
          <div></div>
          {['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d => (
            <div key={d} className="mono" style={{fontSize:'10px',color:'var(--ink-3)',letterSpacing:'0.1em', textAlign:'center'}}>{d.toUpperCase()}</div>
          ))}
        </div>

        {grid.map((week, wi) => (
          <div key={wi} style={{display:'grid', gridTemplateColumns:'60px repeat(7, 1fr)', gap:'6px', marginBottom:'6px'}}>
            <div className="mono" style={{
              fontSize:'10px',
              color:'var(--ink-3)',
              letterSpacing:'0.06em',
              display:'flex',
              alignItems:'center',
              justifyContent:'flex-end',
              paddingRight:'8px',
            }}>
              {week[0].toLocaleDateString('en-US', { month:'short', day:'numeric' })}
            </div>
            {week.map((d, di) => {
              const c = dayCell(d);
              if (c.kind === 'empty') {
                return <div key={di} style={{
                  height: '54px',
                  borderRadius: '6px',
                  background: 'oklch(0.18 0.012 250)',
                  opacity: 0.4,
                }}/>;
              }
              const color = typeColors[c.entry.type] || 'var(--line)';
              return (
                <button
                  key={di}
                  onClick={() => setFocusDate(c.date)}
                  onMouseEnter={(e) => setHover({ x: e.clientX, y: e.clientY, entry: c.entry })}
                  onMouseLeave={() => setHover(null)}
                  onMouseMove={(e) => setHover({ x: e.clientX, y: e.clientY, entry: c.entry })}
                  style={{
                    height: '54px',
                    borderRadius: '6px',
                    background: c.done ? color : `color-mix(in oklch, ${color} 20%, var(--bg-3))`,
                    border: c.isToday ? `1.5px solid var(--accent)` : c.done ? `1px solid ${color}` : `1px solid var(--line-soft)`,
                    color: c.done ? 'var(--bg)' : 'var(--ink-2)',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'flex-start',
                    justifyContent: 'space-between',
                    padding: '6px 8px',
                    transition: 'all 0.15s',
                    position: 'relative',
                    cursor: 'pointer',
                    fontFamily: 'var(--mono)',
                    fontSize: '11px',
                  }}
                  onMouseOver={(e) => { e.currentTarget.style.transform='scale(1.05)'; e.currentTarget.style.zIndex=10; }}
                  onMouseOut={(e) => { e.currentTarget.style.transform='scale(1)'; e.currentTarget.style.zIndex=1; }}
                >
                  <span style={{fontWeight:600, fontSize:'11px', color: c.done ? 'var(--bg)' : c.isToday ? 'var(--accent)' : 'var(--ink)'}}>
                    {d.getDate()}
                  </span>
                  <span style={{fontSize:'8px', letterSpacing:'0.1em', opacity: c.done ? 0.85 : 0.7}}>
                    {c.entry.type === 'POWER' ? 'PWR' : c.entry.type === 'RECOVERY' ? 'REST' : c.entry.type === 'LIGHT' ? 'LITE' : c.entry.type}
                  </span>
                  {c.done && <div style={{
                    position:'absolute', top:'4px', right:'4px',
                    width:'6px', height:'6px', borderRadius:'50%',
                    background:'var(--bg)'
                  }}/>}
                </button>
              );
            })}
          </div>
        ))}
      </div>

      {/* Tooltip */}
      {hover && (
        <div className="tip" style={{
          left: Math.min(hover.x + 16, window.innerWidth - 380),
          top: hover.y + 14,
          maxWidth: '360px',
          whiteSpace: 'normal',
          lineHeight: 1.5,
        }}>
          <div className="mono" style={{fontSize:'9px', letterSpacing:'0.1em', color:'var(--ink-3)', marginBottom:'4px'}}>
            {hover.entry.day.toUpperCase()} · {hover.entry.display.split('(')[1]?.replace(')','')} · {hover.entry.phase}
          </div>
          <div style={{fontSize: '11px', color: 'var(--bg-2)'}}>
            {(hover.entry.dsa || hover.entry.lld).slice(0, 200)}{(hover.entry.dsa || hover.entry.lld).length > 200 ? '...' : ''}
          </div>
        </div>
      )}

      {/* Focus modal */}
      {focusEntry && (
        <div className="modal-bg" onClick={() => setFocusDate(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start', marginBottom:'18px'}}>
              <div>
                <div className="kicker">{focusEntry.day} · {focusEntry.display}</div>
                <div style={{fontFamily:'var(--serif)',fontSize:'40px',letterSpacing:'-0.02em',marginTop:'4px',lineHeight:1}}>
                  {focusEntry.type === 'DSA' && 'Pattern day.'}
                  {focusEntry.type === 'LLD' && 'Design day.'}
                  {focusEntry.type === 'POWER' && 'Power Saturday.'}
                  {focusEntry.type === 'MOCK' && 'Mock interview.'}
                  {focusEntry.type === 'APPLY' && 'Application day.'}
                  {focusEntry.type === 'LIGHT' && 'Light review.'}
                  {focusEntry.type === 'RECOVERY' && 'Recovery.'}
                </div>
                <div style={{display:'flex',gap:'8px',marginTop:'12px'}}>
                  <PhasePill phase={focusEntry.phase} />
                  <TypePill type={focusEntry.type} />
                  <Pill>{focusEntry.hours}h</Pill>
                </div>
              </div>
              <button className="btn ghost" onClick={() => setFocusDate(null)}>✕ close</button>
            </div>

            {focusEntry.dsa && <div style={{marginTop:'18px'}}>
              <div className="mono" style={{fontSize:'10px',letterSpacing:'0.14em',color:'oklch(0.86 0.13 200)',marginBottom:'8px'}}>DSA</div>
              <p style={{lineHeight:'1.7'}}>{focusEntry.dsa}</p>
            </div>}
            {focusEntry.lld && <div style={{marginTop:'18px'}}>
              <div className="mono" style={{fontSize:'10px',letterSpacing:'0.14em',color:'oklch(0.84 0.14 165)',marginBottom:'8px'}}>LLD / OTHER</div>
              <p style={{lineHeight:'1.7'}}>{focusEntry.lld}</p>
            </div>}

            <div style={{marginTop:'24px',paddingTop:'18px',borderTop:'1px solid var(--line-soft)'}}>
              <div style={{display:'flex',alignItems:'center',gap:'12px',marginBottom:'12px'}}>
                <Check on={focusState.done} onClick={() => setFocusDay({ done: !focusState.done })} size={22} />
                <span style={{fontSize:'13px',fontWeight:500}}>{focusState.done ? 'Day complete' : 'Mark day complete'}</span>
              </div>
              <textarea
                className="textarea"
                placeholder="Notes — wins, blockers, weak problems..."
                value={focusState.note || ''}
                onChange={e => setFocusDay({ note: e.target.value })}
                style={{minHeight:'80px'}}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.CalendarView = CalendarView;