"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState } from "react";
import { FileText, Headset, LayoutDashboard, LogOut, Menu, User, X } from "lucide-react";
import { api } from "@/lib/client";
import { cn } from "@/components/ui";
import { initials } from "@/lib/utils";

const NAV = [
  { href: "/portal", label: "Dashboard", icon: <LayoutDashboard className="h-4 w-4" /> },
  { href: "/portal/tickets", label: "Support tickets", icon: <Headset className="h-4 w-4" /> },
  { href: "/portal/profile", label: "My profile", icon: <User className="h-4 w-4" /> },
];

export function PortalShell({ name, email, children }: { name: string; email: string; children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const [open, setOpen] = useState(false);

  const links = (
    <nav className="space-y-1 p-3">
      {NAV.map((item) => {
        const active = item.href === "/portal" ? pathname === "/portal" : pathname.startsWith(item.href);
        return (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              "flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition",
              active ? "bg-brand-500/18 text-slate-50 ring-1 ring-inset ring-brand-400/25" : "text-slate-400 hover:bg-white/6 hover:text-slate-100",
            )}
          >
            {item.icon}
            {item.label}
          </Link>
        );
      })}
    </nav>
  );

  return (
    <div className="min-h-screen">
      <header className="sticky top-0 z-30 border-b border-white/8 bg-ink-950/85 backdrop-blur-xl">
        <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-3">
          <div className="flex items-center gap-3">
            <button className="grid h-9 w-9 place-items-center rounded-xl border border-white/10 bg-white/5 md:hidden" onClick={() => setOpen((v) => !v)}>
              {open ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
            </button>
            <Link href="/portal" className="flex items-center gap-2">
              <span className="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-brand-500 to-cyan-400 text-xs font-bold text-ink-950">IS</span>
              <div>
                <p className="text-sm font-bold text-slate-50">ISP DIGITAL</p>
                <p className="text-[10px] uppercase tracking-[0.18em] text-slate-500">Customer portal</p>
              </div>
            </Link>
          </div>
          <div className="flex items-center gap-3">
            <div className="hidden text-right sm:block">
              <p className="text-xs font-medium text-slate-200">{name}</p>
              <p className="text-[10px] text-slate-500">{email}</p>
            </div>
            <span className="grid h-9 w-9 place-items-center rounded-xl bg-white/8 text-xs font-bold text-slate-100">{initials(name)}</span>
            <button
              onClick={async () => {
                await api("/api/auth/logout", { method: "POST" });
                router.replace("/login");
                router.refresh();
              }}
              className="grid h-9 w-9 place-items-center rounded-xl border border-white/10 bg-white/5 text-slate-300 transition hover:bg-rose-500/15 hover:text-rose-300"
              aria-label="Logout"
            >
              <LogOut className="h-4 w-4" />
            </button>
          </div>
        </div>
      </header>

      <div className="mx-auto flex max-w-6xl gap-4 px-4 py-5">
        <aside className="glass hidden w-56 shrink-0 self-start rounded-2xl md:block">{links}</aside>
        <main className="min-w-0 flex-1">{children}</main>
      </div>

      {open ? (
        <div className="fixed inset-0 z-40 md:hidden">
          <div className="absolute inset-0 bg-ink-950/80" onClick={() => setOpen(false)} />
          <aside className="glass-strong absolute left-0 top-0 h-full w-64">{links}</aside>
        </div>
      ) : null}

      <footer className="pb-6 text-center text-[11px] text-slate-600">
        <FileText className="mr-1 inline h-3 w-3" /> ISP DIGITAL customer self-care
      </footer>
    </div>
  );
}