// Hawk Eye — calendar grids + variants

// Habit filter chips (Physical Activity / SEX / PEE / RUN / +)
function HEHabitChips({ selected, onSelect }) {
  const chips = ['Physical Activity', 'SEX', 'PEE', 'RUN'];
  return (
    <div style={{
      display: 'flex', gap: 8, overflowX: 'auto',
      padding: '0 22px 14px', marginLeft: 0,
    }}>
      {chips.map(c => {
        const on = c === selected;
        return (
          <button key={c} onClick={() => onSelect(c)} style={{
            padding: '8px 16px', borderRadius: 999, flexShrink: 0,
            border: `1.5px solid ${on ? A.ink : A.rule}`,
            background: on ? A.ink : A.card,
            color: on ? '#fff' : A.ink,
            fontFamily: A.body, fontWeight: 600, fontSize: 13,
            letterSpacing: c === c.toUpperCase() ? '0.05em' : 0,
            cursor: 'pointer',
          }}>{c}</button>
        );
      })}
      <button style={{
        width: 36, height: 36, borderRadius: 999, flexShrink: 0,
        border: `1.5px dashed ${A.ink3}`, background: 'transparent', color: A.ink2,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <Iq width={14} height={14} strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></Iq>
      </button>
    </div>
  );
}

// Legend row
function HELegend({ items }) {
  return (
    <div style={{
      display: 'flex', gap: 18, alignItems: 'center',
      padding: '0 22px 14px',
      fontFamily: A.body, fontSize: 13, color: A.ink,
    }}>
      {items.map((it, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {it.dot}
          <span style={{ fontWeight: 500, color: A.ink }}>{it.label}</span>
        </div>
      ))}
    </div>
  );
}

// Calendar cell — 32px circle
function HECell({ state, label, today, sub }) {
  // states: done, missed, future, today, hidden
  const sz = 36;
  let bg = 'transparent', border = A.rule, color = A.ink2, content = null;
  if (state === 'done') {
    bg = HE_GREEN_BG; border = HE_GREEN; color = HE_GREEN;
    content = <Iq width={14} height={14} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>;
  } else if (state === 'missed') {
    bg = HE_RED_BG; border = '#F2B5B5'; color = HE_RED;
    content = <Iq width={12} height={12} strokeWidth="2.2"><path d="M6 6l12 12M18 6L6 18"/></Iq>;
  } else if (state === 'today') {
    bg = A.ink; border = A.ink; color = A.hype;
    content = <span style={{ fontWeight: 700, fontSize: 13 }}>{label}</span>;
  } else if (state === 'future') {
    bg = 'transparent'; border = A.rule; color = A.ink;
    content = <span style={{ fontWeight: 500, fontSize: 12 }}>{label}</span>;
  } else if (state === 'past-mute') {
    bg = '#EBE4D2'; border = '#DCD2BB'; color = '#9B9080';
    content = <Iq width={12} height={12} strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18"/></Iq>;
  } else if (state === 'meal-good') {
    bg = HE_GREEN_BG; border = HE_GREEN; color = HE_GREEN;
    content = <Iq width={14} height={14} strokeWidth="3"><path d="M4 12l6 6L20 6"/></Iq>;
  } else if (state === 'meal-bad') {
    bg = HE_RED_BG; border = HE_RED; color = HE_RED;
    content = <Iq width={12} height={12} strokeWidth="2.2"><path d="M6 6l12 12M18 6L6 18"/></Iq>;
  } else if (state === 'blank') {
    return <div style={{ width: sz, height: sz }} />;
  }
  return (
    <div style={{
      width: sz, height: sz, borderRadius: '50%',
      background: bg, border: `1.5px solid ${border}`, color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      {content}
    </div>
  );
}

// 7-col grid for a month — accepts an array of {state,label} with leading nulls for alignment
function HEMonthGrid({ title, weeks, showDay = true }) {
  return (
    <div style={{ padding: '4px 22px 22px' }}>
      {title && (
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 20,
          color: A.ink, padding: '14px 0 8px', letterSpacing: '-0.01em',
        }}>{title}</div>
      )}
      {showDay && (
        <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',
      }}>
        {weeks.map((c, i) => (
          <HECell key={i} {...c} />
        ))}
      </div>
    </div>
  );
}

// Build a Calendar-tab month grid: just past circles + today marker + future numbers
function buildCalendarMonth(monthOffset = 0, todayDate = 16, isCurrentMonth = true, daysInMonth = 31, leadBlanks = 5) {
  // leadBlanks: number of empty cells before day 1 (Mon-start grid)
  const cells = [];
  for (let i = 0; i < leadBlanks; i++) cells.push({ state: 'blank' });
  for (let d = 1; d <= daysInMonth; d++) {
    if (!isCurrentMonth) {
      cells.push({ state: 'past-mute' });
    } else if (d < todayDate) {
      cells.push({ state: 'past-mute' });
    } else if (d === todayDate) {
      cells.push({ state: 'today', label: d });
    } else {
      cells.push({ state: 'future', label: d });
    }
  }
  return cells;
}

// Habit-tab grid: missed for past, today highlight, future numeric
function buildHabitMonth(daysInMonth, leadBlanks, today, hasToday) {
  const cells = [];
  for (let i = 0; i < leadBlanks; i++) cells.push({ state: 'blank' });
  for (let d = 1; d <= daysInMonth; d++) {
    if (hasToday && d === today) cells.push({ state: 'done', label: d });
    else if (hasToday && d < today) cells.push({ state: 'missed', label: d });
    else if (!hasToday) cells.push({ state: 'missed', label: d });
    else cells.push({ state: 'future', label: d });
  }
  return cells;
}

// Food-tab grid: like habit but using meal-bad / meal-good
function buildFoodMonth(daysInMonth, leadBlanks, today, hasToday) {
  const cells = [];
  for (let i = 0; i < leadBlanks; i++) cells.push({ state: 'blank' });
  for (let d = 1; d <= daysInMonth; d++) {
    if (hasToday && d === today) cells.push({ state: 'meal-bad', label: d });
    else if (hasToday && d < today) cells.push({ state: 'past-mute' });
    else if (!hasToday) cells.push({ state: 'past-mute' });
    else cells.push({ state: 'future', label: d });
  }
  return cells;
}

Object.assign(window, {
  HEHabitChips, HELegend, HECell, HEMonthGrid,
  buildCalendarMonth, buildHabitMonth, buildFoodMonth,
});