// Admin shell — left nav, top header, view switcher.

const TABS = [
  { key: 'overview', label: 'Overview', icon: 'layout-dashboard', view: () => <OverviewView /> },
  { key: 'users', label: 'Usuarios', icon: 'users', view: () => <UsersView /> },
  { key: 'workspaces', label: 'Workspaces', icon: 'building-2', view: () => <WorkspacesView /> },
  { key: 'projects', label: 'Proyectos', icon: 'folder-git-2', view: () => <ProjectsView /> },
  { key: 'activity', label: 'Actividad', icon: 'activity', view: () => <ActivityView /> },
  { key: 'funnel', label: 'Funnel', icon: 'filter', view: () => <FunnelView /> },
  { key: 'mcp', label: 'MCP / Claude.ai', icon: 'plug-zap', view: () => <McpView /> },
  { key: 'code', label: 'Claude Code', icon: 'terminal', view: () => <CodeView /> },
  { key: 'health', label: 'Salud técnica', icon: 'heart-pulse', view: () => <HealthView /> },
  { key: 'messaging', label: 'Mensajería', icon: 'mail', view: () => <MessagingView /> },
];

function getInitialTab() {
  const m = /#\/(\w+)/.exec(location.hash);
  if (m) {
    const t = TABS.find((x) => x.key === m[1]);
    if (t) return t.key;
  }
  return 'overview';
}

function App() {
  const [me, setMe] = React.useState({ loading: true });
  const [tab, setTab] = React.useState(getInitialTab());

  React.useEffect(() => {
    fetch('/api/admin/probe', { credentials: 'include' })
      .then((r) => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
      .then((d) => setMe({ loading: false, ...d }))
      .catch((e) => setMe({ loading: false, error: e.message || String(e), unauthorized: e.message?.includes('401') }));
  }, []);

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

  React.useEffect(() => {
    if (me.isAdmin) document.title = 'Workspace · Admin';
  }, [me.isAdmin]);

  if (me.loading) {
    return <div className="gate"><div className="panel"><Spinner /> <span style={{ marginLeft: 6 }}>Cargando…</span></div></div>;
  }
  if (!me.isAdmin) {
    if (me.unauthorized || !me.email) {
      // Not logged in.
      return (
        <div className="gate">
          <div className="panel">
            <div className="brand-logo" style={{ margin: '0 auto 12px' }}>W</div>
            <h1>Inicia sesión</h1>
            <p>El panel de administración requiere una cuenta autorizada. Iniciá sesión en el workspace y volvé a esta página.</p>
            <a className="btn primary" href="https://workspace.sebasai.com/login">Ir al login</a>
          </div>
        </div>
      );
    }
    return (
      <div className="gate">
        <div className="panel">
          <div className="brand-logo" style={{ margin: '0 auto 12px', background: 'linear-gradient(135deg, #F87171, #B91C1C)' }}>!</div>
          <h1>Acceso denegado</h1>
          <p>Tu cuenta (<span className="mono">{me.email}</span>) no está autorizada para entrar al panel de administración.</p>
          <a className="btn" href="https://workspace.sebasai.com">Volver al workspace</a>
        </div>
      </div>
    );
  }

  const current = TABS.find((t) => t.key === tab) || TABS[0];

  const setActive = (key) => {
    location.hash = '#/' + key;
    setTab(key);
  };

  return (
    <div className="app">
      <aside className="side">
        <div className="brand">
          <div className="brand-logo">W</div>
          <div>
            <div className="brand-text">Admin</div>
            <div className="brand-sub">Mission control</div>
          </div>
        </div>
        <div className="nav-section">Datos</div>
        <nav className="nav">
          {TABS.slice(0, 4).map((t) => (
            <div key={t.key} className={'nav-item ' + (t.key === tab ? 'active' : '')} onClick={() => setActive(t.key)}>
              <Icon name={t.icon} size={15} />
              <span>{t.label}</span>
            </div>
          ))}
        </nav>
        <div className="nav-section">Análisis</div>
        <nav className="nav">
          {TABS.slice(4, 8).map((t) => (
            <div key={t.key} className={'nav-item ' + (t.key === tab ? 'active' : '')} onClick={() => setActive(t.key)}>
              <Icon name={t.icon} size={15} />
              <span>{t.label}</span>
            </div>
          ))}
        </nav>
        <div className="nav-section">Operación</div>
        <nav className="nav">
          {TABS.slice(8).map((t) => (
            <div key={t.key} className={'nav-item ' + (t.key === tab ? 'active' : '')} onClick={() => setActive(t.key)}>
              <Icon name={t.icon} size={15} />
              <span>{t.label}</span>
            </div>
          ))}
        </nav>
        <div className="side-foot">
          <div className="who">{me.email}</div>
          <a className="muted" href="https://workspace.sebasai.com" target="_blank" rel="noreferrer">↗ workspace.sebasai.com</a>
        </div>
      </aside>
      <main className="main">
        <div className="head">
          <div>
            <h1>{current.label}</h1>
            <div className="sub">/{current.key}</div>
          </div>
          <div className="toolbar">
            <button className="btn" onClick={async () => {
              try { await API.post('/api/admin/cache/invalidate'); location.reload(); } catch (_e) { /* ignore */ }
            }}><Icon name="zap-off" size={13} /> Limpiar caché</button>
          </div>
        </div>
        {current.view()}
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);