"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import {
  COMPTE_SETTINGS_NAV,
  isCompteSettingsNavActive,
} from "@/lib/compte-settings/settings-nav"
import {
  mailNavRowClass,
  MAIL_SETTINGS_MAIN_CARD_CLASS,
  MAIL_SETTINGS_MAIN_INSET_CLASS,
} from "@/lib/mail-chrome-classes"
import { CompteSettingsHeader } from "@/components/compte/compte-settings-header"

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

  return (
    <div
      data-compte-settings-app
      className="ultimail-app flex h-dvh max-h-dvh flex-col overflow-hidden bg-app-canvas"
    >
      <CompteSettingsHeader />

      <div className="flex min-h-0 flex-1 flex-col md:flex-row">
        <aside
          data-compte-settings-sidebar
          className="hidden w-64 shrink-0 overflow-y-auto bg-app-canvas p-3 md:block lg:w-72"
        >
          <nav className="space-y-1" aria-label="Sections du compte">
            {COMPTE_SETTINGS_NAV.map((item) => {
              const active = isCompteSettingsNavActive(pathname, item)
              const Icon = item.icon
              return (
                <Link
                  key={item.id}
                  href={item.href}
                  aria-current={active ? "page" : undefined}
                  className={cn(
                    "flex w-full items-start gap-3 rounded-lg px-3 py-2.5 transition-colors",
                    active
                      ? "bg-mail-nav-selected"
                      : "hover:bg-mail-nav-hover"
                  )}
                >
                  <Icon
                    className={cn(
                      "mt-0.5 size-4 shrink-0 opacity-70",
                      active ? "text-mail-nav-selected" : "text-muted-foreground"
                    )}
                  />
                  <span className="min-w-0 flex-1">
                    <span
                      className={cn(
                        "block text-sm font-medium",
                        active ? "text-mail-nav-selected" : "text-muted-foreground"
                      )}
                    >
                      {item.label}
                    </span>
                    <span className="block text-xs font-normal text-muted-foreground">
                      {item.description}
                    </span>
                  </span>
                </Link>
              )
            })}
          </nav>
        </aside>

        <div className={MAIL_SETTINGS_MAIN_INSET_CLASS}>
          <div data-compte-settings-main className={MAIL_SETTINGS_MAIN_CARD_CLASS}>
            <nav
              className="shrink-0 border-b border-border px-2 py-2 md:hidden"
              aria-label="Sections du compte"
            >
              <div className="flex gap-1 overflow-x-auto">
                {COMPTE_SETTINGS_NAV.map((item) => {
                  const active = isCompteSettingsNavActive(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",
                        active
                          ? cn("gap-2 px-3 py-2", mailNavRowClass({ isSelected: true }))
                          : cn("size-9 justify-center", mailNavRowClass({ isSelected: false }))
                      )}
                    >
                      <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 w-full max-w-3xl">{children}</div>
            </main>
          </div>
        </div>
      </div>
    </div>
  )
}