import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { api, setToken } from './api';
import './style.css';
type Session = { accessToken: string; permissions: string[] };
type Cfg = Record<string, string>;
function Login({ s, onLogin }: { s: Cfg; onLogin: (x: Session) => void }) {
  const [email, setEmail] = useState(''); const [senha, setSenha] = useState('');
  const [erro, setErro] = useState(''); const [busy, setBusy] = useState(false);
  const submit = async (e: React.FormEvent) => {
    e.preventDefault(); setBusy(true); setErro('');
    try { const d = await api<Session>('/auth/login', { method: 'POST', body: JSON.stringify({ email, senha }) }); setToken(d.accessToken); onLogin(d); }
    catch (x) { setErro((x as Error).message); } finally { setBusy(false); }
  };
  return (<main className="login"><section className="hero"><h1>{s.app_nome}</h1><p>{s.app_slogan}</p></section>
    <form onSubmit={submit}><h2>Entrar</h2>
      <label>E-mail<input type="email" value={email} onChange={e => setEmail(e.target.value)} required autoComplete="username"/></label>
      <label>Senha<input type="password" value={senha} onChange={e => setSenha(e.target.value)} required autoComplete="current-password"/></label>
      {erro && <p role="alert" className="erro">{erro}</p>}
      <button disabled={busy}>{busy ? 'Entrando...' : 'Entrar'}</button></form></main>);
}
function Admin({ s, onLogout }: { s: Cfg; onLogout: () => void }) {
  return (<div className="admin"><header><strong>{s.app_nome}</strong><button onClick={onLogout}>Sair</button></header>
    <main><h1>Painel administrativo</h1><p>ETAPA 1: autenticação, RBAC e configurações ativos.</p></main></div>);
}
function App() {
  const [s, setS] = useState<Cfg>({ app_nome: 'FACIL CARIMBO', app_slogan: '' });
  const [sess, setSess] = useState<Session | null>(null);
  useEffect(() => { api<Cfg>('/public/settings').then(d => {
    setS(d); document.title = d.app_nome;
    const r = document.documentElement.style;
    r.setProperty('--primary', d.cor_primaria); r.setProperty('--secondary', d.cor_secundaria); r.setProperty('--accent', d.cor_destaque);
  }).catch(() => {}); }, []);
  const logout = async () => { await api('/auth/logout', { method: 'POST' }).catch(() => {}); setToken(null); setSess(null); };
  return (<Routes>
    <Route path="/admin/*" element={sess ? <Admin s={s} onLogout={logout}/> : <Navigate to="/login"/>}/>
    <Route path="/login" element={sess ? <Navigate to="/admin"/> : <Login s={s} onLogin={setSess}/>}/>
    <Route path="*" element={<Navigate to="/login"/>}/></Routes>);
}
createRoot(document.getElementById('root')!).render(<BrowserRouter><App/></BrowserRouter>);