/* Aster Prototype — persona-switcher shell. Demo-only chrome, not part of the production surface. */

const PERSONAS = [
  { id: 'village', label: 'Village Governance Body', short: 'Village', icon: 'shield-check', console: false, Component: function () { return <VillageApp />; } },
  { id: 'humanitarian', label: 'Humanitarian Organization', short: 'Humanitarian', icon: 'heart-handshake', console: true, Component: function () { return <HumanitarianApp />; } },
  { id: 'riskdesk', label: 'Aster Risk Desk', short: 'Risk Desk', icon: 'radio', console: true, Component: function () { return <RiskDeskApp />; } },
  { id: 'privateorg', label: 'Private Org / Microfinance', short: 'Private Org', icon: 'briefcase', console: true, Component: function () { return <PrivateOrgApp />; } },
  { id: 'field', label: 'Field Reporter', short: 'Field', icon: 'smartphone', console: false, Component: function () { return <FieldApp />; } },
  { id: 'farmer', label: 'Farmers', short: 'Farmers', icon: 'leaf', console: false, Component: function () { return <FarmerApp />; } },
];

function getRoute() {
  const h = (window.location.hash || '').replace('#', '');
  return PERSONAS.some(function (p) { return p.id === h; }) ? h : 'village';
}

function TopShell() {
  const [route, setRoute] = React.useState(getRoute());
  const [confirmReset, setConfirmReset] = React.useState(false);
  const [resetToast, setResetToast, resetToastNode] = useToast();

  React.useEffect(function () {
    function onHash() { setRoute(getRoute()); }
    window.addEventListener('hashchange', onHash);
    return function () { window.removeEventListener('hashchange', onHash); };
  }, []);

  React.useEffect(function () {
    window.lucide && window.lucide.createIcons();
  }, [route]);

  const persona = PERSONAS.find(function (p) { return p.id === route; }) || PERSONAS[0];
  const Screen = persona.Component;

  return (
    <div>
      <div style={{ position: 'sticky', top: 0, zIndex: 900, background: 'var(--surface-inverse)', color: 'var(--text-on-dark)' }}>
        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '10px 20px', display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
            <img src="design-system/assets/aster-mark-white.svg" width="22" height="22" alt="" />
            <span style={{ font: '700 15px var(--font-display)' }}>Aster</span>
            <span style={{ font: '10px var(--font-mono)', letterSpacing: '0.1em', border: '1px solid rgba(255,255,255,0.3)', borderRadius: 3, padding: '2px 6px', opacity: 0.8 }}>PROTOTYPE</span>
          </div>
          <div role="navigation" aria-label="Personas" style={{ display: 'flex', gap: 4, flexWrap: 'wrap', flex: 1 }}>
            {PERSONAS.map(function (p) {
              const active = p.id === route;
              return (
                <a key={p.id} href={'#' + p.id} title={p.label} aria-current={active ? 'page' : undefined} className="ap-chip" style={{
                  display: 'flex', alignItems: 'center', gap: 6, padding: '7px 11px', borderRadius: 'var(--radius-pill)',
                  textDecoration: 'none', font: (active ? '600 ' : '400 ') + '12px var(--font-text)',
                  background: active ? 'rgba(255,255,255,0.16)' : 'transparent',
                  color: active ? '#fff' : 'rgba(255,255,255,0.7)',
                }}>
                  <i data-lucide={p.icon} style={{ width: 14, height: 14 }}></i>
                  {p.label}
                </a>
              );
            })}
          </div>
          <button className="ap-chip" onClick={function () { setConfirmReset(true); }} style={{
            display: 'flex', alignItems: 'center', gap: 6, background: 'transparent', border: '1px solid rgba(255,255,255,0.3)',
            borderRadius: 'var(--radius-pill)', padding: '6px 11px', color: 'rgba(255,255,255,0.85)', cursor: 'pointer', font: '12px var(--font-text)', flexShrink: 0,
          }}>
            <i data-lucide="rotate-ccw" style={{ width: 13, height: 13 }}></i> Reset demo data
          </button>
        </div>
      </div>
      <div key={route} className={(persona.console ? 'aster-console ' : '') + 'ap-rise'} style={{ minHeight: 'calc(100vh - 46px)', background: 'var(--surface-page)' }}>
        <Screen />
      </div>

      <ConfirmDialog open={confirmReset} onClose={function () { setConfirmReset(false); }}
        title="Reset demo data?" confirmLabel="Reset data"
        body="This restores all villages, calls, protocols and reports to their seeded state. Anything you've submitted in this session will be cleared."
        onConfirm={function () { window.AsterStore.resetStore(); setConfirmReset(false); setResetToast({ message: 'Demo data reset.', tone: 'info' }); }} />

      {resetToastNode}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TopShell />);
setTimeout(function () { window.lucide && window.lucide.createIcons(); }, 100);

// PWA install-prompt capture, used by the Village Governance Body screen's "Install as app" button.
window.addEventListener('beforeinstallprompt', function (e) {
  e.preventDefault();
  window.__asterDeferredInstallPrompt = e;
});