/* portal-app.jsx — Root for the customer portal */

const PORTAL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "state": "active"
}/*EDITMODE-END*/;

const PORTAL_CRUMBS = {
  home:    ['RVDE', 'Portal', 'Início'],
  cycle:   ['RVDE', 'Portal', 'Ciclo Q3 · 2025'],
  history: ['RVDE', 'Portal', 'Histórico'],
  billing: ['RVDE', 'Portal', 'Faturas'],
  catalog: ['RVDE', 'Portal', 'Catálogo'],
  account: ['RVDE', 'Portal', 'Conta'],
  renewal: ['RVDE', 'Portal', 'Renovação'],
};

function App() {
  const [t, setTweak] = useTweaks(PORTAL_TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState('home');
  const [ibanOpen, setIbanOpen] = React.useState(false);
  const [denounceOpen, setDenounceOpen] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.theme]);

  // When state changes to a special mode, jump home so the user sees the diff right away
  React.useEffect(() => {
    if (t.state === 'suspended') setRoute('home');
    if (t.state === 'renewal')   setRoute('renewal');
    if (t.state === 'ended')     setRoute('home');
  }, [t.state]);

  const suspended = t.state === 'suspended';
  const renewal   = t.state === 'renewal';
  const ended     = t.state === 'ended';

  const crumbs = (renewal && route === 'home') ? PORTAL_CRUMBS.renewal : (PORTAL_CRUMBS[route] || ['RVDE', 'Portal']);
  const openIban     = () => setIbanOpen(true);
  const openDenounce = () => setDenounceOpen(true);

  // Pass to all screens
  const screenProps = { onNav: setRoute, suspended, onOpenIban: openIban };

  return (
    <div className={'app state-' + t.state}>
      <PortalSidebar
        route={route}
        onNav={setRoute}
        suspended={suspended}
        renewal={renewal}
        ended={ended}
      />
      <div className="main">
        <PortalTopBar
          crumbs={crumbs}
          suspended={suspended}
          renewal={renewal}
          ended={ended}
        />
        {suspended && <SuspendedBanner onOpenIban={openIban} onNav={setRoute}/>}
        {renewal && route !== 'renewal' && <RenewalBanner onOpenRenewal={() => setRoute('renewal')}/>}

        {/* Ended takes over home entirely */}
        {ended && route === 'home' && <PortalEnded onNav={setRoute}/>}

        {/* Renewal route */}
        {renewal && route === 'renewal' && (
          <RenewalScreen
            onNav={setRoute}
            onDenunciate={openDenounce}
            onRenegotiate={() => alert('Vamos abrir o calendário do Jorge…')}
          />
        )}

        {/* Normal routes */}
        {!ended && route === 'home'  && !renewal && <PortalHome    {...screenProps}/>}
        {!ended && route === 'home'  && renewal  && <PortalHome    {...screenProps}/>}
        {!ended && route === 'cycle'                && <PortalCycle   {...screenProps}/>}
        {ended && route === 'cycle'                 && <PortalCycle   {...screenProps} readonly/>}
        {route === 'history'                        && <PortalHistory ended={ended}/>}
        {route === 'billing'                        && <PortalBilling {...screenProps} ended={ended}/>}
        {!ended && route === 'catalog'              && <PortalCatalog onNav={setRoute}/>}
        {ended && route === 'catalog'               && <PortalEndedCatalog/>}
        {route === 'account'                        && <PortalAccount ended={ended}/>}
      </div>

      <IbanDialog open={ibanOpen} onClose={() => setIbanOpen(false)}/>
      <DenounceDialog open={denounceOpen} onClose={() => setDenounceOpen(false)}/>

      <TweaksPanel title="Tweaks · Portal">
        <TweakSection label="Estado do contrato"/>
        <TweakSelect
          label="Estado"
          value={t.state}
          options={[
            { value:'active',    label:'Ativo · ritual a correr (Q3 · D-7)' },
            { value:'suspended', label:'Suspenso · cobrança SEPA falhou (AC04)' },
            { value:'renewal',   label:'Renovação · 60 dias antes do fim' },
            { value:'ended',     label:'Terminado · modo arquivo (24 m completos)' },
          ]}
          onChange={(v) => setTweak('state', v)}
        />
        <div style={{marginTop:6, fontSize:11, lineHeight:1.5, color:'rgba(41,38,27,.55)'}}>
          Cada estado simula um momento real no ciclo de vida do cliente — banners, heroes, CTAs e dados adaptam-se.
        </div>
        <TweakSection label="Tema"/>
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={[
            { value:'light', label:'Claro' },
            { value:'dark',  label:'Escuro' },
          ]}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweaksPanel>
    </div>
  );
}

/* Light placeholder for ended-mode catalog (read-only) */
function PortalEndedCatalog() {
  return (
    <div className="content stack gap-5">
      <div>
        <h1 className="page-title">Catálogo</h1>
        <div className="page-sub">O contrato terminou — o catálogo continua disponível como referência, mas não podes adicionar a nenhum ciclo.</div>
      </div>
      <div className="card surface-2" style={{ padding: 36, textAlign: 'center' }}>
        <div className="italic-serif" style={{ fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          Se quiseres pedir produtos novamente — basta falar com Jorge.<br/>
          <a href="mailto:jorge@rvde.pt" className="mono" style={{ color: 'var(--clay)', fontSize: 12.5 }}>jorge@rvde.pt</a>
        </div>
      </div>
    </div>
  );
}

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