/* ============================================================
 * App orchestrator.
 *
 * Sessions are STRICTLY isolated by portal — there's no
 * cross-role chrome. To switch personas you must sign out and
 * sign back in as the other identity (matches the production
 * Pamoja flow; the demo's PortalSelector stands in for two
 * separate sign-in URLs).
 *
 * Production note: in the live platform, the Developer and VVB
 * have separate accounts, separate orgs, separate sessions. The
 * platform's authorisation layer (handled by Firebase Auth +
 * role gates) makes it impossible for a Developer account to
 * access VVB endpoints, and vice versa.
 * ============================================================ */

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [portal, setPortal]   = React.useState(null); // null | 'developer' | 'vvb'

  // ---- Developer-portal state (only meaningful when portal === 'developer')
  const [devView, setDevView]       = React.useState('dashboard');
  const [openProject, setOpenProject] = React.useState(null);
  const [openPhase, setOpenPhase]   = React.useState(null);
  const [showCreate, setShowCreate] = React.useState(false);
  const [projects, setProjects]     = React.useState(window.PROJECTS);

  // ---- VVB-portal state (only meaningful when portal === 'vvb')
  const [vvbView, setVvbView]       = React.useState('audits');
  const [vvbAuditProject, setVvbAuditProject] = React.useState(null);
  const [signedOff, setSignedOff]   = React.useState({});

  const hero = projects.find(p => p.hero) || projects[0];

  // ---- Login screen wins until the user signs in
  if (!portal) {
    return (
      <>
        <LoginScreen onSignIn={(role, account) => {
          setPortal(role);
          if (role === 'developer') {
            setDevView('dashboard'); setOpenProject(null); setOpenPhase(null); setShowCreate(false);
          } else {
            setVvbView('audits'); setVvbAuditProject(null);
          }
        }}/>
        <PamojaTweaks/>
      </>
    );
  }

  /* ---- Session sign-out: clears state, returns to portal selector ---- */
  const signOut = () => {
    setPortal(null);
    setOpenProject(null); setOpenPhase(null); setShowCreate(false);
    setVvbAuditProject(null);
    // Do NOT clear `projects` or `signedOff` — those persist across re-entry
    // so the demo accumulates state across persona switches (mimics the real
    // platform where data flows between portals via the canonical store).
  };

  const navDev = (id) => { setDevView(id); setOpenProject(null); setOpenPhase(null); };
  const navVvb = (id) => { setVvbView(id); setVvbAuditProject(null); };

  const handleCreate = (newProject) => {
    setProjects(ps => [newProject, ...ps]);
    setShowCreate(false);
    setOpenProject(newProject);
  };

  // ============== DEVELOPER PORTAL ==========================
  if (portal === 'developer') {
    const user = { name:'Grace Kimani', initials:'GK', subtitle:'Pamoja EcoGreen Co-op' };
    const goHome = () => { setDevView('dashboard'); setOpenProject(null); setOpenPhase(null); };
    return (
      <div data-screen-label="Developer Portal" style={{minHeight:'100vh'}}>
        <Navbar role="Project Developer" user={user} portal="developer" onSignOut={signOut} onHome={goHome}/>
        <div style={{display:'flex'}}>
          <Sidebar
            sections={DEV_NAV}
            active={openProject ? 'projects' : openPhase ? 'phase' : devView}
            onNav={navDev}
            footer={<HederaPill/>}
          />

          {openPhase ? (
            <Phase3Workspace
              project={openPhase}
              layoutMode={t.resumePhase3Mode}
              onBack={() => { setOpenPhase(null); if (!openProject) setDevView('dashboard'); }}
              onOpenFindings={() => { setOpenPhase(null); setDevView('findings'); }}
            />
          ) : openProject ? (
            <ProjectDetail
              project={openProject}
              layout={t.detailLayout}
              findings={FINDINGS}
              onBack={() => setOpenProject(null)}
              onOpenPhase={(p) => setOpenPhase(p)}
              onOpenFindings={() => { setOpenProject(null); setDevView('findings'); }}
            />
          ) : devView === 'dashboard' ? (
            <DeveloperDashboard
              projects={projects} hero={hero}
              onOpenProject={(p) => setOpenProject(p)}
              onResumePhase3={(p) => setOpenPhase(p)}
              onCreateProject={() => setShowCreate(true)}
              onOpenView={navDev}
            />
          ) : devView === 'projects' ? (
            <ProjectsView
              projects={projects}
              onOpen={(p) => setOpenProject(p)}
              onCreateProject={() => setShowCreate(true)}
            />
          ) : devView === 'phase' ? (
            <Phase3Workspace
              project={hero}
              layoutMode={t.resumePhase3Mode}
              onBack={() => setDevView('dashboard')}
              onOpenFindings={() => setDevView('findings')}
            />
          ) : devView === 'findings' ? (
            <FindingsView projects={projects} hero={hero} onOpenProject={(p)=>setOpenProject(p)}/>
          ) : devView === 'readiness' ? (
            <ReadinessView projects={projects} hero={hero} onOpenProject={(p) => setOpenProject(p)}/>
          ) : devView === 'hedera' ? (
            <HederaMonitor projects={projects}/>
          ) : devView === 'documents' ? (
            <DocumentsView projects={projects}/>
          ) : devView === 'buyers' ? (
            <BuyersView projects={projects}/>
          ) : devView === 'issuance' ? (
            <IssuanceView projects={projects}/>
          ) : null}
        </div>
        <AppFooter/>
        <CreateProjectFlow
          open={showCreate}
          variant={t.createProjectVariant}
          onClose={() => setShowCreate(false)}
          onCreate={handleCreate}
        />
        <PamojaTweaks/>
      </div>
    );
  }

  // ============== VVB PORTAL ================================
  const vvbUser = { name:'Sarah Chen', initials:'SC', subtitle:'SCS Global \u00b7 VVB-007' };
  const onPickAudit = (p) => { setVvbAuditProject(p); setVvbView('evidence'); };
  const onAdvance   = (p, target) => { setVvbAuditProject(p); setVvbView(target); };
  const goHomeVvb = () => { setVvbView('audits'); setVvbAuditProject(null); };

  return (
    <div data-screen-label="VVB Portal" style={{minHeight:'100vh'}}>
      <Navbar role="VVB Auditor" user={vvbUser} portal="vvb" onSignOut={signOut} onHome={goHomeVvb}/>
      <div style={{display:'flex'}}>
        <Sidebar
          sections={VVB_NAV}
          active={vvbView}
          onNav={navVvb}
          footer={<VvbSidebarFooter signedOff={signedOff}/>}
        />

        {vvbView === 'audits' && (
          <VVBHome projects={projects} signedOff={signedOff} onPickAudit={onPickAudit} onOpenView={navVvb}/>
        )}
        {vvbView === 'evidence' && (
          <EvidenceBrowser projects={projects} hero={vvbAuditProject || hero} onAdvance={onAdvance}/>
        )}
        {vvbView === 'sampling' && (
          <SamplingPanel projects={projects} hero={vvbAuditProject || hero} onAdvance={onAdvance}/>
        )}
        {vvbView === 'anomalies' && (
          <AnomalyQueue projects={projects} hero={vvbAuditProject || hero} onAdvance={onAdvance}/>
        )}
        {vvbView === 'signoff' && (
          <SignOffCeremony projects={projects} hero={vvbAuditProject || hero} layout={t.signOffLayout} signedOff={signedOff} setSignedOff={setSignedOff}/>
        )}
        {vvbView === 'hedera' && <VVBAnchors projects={projects}/>}
        {vvbView === 'account' && <VVBAccount user={vvbUser}/>}
      </div>
      <AppFooter/>
      <PamojaTweaks/>
    </div>
  );
}

function VvbSidebarFooter({ signedOff }) {
  return (
    <div>
      <div style={{fontSize:10, fontWeight:800, letterSpacing:'0.1em', textTransform:'uppercase', color:'#F4C300', marginBottom:6}}>SCS Global Services</div>
      <div style={{fontSize:11, color:'rgba(255,255,255,0.55)', lineHeight:1.6, fontFamily:'JetBrains Mono, monospace'}}>
        Accreditation<br/>VVB-007<br/><br/>
        {Object.keys(signedOff).length > 0 && (
          <span style={{color:'#2BC48A'}}>{Object.keys(signedOff).length} signed this session</span>
        )}
      </div>
    </div>
  );
}

function AppFooter() {
  return (
    <footer style={{
      padding:'20px 32px', borderTop:'1px solid #E5E7EB', background:'#fff',
      fontSize:11, color:'#9CA3AF', display:'flex', justifyContent:'space-between',
      alignItems:'center', gap:24, flexWrap:'wrap',
    }}>
      <div>© 2026 Consuming Carbon Corporation · operator of pamojadmrv.earth · 254 Chapman Road, Ste 208, Newark DE 19702</div>
      <div style={{display:'flex', alignItems:'center', gap:14, fontFamily:'JetBrains Mono, monospace', fontSize:10}}>
        <a href="#" style={{color:'#9CA3AF', textDecoration:'none'}}>Trust &amp; data handling</a>
        <span style={{color:'#E5E7EB'}}>·</span>
        <a href="#" style={{color:'#9CA3AF', textDecoration:'none'}}>Status</a>
        <span style={{color:'#E5E7EB'}}>·</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
          <span style={{width:6, height:6, borderRadius:'50%', background:'#2BC48A'}}/>
          Hedera testnet · 0.0.8321350
        </span>
      </div>
    </footer>
  );
}

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