// albor · app.jsx — Hito 1
// Shell mínimo: login + sidebar 12 módulos + placeholders.
// JSX in-browser via Babel standalone. Sin imports.

const { useState, useEffect } = React;

const SUPABASE_URL = 'https://zurqcfhkftwmimxfvrkr.supabase.co';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inp1cnFjZmhrZnR3bWlteGZ2cmtyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk1NTU3MDEsImV4cCI6MjA5NTEzMTcwMX0.g8PBuxiYq4vmvuypN35j_CmtJI50kJhGwXjLy0pzHQc';

const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
  auth: {
    persistSession: true,
    autoRefreshToken: true,
    detectSessionInUrl: false,
  },
});
window.sb = sb;

const MODULOS = [
  { id: 'prefiltrado-nog',  label: 'Prefiltrado NOG',  status: 'real'        },
  { id: 'concursos',        label: 'Concursos',        status: 'placeholder' },
  { id: 'npg',              label: 'NPG',              status: 'placeholder' },
  { id: 'directorio',       label: 'Directorio',       status: 'placeholder' },
  { id: 'oferentes',        label: 'Oferentes',        status: 'placeholder' },
  { id: 'facturacion',      label: 'Facturación',      status: 'placeholder' },
  { id: 'inventario',       label: 'Inventario',       status: 'placeholder' },
  { id: 'garantias',        label: 'Garantías',        status: 'placeholder' },
  { id: 'soporte',          label: 'Soporte',          status: 'placeholder' },
  { id: 'analisis-data',    label: 'Análisis de Data', status: 'placeholder' },
  { id: 'dashboard',        label: 'Dashboard + KPIs', status: 'placeholder' },
  { id: 'sistema',          label: 'Sistema',          status: 'placeholder' },
];

function Login() {
  const [email, setEmail]       = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState(null);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    const { error } = await sb.auth.signInWithPassword({ email, password });
    setLoading(false);
    if (error) setError(error.message || 'No se pudo iniciar sesión');
  };

  return (
    <div className="login-wrap">
      <div className="login-card">
        <div className="login-brand">albor</div>
        <div className="login-sub">CRM privado · GOMCAST</div>
        <form onSubmit={onSubmit} className="login-form">
          <label className="field">
            <span>Email</span>
            <input type="email" autoComplete="username" required
              value={email} onChange={(e) => setEmail(e.target.value)}
              disabled={loading} />
          </label>
          <label className="field">
            <span>Contraseña</span>
            <input type="password" autoComplete="current-password" required
              value={password} onChange={(e) => setPassword(e.target.value)}
              disabled={loading} />
          </label>
          {error && <div className="login-error">{error}</div>}
          <button type="submit" className="btn-primary" disabled={loading}>
            {loading ? 'Iniciando sesión…' : 'Entrar'}
          </button>
        </form>
      </div>
    </div>
  );
}

function Sidebar({ moduloActivo, onSelect, userEmail, onLogout }) {
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">albor</div>
      <nav className="sidebar-nav">
        {MODULOS.map((m) => (
          <button
            key={m.id}
            type="button"
            className={
              'sidebar-item' +
              (m.id === moduloActivo ? ' is-active' : '') +
              (m.status === 'placeholder' ? ' is-placeholder' : '')
            }
            onClick={() => onSelect(m.id)}
          >
            <span className="sidebar-item-label">{m.label}</span>
            {m.status === 'placeholder' && (
              <span className="sidebar-item-tag">próx.</span>
            )}
          </button>
        ))}
      </nav>
      <div className="sidebar-footer">
        <div className="sidebar-user" title={userEmail}>{userEmail}</div>
        <button type="button" className="btn-ghost" onClick={onLogout}>
          Salir
        </button>
      </div>
    </aside>
  );
}

function VistaPrefiltradoNOG() {
  return (
    <div className="vista">
      <header className="vista-header">
        <h1>Prefiltrado NOG</h1>
        <p className="vista-sub">
          Captura diaria de concursos Art. 43b vigentes desde GuateCompras.
        </p>
      </header>
      <div className="card-info">
        <div className="card-info-title">Módulo en construcción — Hito 1</div>
        <div className="card-info-body">
          Este shell carga la sesión y la navegación. Los datos llegarán en
          el Hito 3, después de que la Edge Function de consulta esté
          desplegada (Hito 2).
        </div>
      </div>
    </div>
  );
}

function VistaPlaceholder({ nombre }) {
  return (
    <div className="vista">
      <header className="vista-header">
        <h1>{nombre}</h1>
        <p className="vista-sub">Módulo del CRM albor.</p>
      </header>
      <div className="card-placeholder">
        <div className="card-placeholder-icon">⏳</div>
        <div className="card-placeholder-title">En construcción</div>
        <div className="card-placeholder-body">
          Este módulo se diseñará e implementará en una ronda posterior.
        </div>
      </div>
    </div>
  );
}

function Shell({ session }) {
  const [moduloActivo, setModuloActivo] = useState('prefiltrado-nog');
  const onLogout = async () => { await sb.auth.signOut(); };
  const modulo = MODULOS.find((m) => m.id === moduloActivo);
  const userEmail = session?.user?.email || '—';
  const vista = moduloActivo === 'prefiltrado-nog'
    ? <VistaPrefiltradoNOG />
    : <VistaPlaceholder nombre={modulo ? modulo.label : '—'} />;
  return (
    <div className="app">
      <Sidebar
        moduloActivo={moduloActivo}
        onSelect={setModuloActivo}
        userEmail={userEmail}
        onLogout={onLogout}
      />
      <main className="content">{vista}</main>
    </div>
  );
}

function App() {
  const [session, setSession] = useState(null);
  useEffect(() => {
    let mounted = true;
    sb.auth.getSession().then(({ data }) => {
      if (!mounted) return;
      setSession(data.session || false);
    });
    const { data: listener } = sb.auth.onAuthStateChange((_event, newSession) => {
      if (!mounted) return;
      setSession(newSession || false);
    });
    return () => {
      mounted = false;
      listener?.subscription?.unsubscribe?.();
    };
  }, []);
  if (session === null) return <div className="boot">Cargando…</div>;
  if (session === false) return <Login />;
  return <Shell session={session} />;
}

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