"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { authClient } from "@/lib/auth-client"
import { cn } from "@/lib/utils"

const navItems = [
  { href: "/parent/dashboard", label: "Dashboard", emoji: "📊" },
  { href: "/parent/configuracion", label: "Configuración", emoji: "⚙️" },
]

export default function ParentLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const { data: session } = authClient.useSession()
  const [sidebarOpen, setSidebarOpen] = useState(false)

  if (
    pathname.startsWith("/parent/auth")
  ) {
    return <div className="min-h-dvh bg-background">{children}</div>
  }

  return (
    <div className="min-h-dvh bg-background flex flex-col">
      <header className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button
            onClick={() => setSidebarOpen(!sidebarOpen)}
            className="text-foreground touch-target rounded-xl flex items-center justify-center"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M3 12h18M3 6h18M3 18h18" />
            </svg>
          </button>
          <h1 className="text-lg font-display font-bold">EduEasy</h1>
        </div>
        <div className="flex items-center gap-3">
          <span className="text-sm text-muted-foreground hidden sm:block">
            {session?.user?.name || "Mamá"}
          </span>
          <button
            onClick={() => authClient.signOut()}
            className="text-sm text-muted-foreground underline"
          >
            Salir
          </button>
        </div>
      </header>

      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/20 z-20"
          onClick={() => setSidebarOpen(false)}
        >
          <nav
            className="fixed left-0 top-0 bottom-0 w-64 bg-white shadow-lg p-4 pt-16"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex flex-col gap-2">
              {navItems.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={() => setSidebarOpen(false)}
                  className={cn(
                    "flex items-center gap-3 rounded-xl px-4 py-3 font-display font-medium transition-colors",
                    pathname.startsWith(item.href)
                      ? "bg-primary/10 text-primary"
                      : "text-foreground hover:bg-muted",
                  )}
                >
                  <span>{item.emoji}</span>
                  {item.label}
                </Link>
              ))}
            </div>
          </nav>
        </div>
      )}

      <main className="flex-1">{children}</main>
    </div>
  )
}