"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { ArrowLeft } from "lucide-react"
import { cn } from "@/lib/utils"
import {
  isMailSettingsNavActive,
  MAIL_SETTINGS_NAV,
} from "@/lib/mail-settings/settings-nav"

export function MailSettingsLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <div className="flex h-dvh max-h-dvh flex-col overflow-hidden bg-background">
      <header className="shrink-0 border-b border-border bg-background px-4 py-4 sm:px-6">
        <div className="mx-auto flex max-w-6xl items-center gap-3">
          <Link
            href="/mail/inbox"
            className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-accent"
            aria-label="Retour à la boîte de réception"
          >
            <ArrowLeft className="size-5" />
          </Link>
          <div>
            <h1 className="text-xl font-normal text-foreground">
              Paramètres Ultimail
            </h1>
            <p className="text-sm text-muted-foreground">
              Configuration du compte, de l&apos;affichage et des automatisations
            </p>
          </div>
        </div>
      </header>

      <div className="flex min-h-0 flex-1 flex-col md:flex-row">
        <aside className="hidden w-64 shrink-0 overflow-y-auto border-r border-border bg-muted/20 p-3 md:block lg:w-72">
          <nav className="space-y-1" aria-label="Sections des paramètres">
            {MAIL_SETTINGS_NAV.map((item) => {
              const active = isMailSettingsNavActive(pathname, item)
              const Icon = item.icon
              return (
                <Link
                  key={item.id}
                  href={item.href}
                  className={cn(
                    "flex items-start gap-3 rounded-lg px-3 py-2.5 transition-colors",
                    active
                      ? "bg-accent text-accent-foreground"
                      : "text-foreground hover:bg-accent/50"
                  )}
                >
                  <Icon className="mt-0.5 size-4 shrink-0 opacity-70" />
                  <span className="min-w-0">
                    <span className="block text-sm font-medium">{item.label}</span>
                    <span className="block text-xs text-muted-foreground">
                      {item.description}
                    </span>
                  </span>
                </Link>
              )
            })}
          </nav>
        </aside>

        <div className="flex min-h-0 min-w-0 flex-1 flex-col">
          <nav
            className="shrink-0 border-b border-border bg-muted/20 px-2 py-2 md:hidden"
            aria-label="Sections des paramètres"
          >
            <div className="flex gap-1 overflow-x-auto">
              {MAIL_SETTINGS_NAV.map((item) => {
                const active = isMailSettingsNavActive(pathname, item)
                const Icon = item.icon
                return (
                  <Link
                    key={item.id}
                    href={item.href}
                    aria-label={item.label}
                    aria-current={active ? "page" : undefined}
                    className={cn(
                      "flex shrink-0 items-center rounded-lg transition-colors",
                      active
                        ? "gap-2 bg-accent px-3 py-2 text-accent-foreground"
                        : "size-9 justify-center text-foreground hover:bg-accent/50"
                    )}
                  >
                    <Icon className="size-4 shrink-0 opacity-70" />
                    {active ? (
                      <span className="text-sm font-medium">{item.label}</span>
                    ) : null}
                  </Link>
                )
              })}
            </div>
          </nav>

          <main className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-8">
            <div className="mx-auto max-w-3xl">{children}</div>
          </main>
        </div>
      </div>
    </div>
  )
}