// src/app.jsx — root + router + tweaks + outer browser-window shell.

const ROOT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "inicioLayout": "agenda",
  "dashboardFold": "action_first",
  "importPicker": "side_by_side",
  "viewport": "browser"
}/*EDITMODE-END*/;

function AdmixRoot() {
  const [t, setTweak] = useTweaks(ROOT_TWEAK_DEFAULTS);
  return (
    <AxStoreProvider>
      <ChromeShell>
        <AdmixApp tweaks={t} setTweak={setTweak}/>
      </ChromeShell>
      <TweaksUI tweaks={t} setTweak={setTweak}/>
    </AxStoreProvider>
  );
}

function AdmixApp({ tweaks, setTweak }) {
  const { state, setTweaks } = useAxStore();
  const { path } = useHashRoute();

  useEffect(() => { setTweaks(tweaks); }, [tweaks]);

  // Route to either auth or product
  const isAuth = path === '/signin' || path === '/onboarding';
  if (isAuth) {
    return (
      <div className="ax" style={{ width: '100%', height: '100%', overflow: 'auto', background: 'var(--ax-bg)' }}>
        {path === '/onboarding'
          ? <OnboardingScreen onFinish={() => (window.location.hash = '/inicio')}/>
          : <SignInScreen onSignIn={() => (window.location.hash = '/inicio')}/>}
      </div>
    );
  }

  return (
    <div className="ax" style={{
      display: 'flex', width: '100%', height: '100%',
      overflow: 'hidden', background: 'var(--ax-bg)',
    }}>
      <AxLeftNav/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 0 }}>
        <AxTopbar/>
        <main style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <Router/>
        </main>
      </div>
      <AxToastDeck/>
    </div>
  );
}

function Router() {
  const { path } = useHashRoute();

  if (path === '/' || path === '' || path === '/inicio') return <DashboardScreen/>;
  if (path.startsWith('/eventos'))                       return <EventosScreen/>;
  if (path.startsWith('/importar/revision'))             return <RevisionScreen/>;
  if (path.startsWith('/importar'))                      return <ImportScreen/>;
  if (path.startsWith('/pendientes'))                    return <PendientesScreen/>;
  if (path.startsWith('/operaciones'))                   return <OperacionesScreen/>;
  if (path.startsWith('/polizas'))                       return <PoliciesScreen/>;
  if (path.startsWith('/clientes'))                      return <ClientsScreen/>;
  if (path.startsWith('/contactos'))                     return <ContactoScreen/>;
  if (path.startsWith('/cumplimiento'))                  return <CumplimientoScreen/>;
  if (path.startsWith('/vitrina'))                       return <VitrinaNodosScreen/>;
  if (path.startsWith('/flujo-cedula'))                  return <FlujoCedulaScreen/>;
if (path.startsWith('/catalogo'))                      return <CatalogScreen/>;
  if (path.startsWith('/discovery'))                     return <DiscoveryLoopScreen/>;
  if (path.startsWith('/ajustes'))                       return <SettingsScreen/>;

  // 404
  return (
    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <AxEmpty
        icon="search"
        title="Pantalla no encontrada"
        body={path}
        action={<AxButton variant="secondary" onClick={() => (window.location.hash = '/inicio')}>Volver al inicio</AxButton>}
      />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// TWEAKS — exposes the variations the user picked at scoping time
// ─────────────────────────────────────────────────────────────
function TweaksUI({ tweaks, setTweak }) {
  const { navigate } = useHashRoute();
  return (
    <TweaksPanel>
      <TweakSection label="Pantallas"/>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
        {[
          ['/inicio', 'Inicio'],
          ['/eventos', 'Eventos'],
          ['/pendientes', 'Pendientes'],
          ['/operaciones', 'Operaciones'],
          ['/importar', 'Importar'],
          ['/importar/revision', 'Revisión (importar)'],
          ['/polizas', 'Pólizas'],
          ['/clientes', 'Clientes'],
          ['/clientes/duplicados', 'Fichas repetidas'],
          ['/contactos', 'Contactos'],
          ['/cumplimiento', 'Cumplimiento'],
          ['/vitrina', 'Vitrina nodos'],
          ['/flujo-cedula', 'Flujo: cédula'],
['/catalogo', 'Catálogo'],
          ['/discovery', 'Discovery Loop'],
          ['/ajustes', 'Ajustes'],
          ['/ajustes/doctor', 'Diagnóstico'],
          ['/signin', 'Sign-in'],
          ['/onboarding', 'Onboarding'],
        ].map(([to, label]) => (
          <button key={to}
            onClick={() => navigate(to)}
            style={{
              appearance: 'none',
              background: 'rgba(255,255,255,0.7)',
              border: '1px solid rgba(0,0,0,0.08)',
              borderRadius: 6, padding: '6px 8px', fontSize: 11,
              color: '#29261b', cursor: 'default', textAlign: 'left',
            }}>
            {label}
          </button>
        ))}
      </div>

      <TweakSection label="Inicio · diseño"/>
      <TweakRadio label="Layout"
        value={tweaks.inicioLayout}
        options={[
          { value: 'agenda',   label: 'Agenda (nuevo)' },
          { value: 'resumen3', label: 'Resumen 3 vistas' },
          { value: 'clasico',  label: 'Clásico' },
        ]}
        onChange={(v) => setTweak('inicioLayout', v)}/>
      <div style={{ fontSize: 10, color: 'rgba(41,38,27,0.55)', lineHeight: 1.45, marginTop: -2 }}>
        Agenda = el día como lista accionable (rediseño 2026-07-06) · Resumen = panorama 3 vistas · Clásico = el dashboard original (variantes de fold abajo)
      </div>

      <TweakSection label="Inicio Clásico (above-the-fold)"/>
      <TweakRadio label="Variante"
        value={tweaks.dashboardFold}
        options={[
          { value: 'action_first', label: 'Acción' },
          { value: 'queue_first',  label: 'Cola' },
          { value: 'data_first',   label: 'Datos' },
        ]}
        onChange={(v) => setTweak('dashboardFold', v)}/>
      <div style={{ fontSize: 10, color: 'rgba(41,38,27,0.55)', lineHeight: 1.45, marginTop: -2 }}>
        Acción = CTA "Cargar pólizas" hero · Cola = pendientes en primer plano · Datos = KPI tiles grandes
      </div>

      <TweakSection label="Importar — selector de fuente"/>
      <TweakRadio label="Estilo"
        value={tweaks.importPicker}
        options={[
          { value: 'side_by_side', label: 'Tarjetas' },
          { value: 'sequential',   label: 'Secuencial' },
        ]}
        onChange={(v) => setTweak('importPicker', v)}/>

      <TweakSection label="Datos de prueba"/>
      <div style={{ fontSize: 10, color: 'rgba(41,38,27,0.55)', lineHeight: 1.45 }}>
        Estado mid-cohorte: ~120 pólizas, 42 pendientes, 5 aseguradoras. Atajos del rediseño de catálogos:
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 4 }}>
        <TwkAction onClick={() => navigate('/operaciones')}>
          → Operaciones: bandeja + vigía (nuevo)
        </TwkAction>
        <TwkAction onClick={() => {
          const g = window.AdmixOperaciones && AdmixOperaciones.GESTIONES.find((x) => x.tramiteId === 'rehabilitacion');
          if (g) navigate('/operaciones/gestion/' + g.id);
        }}>
          → Gestión dolorosa: rehabilitación H107 (requisitos faltantes)
        </TwkAction>
        <TwkAction onClick={() => navigate('/clientes/duplicados')}>
          → Consolidador: fichas repetidas
        </TwkAction>
        <TwkAction onClick={() => {
          const r = AdmixPersonas.personasConCartera().find((x) => x.kyc && x.kyc.perfil.requiereCopias && x.kyc.estado === 'atencion');
          if (r) navigate('/clientes/' + r.persona.id);
        }}>
          → Persona con expediente incompleto (Art. 492)
        </TwkAction>
        <TwkAction onClick={() => { if (window.__axNenaVidaId) navigate('/polizas/' + window.__axNenaVidaId); }}>
          → Póliza de VIDA con beneficiaria menor (prima correcta)
        </TwkAction>
        <TwkAction onClick={() => navigate('/clientes/m0001')}>
          → Persona moral (empresa) con expediente PM
        </TwkAction>
        <TwkAction onClick={() => navigate('/pendientes')}>
          → Ver cola de pendientes (priorizada)
        </TwkAction>
        <TwkAction onClick={() => navigate('/importar/revision/' + AdmixData.PENDIENTES[0].id)}>
          → Ver archivo por revisar (campos vacíos)
        </TwkAction>
        <TwkAction onClick={() => navigate('/polizas/' + AdmixData.POLICIES.find((p) => p.status === 'RENEWAL_PENDING').id)}>
          → Ver póliza con renovación próxima
        </TwkAction>
        <TwkAction onClick={() => navigate('/eventos')}>
          → Ver eventos de la semana
        </TwkAction>
        <TwkAction onClick={() => navigate('/cumplimiento')}>
          → Ver mapa de cumplimiento
        </TwkAction>
        <TwkAction onClick={() => navigate('/importar')}>
          → Probar import end-to-end
        </TwkAction>
        <TwkAction onClick={() => navigate('/discovery')}>
          → Ver Discovery Loop (consentimiento)
        </TwkAction>
        <TwkAction onClick={() => navigate('/onboarding')}>
          → Ver onboarding wizard
        </TwkAction>
      </div>
    </TweaksPanel>
  );
}

function TwkAction({ onClick, children }) {
  return (
    <button onClick={onClick} style={{
      appearance: 'none',
      background: 'rgba(255,255,255,0.7)',
      border: '1px solid rgba(0,0,0,0.06)',
      borderRadius: 6, padding: '6px 8px', fontSize: 11,
      color: '#29261b', cursor: 'default', textAlign: 'left',
    }}>{children}</button>
  );
}

// ─────────────────────────────────────────────────────────────
// MOUNT
// ─────────────────────────────────────────────────────────────
ReactDOM.createRoot(document.getElementById('root')).render(<AdmixRoot/>);