// Hawk Eye — improved Calendar + Countdown (Warm Coach)
// Reuses globals: A, HESheet, HEModeToggle, HESubTabs, HELegend, HEMonthGrid,
// HE_GREEN, HE_GREEN_BG, HE_RED, HE_RED_BG, Iq, IFire.

function scoreTone(s) {
  if (s >= 70) return { bg: HE_GREEN_BG, bd: HE_GREEN, fg: HE_GREEN };
  if (s >= 45) return { bg: '#FFF1DC', bd: A.warn, fg: A.warn };
  return { bg: HE_RED_BG, bd: HE_RED, fg: HE_RED };
}

// small swatch for the legend
function Sw({ c, bg }) {
  return <span style={{ width: 16, height: 16, borderRadius: 8, background: bg, border: `1.5px solid ${c}`, display: 'inline-block' }} />;
}

// tick / cross marks reused in cells + legend
const TickMark = <Iq width={17} height={17} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>;
const CrossMark = <Iq width={14} height={14} strokeWidth="2.8"><path d="M6 6l12 12M18 6L6 18"/></Iq>;

// ── month of done / missed cells ──
function HeatMonth({ title, lead, days, today, done }) {
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(<div key={'b' + i} style={{ width: 36, height: 36 }} />);
  for (let d = 1; d <= days; d++) {
    if (d === today) {
      cells.push(<div key={d} style={cellBox(A.ink, A.ink)}><span style={{ fontWeight: 800, fontSize: 13, color: '#fff' }}>{d}</span></div>);
    } else if (d < today) {
      const ok = done[d - 1];
      cells.push(
        <div key={d} style={cellBox(ok ? HE_GREEN_BG : HE_RED_BG, ok ? HE_GREEN : HE_RED)}>
          <span style={{ color: ok ? HE_GREEN : HE_RED, display: 'flex' }}>{ok ? TickMark : CrossMark}</span>
        </div>
      );
    } else {
      cells.push(<div key={d} style={cellBox('transparent', A.rule)}><span style={{ fontWeight: 500, fontSize: 12, color: A.ink3 }}>{d}</span></div>);
    }
  }
  return (
    <div style={{ padding: '4px 22px 22px' }}>
      {title && <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 20, color: A.ink, padding: '8px 0 8px' }}>{title}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6, padding: '4px 0 8px', fontSize: 12, color: A.ink3, fontWeight: 600 }}>
        {['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'].map(d => <div key={d} style={{ textAlign: 'center' }}>{d}</div>)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6, justifyItems: 'center' }}>{cells}</div>
    </div>
  );
}
function cellBox(bg, bd) {
  return { width: 36, height: 36, borderRadius: '50%', background: bg, border: `1.5px solid ${bd}`, display: 'flex', alignItems: 'center', justifyContent: 'center' };
}

// ─────────────────────────────────────────────
// Improved CALENDAR
// ─────────────────────────────────────────────
function HE_CalendarV2() {
  // one habit, one outcome per day: did it (true) or not (false)
  const done = [true, true, false, true, true, false, true, true, true, false, true, false, true, true, true];
  const dCount = done.filter(Boolean).length;
  const mCount = done.length - dCount;
  return (
    <HESheet>
      <HEModeToggle mode="calendar" onChange={() => {}} />
      <HESubTabs tab="cal" onChange={() => {}} />

      {/* month summary card */}
      <div style={{ margin: '0 22px 14px', padding: '14px 16px', borderRadius: 16, background: A.card, border: `1px solid ${A.rule}` }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 18, color: A.ink }}>May 2026</div>
            <div style={{ fontFamily: A.mono, fontSize: 10, fontWeight: 600, letterSpacing: '0.12em', color: A.ink3, textTransform: 'uppercase', marginTop: 2 }}>Morning Run</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <span style={navBtn}><Iq width={14} height={14} strokeWidth="2.4"><path d="M15 6l-6 6 6 6"/></Iq></span>
            <span style={navBtn}><Iq width={14} height={14} strokeWidth="2.4"><path d="M9 6l6 6-6 6"/></Iq></span>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8, marginTop: 12 }}>
          {[
            { v: dCount, l: 'DONE', fg: HE_GREEN },
            { v: mCount, l: 'MISSED', fg: HE_RED },
            { v: '3', l: 'STREAK', fg: A.ink },
          ].map(s => (
            <div key={s.l} style={{ background: A.rest, borderRadius: 12, padding: '10px 8px', textAlign: 'center' }}>
              <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 20, color: s.fg, lineHeight: 1 }}>{s.v}</div>
              <div style={{ fontSize: 8.5, color: A.ink3, fontWeight: 700, letterSpacing: '0.08em', marginTop: 4 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* legend */}
      <div style={{ display: 'flex', gap: 18, alignItems: 'center', padding: '0 22px 14px', fontFamily: A.body, fontSize: 12.5, color: A.ink }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{greenDot}Done</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>{redDot}Missed</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Sw c={A.ink} bg={A.ink} />Today</span>
      </div>

      <HeatMonth lead={4} days={31} today={16} done={done} />
    </HESheet>
  );
}
const navBtn = { width: 30, height: 30, borderRadius: 9, background: A.rest, color: A.ink, display: 'flex', alignItems: 'center', justifyContent: 'center' };

// ─────────────────────────────────────────────
// Improved COUNTDOWN — to an occasion
// ─────────────────────────────────────────────
function HE_CountdownV2() {
  const total = 29, done = 10, left = 19;
  // grid: done checks, today, then days-left numbers descending
  const cells = [];
  for (let i = 0; i < 4; i++) cells.push({ state: 'blank' });
  for (let i = 0; i < done; i++) cells.push({ state: 'done' });
  cells.push({ state: 'today', label: left });
  for (let n = left - 1; n >= 1; n--) cells.push({ state: 'future', label: n });

  return (
    <HESheet>
      <HEModeToggle mode="countdown" onChange={() => {}} />

      {/* hero */}
      <div style={{ margin: '4px 22px 16px', padding: '20px 20px 22px', borderRadius: 20, background: A.ink, position: 'relative', overflow: 'hidden' }}>
        <div style={{ fontFamily: A.mono, fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', color: A.hype, textTransform: 'uppercase' }}>Counting down to</div>

        {/* occasion chip */}
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 10, padding: '7px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.12)', border: '1px solid rgba(255,255,255,0.18)' }}>
          <span style={{ fontSize: 18 }}>🎤</span>
          <span style={{ fontFamily: A.display, fontWeight: 800, fontSize: 16, color: '#fff', letterSpacing: '0.01em' }}>Debate Competition</span>
        </div>

        {/* big number */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 14 }}>
          <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 76, color: '#fff', lineHeight: 0.85, letterSpacing: '-0.04em' }}>{left}</div>
          <div>
            <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 20, color: A.hype, letterSpacing: '0.06em' }}>DAYS LEFT</div>
            <div style={{ fontFamily: A.body, fontSize: 12.5, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>until Tue · Jun 24</div>
          </div>
        </div>

        {/* progress */}
        <div style={{ marginTop: 18 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7, fontFamily: A.body, fontSize: 12, color: 'rgba(255,255,255,0.7)', fontWeight: 600 }}>
            <span>{done} of {total} days in</span>
            <span>{Math.round((done / total) * 100)}%</span>
          </div>
          <div style={{ height: 8, borderRadius: 6, background: 'rgba(255,255,255,0.16)', overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${(done / total) * 100}%`, background: A.hype, borderRadius: 6 }} />
          </div>
        </div>
      </div>

      {/* encouragement */}
      <div style={{ padding: '0 22px 14px', fontFamily: A.body, fontSize: 13.5, color: A.ink2, lineHeight: 1.45 }}>
        <strong style={{ color: A.ink }}>{done} days in, {left} to go.</strong> Stay locked in — every box you fill is one closer to showing up the way you want to.
      </div>

      {/* legend */}
      <HELegend items={[
        { dot: greenDot, label: 'Done' },
        { dot: todayDot, label: 'Today' },
        { dot: futureDot, label: 'To go' },
      ]} />

      <HEMonthGrid weeks={cells} showDay={false} />
    </HESheet>
  );
}

Object.assign(window, { HE_CalendarV2, HE_CountdownV2, scoreTone });