"use client";

import type { ReactNode } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { useAuthStore } from "@/store/useAuthStore";

type NavItem = {
  href: string;
  label: string;
  shortLabel: string;
  icon: (active: boolean) => ReactNode;
};

const NAV_ITEMS: NavItem[] = [
  {
    href: "/",
    label: "Command Center",
    shortLabel: "Home",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1v-10.5z" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    href: "/curriculum",
    label: "30-Day Plan",
    shortLabel: "30-Day",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="3" y="4" width="18" height="17" rx="3" />
        <path d="M8 2v4M16 2v4M3 9h18M8 14l2.5 2.5L16 11" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    href: "/record",
    label: "Camera Studio",
    shortLabel: "Studio",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <rect x="2" y="6" width="14" height="12" rx="2.5" />
        <path d="M16 10l6-3.5v11L16 14v-4z" strokeLinecap="round" strokeLinejoin="round" />
        <circle cx="9" cy="12" r="2.2" fill="currentColor" />
      </svg>
    ),
  },
  {
    href: "/tech-news",
    label: "Tech News Lab",
    shortLabel: "News",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M4 5h13a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5z" />
        <path d="M19 8h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1M8 9h7M8 13h7M8 17h4" strokeLinecap="round" />
      </svg>
    ),
  },
  {
    href: "/exercises",
    label: "Daily Drills",
    shortLabel: "Drills",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M13 2L3 14h8l-1 8 10-12h-8l1-8z" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    href: "/progress",
    label: "Progress & Compare",
    shortLabel: "Progress",
    icon: (active) => (
      <svg className={cn("h-5 w-5", active ? "text-ember" : "text-ink/65")} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M4 19h16M7 15V9M12 15V5M17 15v-3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
];

type AppShellProps = {
  children: ReactNode;
  title?: string;
  subtitle?: string;
  eyebrow?: string;
  actions?: ReactNode;
  maxWidthClass?: string;
};

export function AppShell({
  children,
  title,
  subtitle,
  eyebrow,
  actions,
  maxWidthClass = "max-w-7xl",
}: AppShellProps) {
  const pathname = usePathname();
  const router = useRouter();
  const userEmail = useAuthStore((state) => state.userEmail);
  const logout = useAuthStore((state) => state.logout);

  const isActive = (href: string) => {
    if (href === "/") return pathname === "/";
    return pathname === href || pathname?.startsWith(`${href}/`);
  };

  const handleLogout = async () => {
    await logout();
    router.replace("/login");
  };

  return (
    <div className="min-h-screen bg-hero-gradient pb-24 lg:pb-12">
      <header className="sticky top-0 z-30 border-b border-ink/10 bg-cream/85 backdrop-blur-md">
        <div className={cn("mx-auto flex items-center justify-between gap-4 px-4 py-3 sm:px-6", maxWidthClass)}>
          <Link href="/" className="flex items-center gap-3">
            <span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-ink text-white shadow-sm">
              <svg className="h-5 w-5 text-ember" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
                <rect x="2" y="6" width="13" height="12" rx="2.5" />
                <path d="M15 10.5l6-3.5v10l-6-3.5v-3z" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            <div className="leading-tight">
              <p className="font-display text-base font-semibold tracking-tight text-ink">Speech-Machine</p>
              <p className="text-[11px] font-medium uppercase tracking-[0.18em] text-ink/55">
                Tech Presenter Coach
              </p>
            </div>
          </Link>

          <nav aria-label="Main navigation" className="hidden items-center gap-1 lg:flex">
            {NAV_ITEMS.map((item) => {
              const active = isActive(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "flex items-center gap-2 rounded-full px-3.5 py-2 text-sm font-medium transition",
                    active
                      ? "bg-ink text-white shadow-sm"
                      : "text-ink/75 hover:bg-ink/5 hover:text-ink"
                  )}
                >
                  {item.label}
                </Link>
              );
            })}
          </nav>

          <div className="flex items-center gap-2">
            {pathname !== "/record" && (
              <Link href="/record" className="hidden sm:inline-flex">
                <Button size="sm" className="bg-ember text-white hover:bg-ember/90">
                  Open Studio
                </Button>
              </Link>
            )}
            {userEmail && (
              <span className="hidden max-w-[160px] truncate rounded-full bg-white/75 px-3 py-1.5 text-xs font-medium text-ink/70 xl:inline-block">
                {userEmail}
              </span>
            )}
            <Button variant="ghost" size="sm" onClick={handleLogout} title="Sign out">
              Sign out
            </Button>
          </div>
        </div>
      </header>

      <main className={cn("mx-auto px-4 pt-6 sm:px-6 lg:pt-8", maxWidthClass)}>
        {(title || actions) && (
          <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
            <div className="space-y-1">
              {eyebrow && (
                <p className="text-xs font-semibold uppercase tracking-[0.26em] text-ember">
                  {eyebrow}
                </p>
              )}
              {title && (
                <h1 className="font-display text-2xl font-semibold tracking-tight text-ink sm:text-3xl lg:text-4xl">
                  {title}
                </h1>
              )}
              {subtitle && <p className="max-w-3xl text-sm text-ink/70 sm:text-base">{subtitle}</p>}
            </div>
            {actions && <div className="flex flex-wrap items-center gap-2.5">{actions}</div>}
          </div>
        )}
        {children}
      </main>

      <nav
        aria-label="Mobile navigation"
        className="fixed inset-x-0 bottom-0 z-40 border-t border-ink/10 bg-cream/95 px-2 pb-[calc(env(safe-area-inset-bottom)+0.35rem)] pt-1.5 backdrop-blur-md lg:hidden"
      >
        <div className="mx-auto grid max-w-lg grid-cols-6 gap-1">
          {NAV_ITEMS.map((item) => {
            const active = isActive(item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center justify-center gap-0.5 rounded-2xl py-1.5 text-[11px] font-medium transition",
                  active ? "bg-ink/8 font-semibold text-ink" : "text-ink/65 hover:text-ink"
                )}
              >
                {item.icon(active)}
                <span className="truncate">{item.shortLabel}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </div>
  );
}