/* HTD Command Center — Program 4.1 (matches approved mock #01) */
(function () {
  const { HTDIcon: Icon } = window;
  const F = window.HTD_FIX;

  function MetricTile({ k, label, children, style }) {
    // variadic children (not an array) — avoids React's unkeyed-list warning,
    // since MetricTile is invoked as a plain function owned by CommandCenter
    return React.createElement('div', { key: k, className: 'metric-tile', style },
      React.createElement('div', { className: 'm-label' }, label),
      children);
  }

  function CommandCenter({ tweaks }) {
    const nav = window.HTDUI.useNav();
    const toast = window.HTDUI.toast;
    const t = F.today, crew = F.crew, streak = F.streak;
    const [override, setOverride] = React.useState(null);
    const [swapped, setSwapped] = React.useState(false);
    const st = override || ((tweaks && tweaks.todayState) || 'ASSIGNED');
    const isDone = st==='COMPLETED', isMissed = st==='MISSED', isRecovery = st==='RECOVERY', isNone = st==='NO MISSION', isPre = st==='PRE-DROP', isOver = st==='OVERLOAD';
    const missionTitle = swapped ? 'ROW 10K STEADY' : t.title;
    // live drop pulse
    const [live, setLive] = React.useState(F.drop.liveNow);
    React.useEffect(() => { const id = setInterval(() => setLive(v => v + Math.floor(Math.random()*5) - 1), 1800); return () => clearInterval(id); }, []);
    const [shields, setShields] = React.useState(F.shields.available);

    const heroPanel = React.createElement('div', { style: { padding: '8px 2px 2px' } }, [
      isMissed && React.createElement('div', { key: 'mb', className: 'panel panel-pad row between', style: { marginBottom: 14, borderColor: 'rgba(255,59,48,0.45)' } }, [
        React.createElement('div', { key: 'a' }, [
          React.createElement('div', { key: '1', className: 'label-mono danger-c' }, 'MISSED YESTERDAY'),
          React.createElement('div', { key: '2', style: { fontFamily: 'var(--ui)', fontWeight: 600, fontSize: 13.5, marginTop: 4, color: 'var(--bone)' } }, 'Missed does not mean done.'),
        ]),
        React.createElement('button', { key: 'b', className: 'label-mono danger-c', onClick: () => nav.push('FailureReview'),
          style: { background: 'none', border: '1px solid rgba(255,59,48,0.4)', borderRadius: 6, padding: '8px 12px', cursor: 'pointer' } }, 'REVIEW'),
      ]),
      isOver && React.createElement('div', { key: 'ob', className: 'panel panel-pad', style: { marginBottom: 14, borderColor: 'rgba(255,195,7,0.5)', boxShadow: '0 0 24px -10px rgba(255,195,7,0.4)' } }, [
        React.createElement('div', { key: '1', className: 'row between', style: { marginBottom: 10 } }, [
          React.createElement('span', { key: 'a', className: 'label-mono amber-c' }, '⚠ OVERLOAD DETECTED · GUARDRAIL ACTIVE'),
        ]),
        React.createElement('div', { key: '2', className: 'row', style: { gap: 0 } },
          [['STRAIN', F.overload.strain], ['HRV', F.overload.hrvDrop], ['SLEEP DEBT', F.overload.sleepDebt]].map(([l, v], i) =>
            React.createElement('div', { key: l, style: { flex: 1, borderLeft: i ? '1px solid var(--hairline)' : 'none', paddingLeft: i ? 12 : 0 } }, [
              React.createElement('div', { key: 'v', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 19, color: 'var(--amber)' } }, v),
              React.createElement('div', { key: 'l', className: 'label-mono', style: { marginTop: 3 } }, l),
            ]))),
        React.createElement('div', { key: '3', className: 'muted', style: { fontSize: 12.5, lineHeight: 1.5, marginTop: 12 } }, F.overload.line),
      ]),
      React.createElement('div', { key: 'e', className: 'eyebrow' }, isOver ? 'GUARDRAIL · FORCED RECOVERY' : isPre ? 'NEXT MISSION DROP' : isNone ? 'NO MISSION ASSIGNED' : isRecovery ? 'RECOVERY MISSION' : isDone ? 'MISSION PROVEN · TODAY' : t.label),
      React.createElement('h1', { key: 'h', className: 'display-xl', style: { margin: '7px 0 6px', color: isDone ? 'var(--acid)' : isOver ? 'var(--amber)' : 'var(--bone)' } },
        isOver ? 'STAND DOWN' : isPre ? '04:17:32' : isNone ? 'STANDARD PENDING' : isRecovery ? 'Z1 WALK + MOBILITY' : missionTitle),
      React.createElement('div', { key: 's', className: 'muted', style: { fontSize: 14, marginBottom: 12 } },
        isOver ? 'Discipline includes restraint. Today’s mission is recovery — and it counts.' : isPre ? 'Mission classified until 05:00. Same drop, worldwide.' : isNone ? 'Readiness synced. Generate today’s assignment.' : isRecovery ? 'Recovery is a discipline, not weakness.' : isDone ? 'Proof locked. Standard held.' : (swapped ? 'Same engine. Zero impact.' : t.subtitle)),
      React.createElement('div', { key: 'c', className: 'row', style: { gap: 8 } },
        (isOver ? ['SLEEP 9H', 'Z1 WALK', 'HYDRATE'] : isPre ? ['CLASSIFIED', 'GLOBAL DROP'] : isNone ? ['ADAPTIVE', 'READY'] : isRecovery ? ['RECOVERY', 'DELOAD'] : t.tags).map((tag, i) => React.createElement('span', { key: i, className: 'chip',
          style: isDone ? { color: 'var(--acid)', borderColor: 'var(--border-active)' } : undefined }, isDone && i === 0 ? '✓ PROVEN · HIGH CONF' : tag))),
    ]);

    const metrics = React.createElement('div', { className: 'metric-grid', style: { marginTop: 16 } }, [
      // READINESS
      MetricTile({ k: 'r', label: 'READINESS', children: React.createElement('div', { className: 'row', style: { alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 'auto' } }, [
        React.createElement('div', { key: 'a', className: 'row', style: { alignItems: 'baseline', gap: 2 } }, [
          React.createElement('span', { key: 'n', className: 'num-mono', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 52, lineHeight: .8, color: 'var(--acid)' } }, t.readiness),
          React.createElement('span', { key: 'd', className: 'label-mono', style: { color: 'var(--steel)' } }, '/100'),
        ]),
        React.createElement('div', { key: 'b', style: { textAlign: 'right' } }, [
          React.createElement('div', { key: '1', className: 'label-mono' }, 'HRV'),
          React.createElement('div', { key: '2', className: 'num-mono', style: { fontWeight: 600, fontSize: 17, color: 'var(--bone)' } }, t.hrv),
        ]),
      ]) }),
      // DIFFICULTY
      MetricTile({ k: 'd', label: 'DIFFICULTY', children: React.createElement('div', { style: { marginTop: 'auto' } }, [
        React.createElement('div', { key: 'a', className: 'row', style: { alignItems: 'baseline', gap: 3 } }, [
          React.createElement('span', { key: 'n', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 38, lineHeight: .85, color: 'var(--bone)' } }, t.difficulty.toFixed(1)),
          React.createElement('span', { key: 'd', className: 'label-mono', style: { color: 'var(--steel)' } }, '/10'),
        ]),
        React.createElement('div', { key: 'b', className: 'label-mono', style: { color: 'var(--danger)', marginTop: 5 } }, t.difficultyLabel),
      ]) }),
      // RECOVERY
      MetricTile({ k: 'rc', label: 'RECOVERY', children: React.createElement('div', { className: 'row between', style: { alignItems: 'flex-end', marginTop: 'auto' } }, [
        React.createElement('span', { key: 'n', style: { fontFamily: 'var(--display)', fontWeight: 600, fontSize: 26, lineHeight: 1, color: 'var(--bone)' } }, t.recovery + '%'),
        React.createElement('span', { key: 'l', className: 'label-mono', style: { color: 'var(--acid)' } }, t.recoveryLabel),
      ]) }),
      // PROOF REQUIRED
      MetricTile({ k: 'p', label: 'PROOF REQUIRED', children: React.createElement('div', { style: { marginTop: 'auto' } },
        t.proof.map((p, i) => React.createElement('div', { key: i, style: { fontFamily: 'var(--ui)', fontWeight: 600, fontSize: 15, letterSpacing: .3, color: 'var(--bone)', lineHeight: 1.25 } }, p))) }),
    ]);

    // mission drop strip — live co-presence + expiry window
    const dropStrip = (!isNone) ? React.createElement('div', { className: 'row between panel', style: { marginTop: 14, padding: '11px 14px', borderColor: isPre ? 'var(--hairline-2)' : 'var(--hairline)' } }, [
      React.createElement('div', { key: 'a', className: 'row', style: { gap: 8 } }, [
        React.createElement('span', { key: 'd', style: { width: 7, height: 7, borderRadius: '50%', background: 'var(--acid)', boxShadow: '0 0 8px var(--acid)' } }),
        React.createElement('span', { key: 't', className: 'label-mono', style: { color: 'var(--bone)' } },
          live.toLocaleString() + ' MID-MISSION NOW'),
      ]),
      React.createElement('span', { key: 'b', className: 'label-mono', style: { color: isPre ? 'var(--acid)' : isDone ? 'var(--steel)' : 'var(--amber)' } },
        isPre ? 'DROPS 05:00' : isDone ? F.drop.completedToday + ' PROVED TODAY' : 'WINDOW · ' + F.drop.windowLeft),
    ]) : null;

    const startBtn = isOver
      ? React.createElement('button', { className: 'btn-primary', style: { marginTop: 16, background: 'var(--amber)', boxShadow: '0 0 28px -6px rgba(255,195,7,0.35)' }, onClick: () => { setOverride('RECOVERY'); toast('RECOVERY ACCEPTED · STREAK PROTECTED'); } }, [
          React.createElement('span', { key: 't' }, 'ACCEPT FORCED RECOVERY'),
          React.createElement('span', { key: 's', className: 'sub' }, 'COUNTS AS PROVEN · STREAK PROTECTED'),
        ])
      : isPre
      ? React.createElement('button', { className: 'btn-primary', style: { marginTop: 16 }, onClick: () => toast('DROP ALERT ARMED · 05:00') }, [
          React.createElement('span', { key: 't' }, 'ARM DROP ALERT'),
          React.createElement('span', { key: 's', className: 'sub' }, 'EVERYONE GETS IT AT 05:00. NO PREVIEWS.'),
        ])
      : isNone
      ? React.createElement('button', { className: 'btn-primary', style: { marginTop: 16 }, onClick: () => { setOverride('ASSIGNED'); toast('MISSION GENERATED · ADAPTED TO READINESS'); } }, [
          React.createElement('span', { key: 't' }, 'GENERATE MISSION'),
          React.createElement('span', { key: 's', className: 'sub' }, 'ADAPTIVE ENGINE · READY'),
        ])
      : isDone
      ? React.createElement('button', { className: 'btn-primary', style: { marginTop: 16 }, onClick: () => nav.push('ShareStudio') }, [
          React.createElement('span', { key: 't' }, 'SHARE PROOF'),
          React.createElement('span', { key: 's', className: 'sub' }, 'TURN COMPLETION INTO A RECEIPT'),
        ])
      : isMissed
      ? React.createElement('button', { className: 'btn-primary', style: { marginTop: 16 }, onClick: () => nav.push('ComebackProtocol') }, [
          React.createElement('span', { key: 't' }, 'RUN COMEBACK'),
          React.createElement('span', { key: 's', className: 'sub' }, 'REPAIR THE CHAIN · 24H WINDOW'),
        ])
      : React.createElement('button', { className: 'btn-primary', style: { marginTop: 16 }, onClick: () => nav.push('MissionDetail') }, [
          React.createElement('span', { key: 't' }, isRecovery ? 'START RECOVERY' : 'START MISSION'),
          React.createElement('span', { key: 's', className: 'sub' }, isRecovery ? 'EARN TOMORROW’S LOAD' : 'LOCK IN. NO EXCUSES.'),
        ]);

    // secondary mission controls (assigned only): swap / mark unavailable
    const secondaryRow = (!isDone && !isMissed && !isNone && !isPre && !isOver) ? React.createElement('div', { className: 'row', style: { gap: 10, marginTop: 10 } }, [
      React.createElement('button', { key: 'sw', className: 'btn-ghost', style: { padding: '11px' }, onClick: () => { setSwapped(s => !s); toast(swapped ? 'ORIGINAL MISSION RESTORED' : 'SWAPPED · ROW 10K · SAME STIMULUS'); } }, swapped ? 'RESTORE' : 'SWAP MISSION'),
      React.createElement('button', { key: 'un', className: 'btn-ghost', style: { padding: '11px' }, onClick: () => { setOverride('RECOVERY'); toast('MARKED UNAVAILABLE · RECOVERY ASSIGNED'); } }, isRecovery ? 'RECOVERY SET' : 'UNAVAILABLE'),
    ]) : null;

    // active duel quick panel
    const duelPanel = (!isPre && !isNone && !isOver) ? React.createElement('div', { className: 'panel panel-pad', style: { marginTop: 12, cursor: 'pointer' }, onClick: () => nav.push('Duels') }, [
      React.createElement('div', { key: 'l', className: 'row between', style: { marginBottom: 10 } }, [
        React.createElement('span', { key: '1', className: 'label-mono' }, 'ACTIVE DUEL · ENDS ' + F.duels.active.ends),
        React.createElement('span', { key: '2', className: 'label-mono acid' }, 'LEADING +' + (F.duels.active.you - F.duels.active.opp)),
      ]),
      React.createElement('div', { key: 'r', className: 'row between' }, [
        React.createElement('div', { key: 'a', className: 'row', style: { gap: 10 } }, [
          React.createElement('div', { key: 'av', className: 'avatar', style: { width: 32, height: 32, background: F.duels.active.oppAvatar, fontSize: 12 } }, 'J'),
          React.createElement('div', { key: 't' }, [
            React.createElement('div', { key: '1', style: { fontFamily: 'var(--display)', fontWeight: 600, fontSize: 14.5, whiteSpace: 'nowrap' } }, 'YOU vs ' + F.duels.active.opponent.split(' ')[0]),
            React.createElement('div', { key: '2', className: 'label-mono', style: { marginTop: 2 } }, F.duels.active.mission),
          ]),
        ]),
        React.createElement('div', { key: 'b', className: 'num-mono', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 19, color: 'var(--acid)', whiteSpace: 'nowrap', flex: '0 0 auto' } },
          F.duels.active.you + '–' + F.duels.active.opp),
      ]),
    ]) : null;

    // live session prompt — crew is mid-mission right now
    const livePanel = (!isPre && !isNone && !isOver && !isDone) ? React.createElement('div', { className: 'panel panel-pad', style: { marginTop: 12, cursor: 'pointer', borderColor: 'var(--border-active)', boxShadow: '0 0 18px -10px var(--acid-glow)' }, onClick: () => nav.push('LiveSession') }, [
      React.createElement('div', { key: 'r', className: 'row between' }, [
        React.createElement('div', { key: 'a', className: 'row', style: { gap: 11 } }, [
          React.createElement('div', { key: 'i', style: { width: 34, height: 34, borderRadius: 8, border: '1px solid var(--border-active)', display: 'grid', placeItems: 'center' } },
            React.createElement(Icon, { name: 'pulse', size: 17, color: 'var(--acid)' })),
          React.createElement('div', { key: 't' }, [
            React.createElement('div', { key: '1', style: { fontFamily: 'var(--display)', fontWeight: 600, fontSize: 15 } }, '3 CREW MID-MISSION NOW'),
            React.createElement('div', { key: '2', className: 'label-mono', style: { marginTop: 2 } }, 'LIVE SESSION · RUN IT TOGETHER'),
          ]),
        ]),
        React.createElement('span', { key: 'b', className: 'label-mono acid' }, 'JOIN ›'),
      ]),
    ]) : null;

    const crewPanel = React.createElement('div', { className: 'panel panel-pad', style: { marginTop: 12, cursor: 'pointer' }, onClick: () => nav.push('CrewBoard', { name: crew.name }) }, [
      React.createElement('div', { key: 'l', className: 'label-mono', style: { marginBottom: 10 } }, 'CREW PRESSURE'),
      React.createElement('div', { key: 'r', className: 'row between' }, [
        React.createElement('div', { key: 'a', className: 'row', style: { gap: 11 } }, [
          React.createElement('div', { key: 'i', style: { width: 34, height: 34, borderRadius: 7, background: 'var(--raised-2)', border: '1px solid var(--hairline-2)', display: 'grid', placeItems: 'center' } },
            React.createElement(Icon, { name: 'shield', size: 18, color: 'var(--bone-muted)' })),
          React.createElement('div', { key: 't' }, [
            React.createElement('div', { key: '1', style: { fontFamily: 'var(--display)', fontWeight: 600, fontSize: 18, letterSpacing: .5 } }, crew.name),
            React.createElement('div', { key: '2', className: 'label-mono' }, crew.members + ' MEMBERS'),
          ]),
        ]),
        React.createElement('div', { key: 'b', style: { textAlign: 'right' } }, [
          React.createElement('div', { key: '1', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 24, color: 'var(--acid)', lineHeight: 1 } }, crew.avgCompletion + '%'),
          React.createElement('div', { key: '2', className: 'label-mono', style: { marginTop: 2 } }, 'AVG COMPLETION'),
        ]),
      ]),
    ]);

    const streakPanel = React.createElement('div', { className: 'panel panel-pad', style: { marginTop: 12 } }, [
      React.createElement('div', { key: 'l', className: 'row between', style: { marginBottom: 8 } }, [
        React.createElement('span', { key: '1', className: 'label-mono', style: { cursor: 'pointer' }, onClick: () => nav.push('FailureReview') }, 'STREAK RISK'),
        React.createElement('button', { key: '2', className: 'label-mono', onClick: (e) => { e.stopPropagation(); if (shields > 0) { setShields(s => s - 1); toast('STREAK SHIELD ARMED · TONIGHT IS COVERED'); } else toast('NO SHIELDS · ' + F.shields.refill); },
          style: { background: 'none', cursor: 'pointer', padding: '5px 9px', borderRadius: 5,
            border: '1px solid ' + (shields > 0 ? 'var(--border-active)' : 'var(--hairline-2)'),
            color: shields > 0 ? 'var(--acid)' : 'var(--steel)' } }, '⛨ ' + shields + ' SHIELDS'),
      ]),
      React.createElement('div', { key: 'r', className: 'row', style: { gap: 14 } }, [
        React.createElement('div', { key: 'a', style: { flex: '0 0 auto' } }, [
          React.createElement('div', { key: '1', className: 'row', style: { alignItems: 'baseline', gap: 5 } }, [
            React.createElement('span', { key: 'n', style: { fontFamily: 'var(--display)', fontWeight: 700, fontSize: 22, color: 'var(--danger)' } }, streak.atRisk),
            React.createElement('span', { key: 'd', className: 'label-mono', style: { color: 'var(--danger)' } }, 'DAYS'),
          ]),
          React.createElement('div', { key: '2', className: 'label-mono' }, 'At risk'),
        ]),
        React.createElement('div', { key: 'b', className: 'streak-bars' },
          streak.bars.map((h, i) => React.createElement('div', { key: i, className: 'sb' + (i === 0 ? ' marker' : ''), style: { height: (h * 100) + '%' } }))),
      ]),
    ]);

    const calPanel = React.createElement('div', { className: 'panel panel-pad', style: { marginTop: 12, cursor: 'pointer' }, onClick: () => nav.push('CalendarHeatmap') }, [
      React.createElement('div', { key: 'l', className: 'label-mono', style: { marginBottom: 10 } }, 'MISSION CALENDAR'),
      React.createElement('div', { key: 'h', className: 'cal-grid', style: { marginBottom: 5 } },
        ['M','T','W','T','F','S','S'].map((d, i) => React.createElement('div', { key: i, className: 'cal-head' }, d))),
      ...F.calendar.map((week, wi) => React.createElement('div', { key: wi, className: 'cal-grid', style: { marginBottom: 4 } },
        week.map(([num, cls], di) => React.createElement('div', { key: di, className: 'cal-cell ' + cls }, num)))),
    ]);

    return React.createElement('div', { className: 'screen-enter' }, [
      React.createElement('div', { key: '1' }, heroPanel),
      React.createElement('div', { key: '1b' }, dropStrip),
      React.createElement('div', { key: '2' }, ((isPre || isOver) ? null : metrics)),
      React.createElement('div', { key: '3' }, startBtn),
      React.createElement('div', { key: '3b' }, secondaryRow),
      React.createElement('div', { key: '3c' }, duelPanel),
      React.createElement('div', { key: '3d' }, livePanel),
      React.createElement('div', { key: '4' }, crewPanel),
      React.createElement('div', { key: '5' }, streakPanel),
      React.createElement('div', { key: '6' }, calPanel),
    ]);
  }

  window.HTDScreens = window.HTDScreens || {};
  window.HTDScreens.CommandCenter = CommandCenter;
})();