// App shell — top bar, sidebar, demo banner, hash routing
const { useState, useEffect, useMemo } = React;

const NAV = [
  { group: 'Operations' },
  { id: 'dashboard', label: 'Operations', icon: 'dashboard' },
  { id: 'machines', label: 'Machines', icon: 'cpu', badge: '47' },
  { id: 'events', label: 'Events & Alerts', icon: 'bell2', badge: '12', alert: true },
  { id: 'analytics', label: 'Analytics', icon: 'chart' },
  { group: 'Configuration' },
  { id: 'workflows', label: 'Workflows', icon: 'workflow' },
  { id: 'forms', label: 'Forms', icon: 'form' },
  { id: 'modules', label: 'Modules', icon: 'module' },
  { group: 'Enterprise' },
  { id: 'plants', label: 'Plants', icon: 'factory', badge: '6' },
  { id: 'roles', label: 'Roles & Access', icon: 'users' },
  { group: 'Management layer · MOSES internal', internal: true },
  { id: 'supervisor', label: 'MOSES Supervisor', icon: 'server', internal: true },
  { id: 'overview', label: 'System Overview', icon: 'globe', internal: true },
];

const VALID_PAGES = ['dashboard','machines','events','workflows','forms','modules','plants','roles','analytics','supervisor','overview'];

const MosesMark = ({ size = 16 }) => (
  <svg viewBox="0 0 100 100" width={size} height={size} style={{ display: 'block' }}>
    <rect x="19" y="30" width="6" height="42" rx="2" fill="var(--bg)"/>
    <rect x="32" y="42" width="6" height="30" rx="2" fill="var(--bg)"/>
    <rect x="45" y="50" width="6" height="22" rx="2" fill="#f59e0b"/>
    <rect x="58" y="42" width="6" height="30" rx="2" fill="var(--bg)"/>
    <rect x="71" y="30" width="6" height="42" rx="2" fill="var(--bg)"/>
    <rect x="22" y="74" width="56" height="2" rx="1" fill="var(--bg)" opacity="0.4"/>
  </svg>
);

const isEmbedded = (() => { try { return window.self !== window.top; } catch (e) { return true; } })();

const DemoBanner = () => (
  <div className="demo-banner" style={{
    background: '#1a1a17',
    color: '#f1efe7',
    padding: '0 14px',
    height: 34,
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    fontSize: 12,
    borderBottom: '1px solid #2e2e2a',
    fontFamily: "'Inter', sans-serif",
    flexShrink: 0,
    overflow: 'hidden',
  }}>
    <span style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 10,
      fontWeight: 600,
      letterSpacing: '0.08em',
      textTransform: 'uppercase',
      background: '#d97706',
      color: '#1a1a17',
      padding: '2px 7px',
      borderRadius: 3,
      flexShrink: 0,
    }}>Demo</span>
    <span className="demo-banner-msg" style={{ color: 'rgba(255,255,255,0.85)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>You're exploring an interactive preview with mock data.</span>
    <span className="demo-banner-msg-2" style={{ color: 'rgba(255,255,255,0.5)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, flex: 1 }}>For a tailored walkthrough on your own plant data, talk to the team.</span>
    <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center', flexShrink: 0 }}>
      {!isEmbedded && (
        <a href="/" className="demo-banner-back" style={{
          color: '#f1efe7',
          textDecoration: 'none',
          fontSize: 11.5,
          padding: '4px 9px',
          border: '1px solid rgba(255,255,255,0.2)',
          borderRadius: 4,
          display: 'inline-flex',
          alignItems: 'center',
          gap: 5,
          whiteSpace: 'nowrap',
        }}>
          <Icon name="arrowLeft" size={11}/>
          <span>Back to MOSES</span>
        </a>
      )}
      <a href="https://calendar.app.google/TuLeM8cUrX5drYBk7" target="_blank" rel="noopener noreferrer" style={{
        color: '#1a1a17',
        background: '#d97706',
        textDecoration: 'none',
        fontSize: 11.5,
        fontWeight: 600,
        padding: '4px 11px',
        borderRadius: 4,
        whiteSpace: 'nowrap',
      }}>Book a real demo →</a>
    </div>
  </div>
);

const InternalLayerBanner = () => (
  <div style={{
    background: '#fef3c7',
    color: '#7c2d12',
    padding: '8px 24px',
    fontSize: 11.5,
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    borderBottom: '1px solid #fcd34d',
    fontFamily: "'Inter', sans-serif",
  }}>
    <Icon name="shield" size={12}/>
    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', fontSize: 10.5 }}>Internal layer</span>
    <span>This screen is visible to <strong>MOSES engineering & deployment teams only</strong> — never exposed to customer tenants in production. Shown here so the team can see how we operate the fleet.</span>
  </div>
);

const TopBar = ({ theme, setTheme, page }) => (
  <div className="topbar">
    <div className="brand">
      <div className="brand-mark" style={{ background: 'var(--text)', padding: 0, display: 'grid', placeItems: 'center' }}>
        <MosesMark size={16}/>
      </div>
      <div style={{ lineHeight: 1.15 }}>
        <div className="brand-name" style={{ fontWeight: 800, letterSpacing: '-0.04em', fontSize: 14 }}>MOSES</div>
        <div className="brand-sub mono">v4.18.2 · prod</div>
      </div>
    </div>
    <div className="topbar-search">
      <Icon name="search" size={12}/>
      <span>Search machines, events, workflows…</span>
      <kbd>⌘K</kbd>
    </div>
    <div className="tb-pill">
      <span className="dot"/>
      <span className="mono">All systems operational</span>
    </div>
    <div className="topbar-spacer"/>
    <div className="topbar-actions">
      <button className="tb-btn" title="Theme" onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
        <Icon name={theme === 'dark' ? 'eye' : 'eye'} size={13}/>
        <span>{theme === 'dark' ? 'Dark' : 'Light'}</span>
      </button>
      <button className="tb-btn icon" title="Help"><Icon name="help" size={14}/></button>
      <button className="tb-btn icon" title="Settings"><Icon name="settings" size={14}/></button>
      <button className="tb-btn" style={{ position: 'relative' }} title="Notifications">
        <Icon name="bell" size={14}/>
        <span style={{ position: 'absolute', top: 4, right: 4, width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }}/>
      </button>
      <div className="user-chip">
        <div className="avatar">PS</div>
        <div style={{ lineHeight: 1.15 }}>
          <div style={{ fontSize: 12, fontWeight: 500 }}>Priya Sharma</div>
          <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Plant Operations Lead</div>
        </div>
        <Icon name="chevronDown" size={11} style={{ color: 'var(--text-3)' }}/>
      </div>
    </div>
  </div>
);

const Sidebar = ({ page, setPage }) => (
  <div className="sidebar">
    <div className="plant-switch">
      <div className="plant-switch-icon"><Icon name="factory" size={14}/></div>
      <div className="plant-switch-meta">
        <div className="plant-switch-name">Pune North Plant</div>
        <div className="plant-switch-id">PUN-N · IN-MH</div>
      </div>
      <Icon name="chevronUpDown" size={11} style={{ color: 'var(--text-3)' }}/>
    </div>

    {NAV.map((item, i) => {
      if (item.group) return (
        <div key={i} className="nav-section" style={item.internal ? { color: 'var(--accent)', display: 'flex', alignItems: 'center', gap: 6 } : null}>
          {item.internal && <Icon name="shield" size={10}/>}
          {item.group}
        </div>
      );
      return (
        <div key={item.id} className={`nav-item ${page === item.id ? 'active' : ''}`}
          onClick={() => setPage(item.id)}
          style={item.internal ? { fontStyle: 'normal' } : null}>
          <Icon name={item.icon} size={14} className="nav-icon"/>
          <span>{item.label}</span>
          {item.internal && <span style={{ marginLeft: 'auto', fontSize: 9, color: 'var(--accent)', textTransform: 'uppercase', letterSpacing: '0.06em', fontFamily: "'JetBrains Mono', monospace", fontWeight: 600 }}>internal</span>}
          {item.badge && !item.internal && <span className={`nav-badge ${item.alert ? 'alert' : ''}`}>{item.badge}</span>}
        </div>
      );
    })}

    <div style={{ padding: '20px 14px 12px', marginTop: 12, borderTop: '1px solid var(--line)' }}>
      <div style={{ fontSize: 10, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500, marginBottom: 8 }}>System</div>
      <div style={{ fontSize: 11, color: 'var(--text-3)', display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div className="mono" style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Uptime</span><span style={{ color: 'var(--text-2)' }}>47d 12h</span>
        </div>
        <div className="mono" style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Latency</span><span style={{ color: 'var(--text-2)' }}>34ms</span>
        </div>
        <div className="mono" style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>Tenant</span><span style={{ color: 'var(--text-2)' }}>aurex-mfg</span>
        </div>
      </div>
    </div>
  </div>
);

// Dispatcher
const Page = ({ page, setPage }) => {
  switch (page) {
    case 'dashboard': return <DashboardPage setPage={setPage}/>;
    case 'machines': return <MachinesPage setPage={setPage}/>;
    case 'events': return <EventsPage/>;
    case 'workflows': return <WorkflowsPage/>;
    case 'forms': return <FormsPage/>;
    case 'modules': return <ModulesPage/>;
    case 'plants': return <PlantsPage/>;
    case 'roles': return <RolesPage/>;
    case 'analytics': return <AnalyticsPage/>;
    case 'supervisor': return <SupervisorPage/>;
    case 'overview': return <OverviewPage setPage={setPage}/>;
    default: return <DashboardPage setPage={setPage}/>;
  }
};

const readHash = () => {
  const h = (window.location.hash || '').replace(/^#/, '');
  return VALID_PAGES.includes(h) ? h : 'overview';
};

const App = () => {
  const [theme, setTheme] = useState('light');
  const [page, setPageState] = useState(readHash);
  const [demoOpen, setDemoOpen] = useState(true);

  const setPage = (p) => {
    setPageState(p);
    if (window.location.hash !== '#' + p) {
      history.replaceState(null, '', '#' + p);
    }
  };

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  useEffect(() => {
    const onHash = () => setPageState(readHash());
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const isInternal = page === 'supervisor' || page === 'overview';

  return (
    <ToastHost>
      <div className="app-root" data-screen-label={`${page}`}>
        {demoOpen && <DemoBanner/>}
        <TopBar theme={theme} setTheme={setTheme} page={page}/>
        <div className="app-body">
          <Sidebar page={page} setPage={setPage}/>
          <div className="app-main">
            {isInternal && <InternalLayerBanner/>}
            <div className="main">
              <Page page={page} setPage={setPage}/>
            </div>
          </div>
        </div>
      </div>
    </ToastHost>
  );
};

window.App = App;