/* ===== App root ===== */
const App = () => {
  const [session, setSession] = React.useState(undefined); // undefined=checking, null=no session, object=ok
  const [data,setData] = React.useState(null);  // null = loading
  const [rubrica, setRubrica] = React.useState(null);
  const [view,setView] = React.useState({name:"home", id:null});
  const [dbError,setDbError] = React.useState(null);
  const [showRubrica, setShowRubrica] = React.useState(false);

  // ── Auth: check session on mount, subscribe to changes ──────────────────────
  React.useEffect(()=>{
    window.sb.auth.getSession().then(({data:{session:s}})=>setSession(s||null));
    const {data:{subscription}} = window.sb.auth.onAuthStateChange((_,s)=>setSession(s||null));
    return ()=>subscription.unsubscribe();
  },[]);

  // ── Load data + rubrica only after auth confirmed ────────────────────────────
  React.useEffect(()=>{
    if(!session) return;
    Promise.all([loadData(), loadRubrica()])
      .then(([d, r]) => { setData(d); setRubrica(r); })
      .catch(e => setDbError(e.message || String(e)));
  },[session]);

  // ── Rubrica callbacks ────────────────────────────────────────────────────────
  const onSaveDitta = async (fields) => {
    const saved = await window.saveRubricaDitta(fields);
    setRubrica(r => {
      const others = (r.ditte||[]).filter(d=>d.id!==saved.id);
      const ditte = [...others, saved].sort((a,b)=>a.nome.localeCompare(b.nome));
      return {...r, ditte};
    });
    return saved;
  };
  const onDeleteDitta = async (id) => {
    await window.deleteRubricaDitta(id);
    setRubrica(r => ({...r, ditte:(r.ditte||[]).filter(d=>d.id!==id)}));
  };
  const onAddLavorazione = async (nome) => {
    const lav = await window.addLavorazione(nome);
    setRubrica(r => {
      const exists = (r.lavorazioni||[]).find(l=>l.id===lav.id);
      if(exists) return r;
      const lavorazioni = [...(r.lavorazioni||[]), lav].sort((a,b)=>a.nome.localeCompare(b.nome));
      return {...r, lavorazioni};
    });
    return lav;
  };

  const onPatch=(cid,fn)=>setData(d=>{
    const cantieri = d.cantieri.map(c=>c.id===cid?fn(c):c);
    const updated  = {...d, cantieri};
    saveCantiere(updated.cantieri.find(c=>c.id===cid));
    return updated;
  });

  const addCantiere=(cantiere)=>{
    setData(d=>({...d, cantieri:[...d.cantieri, cantiere]}));
    saveCantiere(cantiere);
  };

  const deleteCantiere=(id)=>{
    window.deleteCantiere(id).catch(e=>console.error('[DB] delete error:',e.message));
    setData(d=>({...d, cantieri:d.cantieri.filter(c=>c.id!==id)}));
    goHome();
  };

  const onArchive=(id)=>{
    onPatch(id, x=>({...x, archived:true}));
    goHome();
  };
  const onRestore=(id)=>{
    onPatch(id, x=>({...x, archived:false}));
    setView({name:"archivio"});
  };

  const openCantiere=(id)=>{ setView({name:"detail",id}); document.querySelector(".content")?.scrollTo({top:0}); };
  const goHome=()=>setView({name:"home",id:null});

  const logout = () => window.sb.auth.signOut();

  // ── Auth / loading / error states ───────────────────────────────────────────
  if(session === undefined) return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",flexDirection:"column",gap:14,fontFamily:"var(--ff)",color:"var(--ink)"}}>
      <div className="mark" style={{width:44,height:44,borderRadius:12,fontSize:18}}>29</div>
      <div style={{fontSize:14,color:"var(--ink3)"}}>Caricamento…</div>
    </div>
  );

  if(!session) return <LoginView />;

  if(dbError) return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",flexDirection:"column",gap:12,fontFamily:"var(--ff)",color:"var(--ink)"}}>
      <div style={{fontSize:32}}>⚠️</div>
      <b style={{fontSize:16}}>Errore di connessione al database</b>
      <div style={{fontSize:13,color:"var(--ink3)",maxWidth:380,textAlign:"center"}}>{dbError}</div>
      <button className="btn primary" onClick={()=>{setDbError(null);loadData().then(setData).catch(e=>setDbError(e.message||String(e)));}}>Riprova</button>
    </div>
  );

  if(!data) return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",height:"100vh",flexDirection:"column",gap:14,fontFamily:"var(--ff)",color:"var(--ink)"}}>
      <div className="mark" style={{width:44,height:44,borderRadius:12,fontSize:18}}>29</div>
      <div style={{fontSize:14,color:"var(--ink3)"}}>Caricamento cantieri…</div>
    </div>
  );

  const urgCnt = data.cantieri.reduce((n,c)=>n+c.todos.filter(t=>t.urgent&&!t.done).length,0);

  return (
    <div className="app">
      {/* TOPBAR */}
      <header className="topbar">
        <div className="tb-logo" onClick={goHome}>
          <div className="mark">29</div>
          <b>Ventinove</b>
        </div>
        <div className="tb-grow"></div>
        <button className="btn ghost" onClick={()=>setShowRubrica(true)} style={{color:"var(--ink2)",fontWeight:600}}>
          <Icon name="list" size={15}/>Rubrica ditte
        </button>
        <button className="btn ghost" onClick={()=>setView({name:"archivio"})} style={{color:"var(--ink2)",fontWeight:600}}>
          <Icon name="archive" size={15}/>Archivio
        </button>
        <div style={{width:1,height:22,background:"var(--line)",margin:"0 6px"}}></div>
        <div className="tb-user" style={{gap:8}}>
          <div className="tb-avatar">GR</div>
          <span className="uname">{data.user.name}</span>
          <button
            className="btn ghost"
            onClick={logout}
            title="Esci"
            style={{color:"var(--ink3)",padding:"4px 8px",fontSize:12}}
          >Esci</button>
        </div>
      </header>

      {/* CONTENT */}
      {view.name==="home" &&
        <HomeView
          data={{...data, cantieri:data.cantieri.filter(c=>!c.archived)}}
          onOpen={openCantiere} onPatch={onPatch} onAdd={addCantiere}
        />}
      {view.name==="archivio" &&
        <ArchivioView data={data} onOpen={openCantiere} onRestore={onRestore} onBack={goHome}/>}
      {view.name==="detail" &&
        <div className="app-body no-right" style={{overflow:"hidden"}}>
          <div className="content">
            <DetailView
              data={data} currentId={view.id} onOpen={openCantiere} onBack={goHome}
              onPatch={onPatch} onDelete={deleteCantiere} onArchive={onArchive}
              rubrica={rubrica} onSaveDitta={onSaveDitta} onAddLavorazione={onAddLavorazione}
            />
          </div>
        </div>}

      {/* Rubrica modal */}
      {showRubrica && rubrica && (
        <RubricaModal
          rubrica={rubrica}
          onSaveDitta={onSaveDitta}
          onDeleteDitta={onDeleteDitta}
          onAddLavorazione={onAddLavorazione}
          onClose={()=>setShowRubrica(false)}
        />
      )}
    </div>
  );
};

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