// screen-missions.jsx — Today + Weekly missions; states (available/active/done/expired/skipped).

function MissionsScreen({ c, missions, completeMission, streak }) {
  const today = missions.filter(m => m.cadence === 'today');
  const weekly = missions.filter(m => m.cadence === 'weekly');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingBottom: 100 }}>
      <Header c={c} big title="Missions" right={<button style={{ width: 36, height: 36, border: 'none', background: 'transparent', cursor: 'pointer' }}><IcQuestion size={20} color={c.textMuted} /></button>} />

      {/* STREAK */}
      <div style={{ padding: '0 20px' }}>
        <Card c={c} kind="highlighted" style={{ padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: c.surface, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <IcMedal size={22} color={c.primary} />
          </div>
          <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontSize: 22, fontWeight: 700, color: c.primaryDk, letterSpacing: -0.3, fontVariantNumeric: 'tabular-nums' }}>{streak}</span>
            <span style={{ fontSize: 13, fontWeight: 600, color: c.primaryDk, opacity: 0.75 }}>day streak</span>
          </div>
          <div style={{ display: 'flex', gap: 3 }}>
            {[1,2,3,4,5,6,7].map(i => (
              <div key={i} style={{
                width: 9, height: 16, borderRadius: 2,
                background: i <= streak ? c.primary : c.borderSoft,
              }} />
            ))}
          </div>
        </Card>
      </div>

      {/* TODAY */}
      <div style={{ padding: '0 20px' }}>
        <SectionHd c={c} title="Today" right={<span style={{ fontSize: 13, fontWeight: 500, color: c.textLight }}>{today.filter(m => m.state === 'done').length} of {today.length} done</span>} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 10 }}>
          {today.map(m => <MissionCard key={m.id} c={c} m={m} onComplete={() => completeMission(m.id)} />)}
        </div>
      </div>

      {/* WEEKLY */}
      <div style={{ padding: '0 20px' }}>
        <SectionHd c={c} title="This week" right={<span style={{ fontSize: 13, fontWeight: 500, color: c.textLight }}>Resets Sunday</span>} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 10 }}>
          {weekly.map(m => <MissionCard key={m.id} c={c} m={m} onComplete={() => completeMission(m.id)} />)}
        </div>
      </div>
    </div>
  );
}

function MissionCard({ c, m, onComplete }) {
  // States: available (cta), active (countdown), done (subtle check + tint), expired, skipped
  const stateStyles = {
    available: { bd: c.borderSoft, bg: c.surface,    op: 1 },
    active:    { bd: c.accent + '66', bg: c.accentSoft, op: 1 },
    done:      { bd: c.borderSoft, bg: c.surfaceAlt, op: 1 },
    expired:   { bd: c.borderSoft, bg: c.surface,    op: 0.55 },
    skipped:   { bd: c.borderSoft, bg: c.surface,    op: 0.55 },
  }[m.state];
  const Icon = m.icon;

  return (
    <div style={{
      background: stateStyles.bg, border: `1px solid ${stateStyles.bd}`,
      borderRadius: 18, padding: 16, opacity: stateStyles.op,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{ width: 40, height: 40, borderRadius: 11, background: m.state === 'done' ? c.primarySoft : c.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, border: m.state === 'done' ? `1.5px solid ${c.primary}` : 'none' }}>
          {m.state === 'done' ? <IcCheck size={20} color={c.primary} /> : <Icon size={20} color={c.text} />}
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 15.5, fontWeight: 600, color: c.text, textDecoration: m.state === 'done' ? 'line-through' : 'none', textDecorationColor: c.textLight, lineHeight: 1.2 }}>{m.title}</span>
            {m.state === 'active' && <Chip tone="accent" size="sm" c={c} icon={<IcClock size={11} color="#8A5A1E" />}>{m.timeLeft}</Chip>}
            {m.state === 'expired' && <Chip tone="neutral" size="sm" c={c}>Expired</Chip>}
            {m.state === 'skipped' && <Chip tone="neutral" size="sm" c={c}>Skipped</Chip>}
          </div>

        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <Chip tone="primary" size="sm" c={c} icon={<IcCoins size={11} color={c.primaryDk} />}>+{m.points} pts</Chip>
        <Chip tone="sand" size="sm" c={c}>~${m.dollars} saved</Chip>
        {m.window && <Chip tone="neutral" size="sm" c={c} icon={<IcClock size={11} color={c.textMuted} />}>{m.window}</Chip>}
        {(m.state === 'available' || m.state === 'active') && (
          <Btn kind={m.state === 'active' ? 'accent' : 'primary'} size="sm" c={c} onClick={onComplete} icon={<IcCheck size={14} color="#fff" />} style={{ marginLeft: 'auto' }}>
            I did it
          </Btn>
        )}
      </div>
    </div>
  );
}

const DEFAULT_MISSIONS = [
  { id: 'm1', cadence: 'today', icon: typeof IcSun !== 'undefined' ? IcSun : null, title: 'Aircon to 25°C between 8–11pm', short: 'Aircon 25°', desc: 'Every 1°C up saves about 6%. Try one notch warmer tonight.', points: 50, dollars: '0.85', window: '8–11pm', state: 'active', timeLeft: '2h 14m' },
  { id: 'm2', cadence: 'today', icon: IcWater, title: 'Water heater off by 7am', short: 'Heater off', desc: 'Heat up 30 min before showering — not all morning.', points: 30, dollars: '0.50', state: 'available' },
  { id: 'm3', cadence: 'today', icon: IcWind,  title: 'Open a window before 7pm', short: 'Open a window', desc: 'It cools to 27°C outside tonight. Free aircon for 90 min.', points: 25, dollars: '0.40', state: 'done' },
  { id: 'w1', cadence: 'weekly', icon: IcLeaf,  title: 'Stay under 60 kWh this week', short: 'Under 60 kWh', desc: 'You\'re at 38 kWh on day 4. Keep going.', points: 200, dollars: '5.40', state: 'active', timeLeft: '3d 14h' },
  { id: 'w2', cadence: 'weekly', icon: IcMission, title: 'Complete 5 daily missions', short: 'Do 5 quests', desc: 'Any combination across the week.', points: 150, dollars: '3.20', state: 'available' },
  { id: 'w3', cadence: 'weekly', icon: IcFridge, title: 'Defrost your fridge', short: 'Defrost fridge', desc: 'A 5mm ice layer adds ~10% to fridge running cost.', points: 100, dollars: '2.10', state: 'expired' },
];

Object.assign(window, { MissionsScreen, MissionCard, DEFAULT_MISSIONS });