"use client"

import React from "react"

import { AppSidebar } from "./app-sidebar"
import { AppHeader } from "./app-header"
import { useRouter } from "next/navigation"

interface AppLayoutProps {
  children: React.ReactNode
  userRole?: "lectura" | "edicion" | "admin"
  user?: {
    name: string
    email: string
    avatar?: string
    role: "lectura" | "edicion" | "admin"
  }
}

export function AppLayout({ children, userRole = "edicion", user }: AppLayoutProps) {
  const router = useRouter()
  const [isChecking, setIsChecking] = React.useState(true)
  const [localUser, setLocalUser] = React.useState<{ name: string; email: string; avatar?: string; role: "lectura" | "edicion" | "admin" } | null>(null)

  React.useEffect(() => {
    const checkToken = async () => {
      const token = localStorage.getItem("token")
      if (!token) {
        router.push("/login")
        return
      }

      // Validar que el token sea legítimo consultando al backend
      try {
        const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/me`, {
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
          },
        })

        if (!response.ok) {
          throw new Error("Token inválido o expirado")
        }

        const data = await response.json()
        const fetchedUser = data.user

        if (fetchedUser) {
          localStorage.setItem("user", JSON.stringify(fetchedUser))

          const mappedRole = fetchedUser.rol === "editor" ? "edicion" : fetchedUser.rol === "lector" ? "lectura" : "admin"

          setLocalUser({
            name: fetchedUser.name || "Usuario",
            email: fetchedUser.email || "",
            role: mappedRole as "lectura" | "edicion" | "admin",
          })
        }
      } catch (error) {
        // Si hay error en la validación, limpiar y redirigir
        console.error("Sesión inválida:", error)
        localStorage.removeItem("token")
        localStorage.removeItem("user")
        router.push("/login")
      } finally {
        setIsChecking(false)
      }
    }

    checkToken()
  }, [router])

  const handleLogout = () => {
    console.log("[v0] Logging out user")
    localStorage.removeItem("token")
    localStorage.removeItem("user")
    router.push("/login")
  }

  const userData = user || localUser || {
    name: "Usuario",
    email: "",
    role: userRole as "lectura" | "edicion" | "admin",
  }

  if (isChecking) {
    return (
      <div className="flex h-screen items-center justify-center bg-background">
        <div className="flex flex-col items-center gap-4">
          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
          <p className="text-sm text-muted-foreground">Verificando sesión...</p>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-background">
      <AppSidebar userRole={userRole} />
      <AppHeader user={userData} onLogout={handleLogout} />

      {/* Main content area */}
      <main className="ml-64 mt-16 min-h-[calc(100vh-4rem)]">{children}</main>
    </div>
  )
}