// Hawk Eye — Warm Coach
// Bottom-sheet modal: Calendar / Countdown tabs.
// Calendar mode has sub-tabs: Calendar / Habit / Food.

// Aliases to the warm-coach palette (no purple anywhere).
const HE_ACCENT    = A.ink;     // black — used for active/today/selected
const HE_ACCENT_FG = '#fff';    // text on black
const HE_HYPE      = A.hype;    // lime — paired with black for today number
const HE_RED       = '#E07878';
const HE_RED_BG    = '#FCE6E6';
const HE_GREEN     = '#22A664';
const HE_GREEN_BG  = '#D9F2E4';

// shared chip / sheet styles
function HEHandle() {
  return (
    <div style={{
      width: 40, height: 4, borderRadius: 2,
      background: 'rgba(0,0,0,0.18)',
      margin: '10px auto 0',
    }} />
  );
}

function HETopBar({ onClose }) {
  return (
    <div style={{
      padding: '14px 22px 14px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      borderBottom: `1px solid ${A.rule}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontSize: 24 }}>🦅</span>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 24,
          letterSpacing: '-0.01em', color: A.ink,
        }}>Hawk Eye</div>
      </div>
      <div style={{ color: A.ink2 }}>
        <Iq width={20} height={20} strokeWidth="2.2"><path d="M6 6l12 12M18 6L6 18"/></Iq>
      </div>
    </div>
  );
}

// Primary tabs: Calendar / Countdown
function HEModeToggle({ mode, onChange }) {
  const opts = [
    { id: 'calendar',  label: 'Calendar',  icon: <Iq width={14} height={14}><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></Iq> },
    { id: 'countdown', label: 'Countdown', icon: <Iq width={14} height={14}><circle cx="12" cy="13" r="8"/><path d="M12 9v4l3 2M9 2h6"/></Iq> },
  ];
  return (
    <div style={{
      display: 'flex', gap: 4, padding: 4, borderRadius: 14,
      background: A.rest, margin: '14px 22px 0',
    }}>
      {opts.map((o) => {
        const on = o.id === mode;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            flex: 1, padding: '11px 0',
            border: 'none', borderRadius: 10,
            background: on ? HE_ACCENT : 'transparent',
            color: on ? HE_HYPE : A.ink2,
            fontFamily: A.body, fontWeight: 700, fontSize: 14,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            cursor: 'pointer',
          }}>
            {o.icon} {o.label}
          </button>
        );
      })}
    </div>
  );
}

// Calendar sub-tabs: Calendar / Habit / Food
function HESubTabs({ tab, onChange }) {
  const opts = [
    { id: 'cal',   label: 'Calendar', icon: null },
    { id: 'habit', label: 'Habit',    icon: '🏷️' },
    { id: 'food',  label: 'Food',     icon: '🥗' },
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr 1fr',
      gap: 0, padding: 4, borderRadius: 14,
      background: A.rest, margin: '10px 22px 14px',
    }}>
      {opts.map((o) => {
        const on = o.id === tab;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            padding: '10px 0', border: 'none', borderRadius: 10,
            background: on ? A.card : 'transparent',
            color: on ? A.ink : A.ink2,
            fontFamily: A.body, fontWeight: on ? 700 : 500, fontSize: 14,
            boxShadow: on ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            cursor: 'pointer',
          }}>
            {o.icon && <span style={{ fontSize: 13 }}>{o.icon}</span>}{o.label}
          </button>
        );
      })}
    </div>
  );
}

Object.assign(window, { HE_ACCENT, HE_ACCENT_FG, HE_HYPE, HE_RED, HE_RED_BG, HE_GREEN, HE_GREEN_BG, HEHandle, HETopBar, HEModeToggle, HESubTabs });