"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";
import {
  LayoutDashboard,
  Sparkles,
  CalendarDays,
  FileText,
  CreditCard,
  Settings,
  Search,
  ChevronsUpDown,
} from "lucide-react";
import { CURRENT_CLIENT } from "@/lib/mock-data";
import { NotificationDropdown } from "@/components/NotificationDropdown";

const NAV = [
  { href: "/", label: "Tableau de bord", icon: LayoutDashboard },
  { href: "/atelier", label: "Atelier IA", icon: Sparkles },
  { href: "/planning", label: "Planning", icon: CalendarDays },
  { href: "/contenus", label: "Contenus", icon: FileText },
  { href: "/abonnement", label: "Abonnement", icon: CreditCard },
];

export function Shell({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex">
      {/* Sidebar desktop */}
      <aside className="hidden lg:flex w-64 border-r border-border bg-bg-card/60 backdrop-blur-sm flex-col">
        <div className="px-5 py-5 border-b border-border">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-accent to-cyan-500 flex items-center justify-center">
              <Sparkles className="w-4 h-4 text-white" strokeWidth={2.5} />
            </div>
            <div>
              <div className="text-[13px] font-semibold tracking-tight">Éditorial AI</div>
              <div className="text-[10px] text-text-dimmer uppercase tracking-widest">SEO Platform</div>
            </div>
          </div>
        </div>

        <ClientSwitcher />

        <nav className="flex-1 p-3 space-y-1">
          {NAV.map((item) => (
            <NavLink key={item.href} {...item} />
          ))}
        </nav>

        <div className="p-3 border-t border-border">
          <div className="p-3 rounded-xl bg-bg-card border border-border">
            <div className="flex items-center justify-between mb-2">
              <span className="text-[11px] text-text-dim uppercase tracking-wider">Tokens ce mois</span>
              <span className="text-[11px] text-accent-light font-mono">
                {Math.round((CURRENT_CLIENT.tokensUsed / CURRENT_CLIENT.tokensQuota) * 100)}%
              </span>
            </div>
            <div className="h-1.5 rounded-full bg-bg overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${(CURRENT_CLIENT.tokensUsed / CURRENT_CLIENT.tokensQuota) * 100}%` }}
                transition={{ duration: 1.2, ease: "easeOut" }}
                className="h-full bg-gradient-to-r from-accent to-cyan-400"
              />
            </div>
            <div className="mt-2 text-[11px] text-text-dim font-mono">
              {(CURRENT_CLIENT.tokensUsed / 1_000_000).toFixed(2)}M / {(CURRENT_CLIENT.tokensQuota / 1_000_000).toFixed(1)}M
            </div>
          </div>
        </div>
      </aside>

      {/* Main */}
      <div className="flex-1 flex flex-col min-w-0">
        <TopBar />
        <main className="flex-1 px-5 lg:px-8 py-6 pb-24 lg:pb-8">{children}</main>
        <BottomBar />
      </div>
    </div>
  );
}

function ClientSwitcher() {
  return (
    <div className="px-3 py-3 border-b border-border">
      <button className="w-full flex items-center gap-2.5 p-2.5 rounded-lg hover:bg-bg-card-hover transition-colors group">
        <div
          className="w-8 h-8 rounded-lg flex items-center justify-center text-[13px] font-semibold text-white"
          style={{ background: `linear-gradient(135deg, ${CURRENT_CLIENT.logoColor} 0%, #06b6d4 100%)` }}
        >
          {CURRENT_CLIENT.name.split(" ").map((w) => w[0]).slice(0, 2).join("")}
        </div>
        <div className="flex-1 min-w-0 text-left">
          <div className="text-[12.5px] font-medium truncate">{CURRENT_CLIENT.name}</div>
          <div className="text-[10.5px] text-text-dim truncate">{CURRENT_CLIENT.industry}</div>
        </div>
        <ChevronsUpDown className="w-3.5 h-3.5 text-text-dimmer group-hover:text-text-dim" />
      </button>
    </div>
  );
}

function NavLink({
  href,
  label,
  icon: Icon,
}: {
  href: string;
  label: string;
  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
}) {
  const pathname = usePathname();
  const isActive = href === "/" ? pathname === "/" : pathname.startsWith(href);
  return (
    <Link
      href={href}
      className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-[13px] transition-all ${
        isActive
          ? "bg-accent/15 text-text border border-border-bright"
          : "text-text-dim hover:text-text hover:bg-bg-card-hover border border-transparent"
      }`}
    >
      <Icon className="w-4 h-4" strokeWidth={isActive ? 2.25 : 1.75} />
      <span className={isActive ? "font-medium" : ""}>{label}</span>
      {isActive && (
        <motion.div
          layoutId="nav-dot"
          className="ml-auto w-1.5 h-1.5 rounded-full bg-accent"
        />
      )}
    </Link>
  );
}

function TopBar() {
  return (
    <header className="sticky top-0 z-20 border-b border-border bg-bg/80 backdrop-blur-md">
      <div className="flex items-center gap-4 px-5 lg:px-8 h-14">
        {/* Logo mobile */}
        <div className="lg:hidden flex items-center gap-2">
          <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-accent to-cyan-500 flex items-center justify-center">
            <Sparkles className="w-3.5 h-3.5 text-white" strokeWidth={2.5} />
          </div>
          <span className="text-[13px] font-semibold">Éditorial AI</span>
        </div>

        <div className="hidden lg:flex relative flex-1 max-w-md">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-dimmer" />
          <input
            type="text"
            placeholder="Rechercher un contenu, un mot-clé..."
            className="w-full pl-9 pr-3 py-2 text-[13px] bg-bg-card border border-border rounded-lg focus:outline-none focus:border-border-bright placeholder:text-text-dimmer"
          />
        </div>

        <div className="flex-1 lg:hidden" />

        <NotificationDropdown />

        <Link href="/parametres" className="p-2 rounded-lg hover:bg-bg-card-hover transition-colors">
          <Settings className="w-4 h-4 text-text-dim" />
        </Link>

        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-accent flex items-center justify-center text-[11px] font-semibold">
          AR
        </div>
      </div>
    </header>
  );
}

function BottomBar() {
  const pathname = usePathname();
  return (
    <nav className="lg:hidden fixed bottom-0 inset-x-0 z-30 border-t border-border bg-bg/95 backdrop-blur-md">
      <div className="flex items-stretch h-16 pb-safe">
        {NAV.map((item) => {
          const isActive = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className="flex-1 flex flex-col items-center justify-center gap-1 relative"
            >
              {isActive && (
                <motion.div
                  layoutId="bottombar-pill"
                  className="absolute top-1 w-10 h-0.5 rounded-full bg-accent"
                />
              )}
              <item.icon
                className={`w-4.5 h-4.5 transition-colors ${isActive ? "text-accent" : "text-text-dim"}`}
                strokeWidth={isActive ? 2.25 : 1.75}
              />
              <span className={`text-[10px] ${isActive ? "text-text font-medium" : "text-text-dim"}`}>
                {item.label.split(" ")[0]}
              </span>
            </Link>
          );
        })}
      </div>
    </nav>
  );
}