import { useState, type ReactNode } from 'react'
import { getSesion, logout, type Sesion } from '../services/auth'
import CambiarPasswordModal from './CambiarPasswordModal'
import LoginScreen from './LoginScreen'

/**
 * Gate de autenticación: sin sesión solo se ve el login; con sesión se ve la
 * app con una barra discreta "nombre · rol", "Contraseña" (modal de cambio)
 * y botón "Salir".
 */
export default function AuthGate({ children }: { children: ReactNode }) {
  const [sesion, setSesion] = useState<Sesion | null>(() => getSesion())
  const [modalPassword, setModalPassword] = useState(false)

  if (!sesion) {
    return <LoginScreen onLogin={() => setSesion(getSesion())} />
  }

  return (
    <div className="min-h-screen bg-[#F8FAFC] dark:bg-[#0F172A] text-[#111827] dark:text-[#E2E8F0] dark:bg-[#0F172A] dark:text-[#E2E8F0]">
      <div className="border-b border-[#E5E7EB] bg-white dark:border-[#1E293B] dark:bg-[#1E293B]">
        <div className="mx-auto flex max-w-[1280px] items-center justify-between px-4 py-2 sm:px-6">
          <span className="text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
            {sesion.usuario.nombre} · {sesion.usuario.rol}
          </span>
          <div className="flex items-center gap-4">
            <button
              type="button"
              onClick={() => setModalPassword(true)}
              className="rounded-lg px-2 py-1 text-xs font-medium text-[#64748B] dark:text-[#94A3B8] transition-colors duration-100 hover:text-[#111827] dark:text-[#E2E8F0]"
            >
              Contraseña
            </button>
            <button
              type="button"
              onClick={() => {
                logout()
                setSesion(null)
              }}
              className="rounded-lg px-2 py-1 text-xs font-medium text-accent transition-colors duration-100 hover:text-accent-hover"
            >
              Salir
            </button>
          </div>
        </div>
      </div>
      {children}
      {modalPassword && <CambiarPasswordModal onCerrar={() => setModalPassword(false)} />}
    </div>
  )
}