/* ============================================================
   VT — Visite Technique · squelette (auth idverlaine + routing rôle)
   Espaces : poseur (terrain) / admin (supervision). Le reste (géoloc,
   photos/vidéos certif, fiche prévisite, docs, dashboard, chat) arrive
   par itérations.
   ============================================================ */
const { useState, useEffect } = React;
const LOGO = 'assets/logo-verlaine-blanc.png';

function Topbar({ user, role, view, onToggle, onLogout }) {
  return (
    <div className="vt-topbar">
      <img className="vt-logo" src={LOGO} alt="Groupe Verlaine" onError={(e)=>{e.target.style.display='none';}} />
      <span className="vt-apptitle">Visite Technique</span>
      <span className="sp" />
      {role === 'admin' && (
        <button className="vt-toggle" onClick={onToggle}>
          {view === 'admin' ? '👷 Poseur' : '🖥️ Admin'}
        </button>
      )}
      <button className="vt-logout" onClick={onLogout} title="Se déconnecter" aria-label="Se déconnecter">⎋</button>
    </div>
  );
}

/* ---- Écrans placeholder (contenu réel à venir en itérations) ---- */
function PoseurHome() {
  const steps = [
    ['📍', 'Preuve d’arrivée', 'Géolocalisation GPS horodatée à l’arrivée sur site.'],
    ['🎥', 'Environnement', 'Photos + vidéos proche & lointain (rue, alentours).'],
    ['🏠', 'Façades', '1 photo + 1 vidéo par façade à isoler.'],
    ['📐', 'Fiche de prévisite', 'Mesures ITE pré-remplies (RAL, m², périmètre, fenêtres, volets…).'],
    ['📄', 'Documents client', 'CNI/passeport, avis d’impôt, justificatif de domicile < 3 mois.'],
  ];
  return (
    <div className="vt-wrap">
      <span className="pill pill-poseur">Espace poseur</span>
      <h1 style={{marginTop:10}}>Nouvelle visite technique</h1>
      <p className="sub">Sélectionnez un chantier pour démarrer le relevé guidé.</p>
      <button className="btn btn-primary btn-block" style={{margin:'18px 0'}}>➕ Démarrer une VT</button>
      <h2>Le relevé, étape par étape</h2>
      {steps.map((s,i)=>(
        <div className="card" key={i} style={{display:'flex',gap:14,alignItems:'center',marginBottom:12}}>
          <div style={{fontSize:26}}>{s[0]}</div>
          <div><div style={{fontWeight:700}}>{s[1]}</div><div className="muted">{s[2]}</div></div>
        </div>
      ))}
      <p className="muted" style={{marginTop:16}}>Interface en construction — le parcours guidé complet arrive à l’itération suivante.</p>
    </div>
  );
}

function AdminHome() {
  return (
    <div className="vt-wrap">
      <span className="pill pill-admin">Espace supervision</span>
      <h1 style={{marginTop:10}}>Visites techniques en direct</h1>
      <p className="sub">Suivi temps réel des VT en cours, détail par chantier et chat avec le poseur.</p>
      <div className="card" style={{marginTop:18,textAlign:'center',padding:'34px 20px'}}>
        <div style={{fontSize:34}}>🖥️</div>
        <div style={{fontWeight:700,marginTop:8}}>Tableau de bord en construction</div>
        <div className="muted" style={{marginTop:4}}>Liste live des VT + détail + chat — itération 2.</div>
      </div>
    </div>
  );
}

function Login({ error }) {
  return (
    <div className="center">
      <img src={LOGO} alt="Groupe Verlaine" style={{height:34,filter:'invert(1) brightness(.2)'}} onError={(e)=>{e.target.style.display='none';}} />
      <h1>Visite Technique</h1>
      <p className="sub">Connectez-vous avec votre compte Groupe Verlaine.</p>
      <button className="btn btn-navy btn-block" style={{maxWidth:320}} onClick={()=>window.VT_AUTH.login()}>Se connecter avec idverlaine</button>
      {error && <p className="muted" style={{color:'#c0203a'}}>Erreur : {error}</p>}
    </div>
  );
}

function Forbidden({ email }) {
  return (
    <div className="center">
      <div style={{fontSize:40}}>🚫</div>
      <h1>Accès non autorisé</h1>
      <p className="sub">Le compte <b>{email}</b> n’a pas de rôle sur la Visite Technique.<br/>
      Les poseurs se connectent avec leur email d’agence, les superviseurs sont ajoutés par l’admin.</p>
      <button className="btn btn-ghost" onClick={()=>window.VT_AUTH.logout()}>Changer de compte</button>
    </div>
  );
}

function App() {
  const [state, setState] = useState({ loading:true });
  const [view, setView] = useState(null); // 'admin' | 'poseur' (pour le toggle test)

  useEffect(()=>{
    window.VT_AUTH.init().then(res=>{
      const role = res.authed ? window.VT_AUTH.role() : null;
      setState({ loading:false, ...res, role });
      if (res.authed) setView(role); // vue par défaut = son rôle
    });
  },[]);

  if (state.loading) return <div className="center"><p className="muted">Chargement…</p></div>;
  if (state.forbidden) return <Forbidden email={state.email} />;
  if (!state.authed) return <Login error={state.error} />;
  if (!state.role) return <Forbidden email={(window.VT_AUTH.user()||{}).email} />;

  const user = window.VT_AUTH.user();
  const effective = view || state.role;
  return (
    <div>
      <Topbar user={user} role={state.role} view={effective}
        onToggle={()=> setView(effective==='admin' ? 'poseur' : 'admin')}
        onLogout={()=> window.VT_AUTH.logout()} />
      {effective === 'admin' ? <AdminHome/> : <PoseurFlow/>}
    </div>
  );
}

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