"use client";
import { useEffect, useState, type ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import clsx from "clsx";
import { LogOut, Menu, MoreHorizontal, X } from "lucide-react";
import { useAuth } from "@/lib/auth";
import { MOBILE_TABS, NAV } from "./nav";

function normalize(p: string | null): string {
  if (!p) return "/";
  const s = p.endsWith("/") ? p : p + "/";
  return s;
}

function isCurrent(href: string, path: string): boolean {
  if (href === "/") return path === "/";
  return path.startsWith(href);
}

export function Shell({ children }: { children: ReactNode }) {
  const { me, loading, logout, isOwner } = useAuth();
  const pathname = normalize(usePathname());
  const [open, setOpen] = useState(false);
  const isLogin = pathname === "/login/";

  useEffect(() => setOpen(false), [pathname]);

  if (isLogin) return <main className="min-h-dvh">{children}</main>;

  const isPublicPage = pathname === "/" || pathname === "/docs/";
  if (!loading && (!me || !me.mfa_passed) && isPublicPage) {
    return (
      <div className="min-h-dvh">
        <header className="sticky top-0 z-30 flex items-center justify-between border-b border-hairline bg-surface-1/95 px-3 py-2 backdrop-blur sm:px-5">
          <Link href="/" className="flex items-center gap-2">
            <Logo />
            <span className="text-sm font-semibold">FinData OS</span>
          </Link>
          <nav className="flex items-center gap-1" aria-label="Public">
            <Link href="/" className={clsx("btn btn-ghost btn-sm", pathname === "/" && "text-accent-ink")}>Overview</Link>
            <Link href="/docs/" className={clsx("btn btn-ghost btn-sm", pathname === "/docs/" && "text-accent-ink")}>Docs</Link>
            <a href="/api/docs" className="btn btn-ghost btn-sm">API</a>
            <Link href="/login/" className="btn btn-primary btn-sm">Sign in</Link>
          </nav>
        </header>
        <main className="min-w-0 px-3 pb-10 pt-3 sm:px-5 sm:pt-4 lg:px-8 lg:pt-6">
          <div className="mx-auto max-w-[1400px]">{children}</div>
        </main>
      </div>
    );
  }

  if (loading || !me || !me.mfa_passed) {
    return (
      <main className="flex min-h-dvh items-center justify-center p-6">
        <div className="flex items-center gap-3 text-ink-2">
          <span className="h-3 w-3 animate-pulse rounded-full bg-accent" aria-hidden />
          {loading ? "Checking session…" : "Redirecting to sign-in…"}
        </div>
      </main>
    );
  }

  const items = NAV.filter((n) => !n.owner || isOwner);
  const groups: { key: "data" | "ops" | "system"; label: string }[] = [
    { key: "data", label: "Data" },
    { key: "ops", label: "Operations" },
    { key: "system", label: "System" },
  ];
  const tabs = items.filter((n) => MOBILE_TABS.includes(n.href)).slice(0, 4);

  const NavList = (
    <nav className="flex flex-col gap-4" aria-label="Main">
      {groups.map((g) => {
        const gi = items.filter((n) => n.group === g.key);
        if (!gi.length) return null;
        return (
          <div key={g.key}>
            <div className="mb-1 px-2.5 text-[11px] font-semibold uppercase tracking-wider text-ink-3">{g.label}</div>
            <ul className="flex flex-col gap-0.5">
              {gi.map((n) => (
                <li key={n.href}>
                  <Link href={n.href} className="nav-link" aria-current={isCurrent(n.href, pathname) ? "page" : undefined}>
                    <n.icon className="h-4 w-4 shrink-0" aria-hidden />
                    <span>{n.label}</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        );
      })}
    </nav>
  );

  const Account = (
    <div className="border-t border-hairline pt-3">
      <div className="truncate px-2.5 text-xs text-ink-2" title={me.email ?? ""}>
        {me.email}
      </div>
      <div className="flex items-center justify-between px-2.5">
        <span className="pill bg-surface-2 text-ink-2">{me.role}</span>
        <button className="btn btn-ghost btn-sm" onClick={() => void logout()}>
          <LogOut className="h-3.5 w-3.5" /> Sign out
        </button>
      </div>
    </div>
  );

  return (
    <div className="min-h-dvh lg:grid lg:grid-cols-[232px_1fr]">
      {/* Sidebar (desktop) */}
      <aside className="sticky top-0 hidden h-dvh flex-col gap-4 overflow-y-auto border-r border-hairline bg-surface-1 p-3 lg:flex">
        <Link href="/" className="flex items-center gap-2 px-2.5 py-1">
          <Logo />
          <span className="text-sm font-semibold tracking-tight">FinData OS</span>
        </Link>
        <div className="flex-1">{NavList}</div>
        {Account}
      </aside>

      {/* Top bar (mobile/tablet) */}
      <header className="sticky top-0 z-30 flex items-center justify-between border-b border-hairline bg-surface-1/95 px-3 py-2 backdrop-blur lg:hidden">
        <Link href="/" className="flex items-center gap-2">
          <Logo />
          <span className="text-sm font-semibold">FinData OS</span>
        </Link>
        <button className="btn btn-ghost px-2" aria-label="Open menu" aria-expanded={open} onClick={() => setOpen(true)}>
          <Menu className="h-5 w-5" />
        </button>
      </header>

      {/* Drawer */}
      {open && (
        <div className="fixed inset-0 z-40 lg:hidden" role="dialog" aria-modal="true" aria-label="Navigation">
          <button className="absolute inset-0 bg-black/45" aria-label="Close menu" onClick={() => setOpen(false)} />
          <div className="absolute inset-y-0 right-0 flex w-[82%] max-w-xs flex-col gap-4 overflow-y-auto bg-surface-1 p-3 shadow-xl">
            <div className="flex items-center justify-between px-2.5">
              <span className="text-sm font-semibold">Menu</span>
              <button className="btn btn-ghost px-2" aria-label="Close" onClick={() => setOpen(false)}>
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="flex-1">{NavList}</div>
            {Account}
          </div>
        </div>
      )}

      {/* Content */}
      <main className="min-w-0 px-3 pb-20 pt-3 sm:px-5 sm:pt-4 lg:px-8 lg:pb-8 lg:pt-6">
        <div className="mx-auto max-w-[1400px]">{children}</div>
      </main>

      {/* Bottom tab bar (mobile) */}
      <nav className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-5 border-t border-hairline bg-surface-1/95 pb-[env(safe-area-inset-bottom)] backdrop-blur lg:hidden" aria-label="Quick">
        {tabs.map((n) => {
          const cur = isCurrent(n.href, pathname);
          return (
            <Link key={n.href} href={n.href} className={clsx("flex flex-col items-center gap-0.5 py-2 text-[11px]", cur ? "text-accent-ink" : "text-ink-2")} aria-current={cur ? "page" : undefined}>
              <n.icon className="h-5 w-5" aria-hidden />
              {n.label.split(" ")[0]}
            </Link>
          );
        })}
        <button className="flex flex-col items-center gap-0.5 py-2 text-[11px] text-ink-2" onClick={() => setOpen(true)}>
          <MoreHorizontal className="h-5 w-5" aria-hidden />
          More
        </button>
      </nav>
    </div>
  );
}

function Logo() {
  return (
    <svg viewBox="0 0 32 32" className="h-6 w-6" aria-hidden>
      <rect width="32" height="32" rx="7" fill="var(--accent)" />
      <path d="M8 22V10h4v12zm6 0V14h4v8zm6 0v-5h4v5z" fill="#fff" />
    </svg>
  );
}