"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useColorMode } from "@/components/providers/ColorModeProvider";
import { Button } from "@/components/ds";
import { Moon, Sun, Sparkles } from "lucide-react";
import { PUBLIC_NAV } from "@/modules/beauty/constants/portals";
import { cn } from "@/lib/utils";

export function PublicBeautyLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const { mode, toggle } = useColorMode();

  return (
    <div className="min-h-screen bg-[var(--canvas)]">
      <header className="sticky top-0 z-40 border-b border-[var(--border)] bg-[var(--surface)]/90 backdrop-blur-md">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
          <Link href="/beauty/site" className="flex items-center gap-2 font-bold text-secondary">
            <span className="flex h-9 w-9 items-center justify-center rounded-xl bg-[var(--beauty-accent-soft)] text-[var(--beauty-accent)]">
              <Sparkles className="h-5 w-5" />
            </span>
            تربت بیوتی
          </Link>
          <nav className="hidden items-center gap-1 md:flex">
            {PUBLIC_NAV.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
                  pathname === item.href
                    ? "bg-[var(--beauty-accent-soft)] text-[var(--beauty-accent)]"
                    : "text-[var(--muted)] hover:text-secondary"
                )}
              >
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <Button type="button" variant="ghost" size="icon" onClick={toggle} aria-label="تم">
              {mode === "dark" ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
            </Button>
            <Link href="/login?returnUrl=/beauty/hub">
              <Button size="sm">ورود</Button>
            </Link>
          </div>
        </div>
      </header>
      <main>{children}</main>
      <footer className="mt-20 border-t border-[var(--border)] bg-[var(--surface)] py-12">
        <div className="mx-auto max-w-6xl px-4 text-center text-sm text-[var(--muted)] sm:px-6">
          © تربت‌یار — تربت بیوتی · پلتفرم SaaS زیبایی
        </div>
      </footer>
    </div>
  );
}