"use client";

import { usePathname } from "next/navigation";
import Link from "next/link";
import { Activity, Crown, FileText, History, LayoutDashboard, PlusCircle, Smartphone, User } from "lucide-react";
import { ChatBot } from "@/components/ChatBot";

const navItems = [
  { href: "/dashboard", label: "Accueil", icon: LayoutDashboard },
  { href: "/dashboard/mobile", label: "Mesure", icon: Smartphone },
  { href: "/dashboard/historique", label: "Historique", icon: History },
  { href: "/dashboard/profil", label: "Profil", icon: User },
];

const desktopNavItems = [
  { href: "/dashboard", label: "Accueil", icon: LayoutDashboard },
  { href: "/dashboard/saisie", label: "Saisir", icon: PlusCircle },
  { href: "/dashboard/historique", label: "Historique", icon: History },
  { href: "/dashboard/rapports", label: "Rapports", icon: FileText },
];

export function AppShell({
  children,
  fullName,
  initials,
  diabetesLabel,
  plan,
}: {
  children: React.ReactNode;
  fullName: string | null;
  initials: string | null;
  diabetesLabel: string | null;
  plan?: string;
}) {
  const pathname = usePathname();
  const isMobile = pathname === "/dashboard/mobile";
  const isPremium = plan === "PREMIUM";

  if (isMobile) return <>{children}</>;

  return (
    <>
      <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/80 backdrop-blur">
        <div className="mx-auto flex max-w-5xl items-center justify-between gap-3 px-4 py-3">
          <Link href="/dashboard" className="flex items-center gap-2 font-semibold text-teal-700">
            <Activity className="h-5 w-5" />
            <span>Diabetix</span>
          </Link>

          <nav className="hidden md:flex items-center gap-1 text-sm">
            {desktopNavItems.map((item) => {
              const Icon = item.icon;
              const active = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={`flex items-center gap-1.5 rounded-md px-3 py-2 transition ${
                    active
                      ? "bg-teal-50 text-teal-800 font-medium"
                      : "text-slate-600 hover:bg-slate-100 hover:text-slate-900"
                  }`}
                >
                  <Icon className="h-4 w-4" />
                  {item.label}
                </Link>
              );
            })}
          </nav>

          <div className="flex items-center gap-2">
            {!isPremium && (
              <Link
                href="/pricing"
                className="hidden sm:inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-50 px-2.5 py-1 text-xs font-medium text-amber-700 hover:bg-amber-100"
              >
                <Crown className="h-3 w-3" />
                Premium
              </Link>
            )}
            {isPremium && (
              <span className="hidden sm:inline-flex items-center gap-1 rounded-full border border-teal-300 bg-gradient-to-r from-teal-50 to-cyan-50 px-2.5 py-1 text-xs font-semibold text-teal-700">
                <Crown className="h-3 w-3" />
                Premium
              </span>
            )}
            <Link
              href="/dashboard/profil"
              className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-2 py-1 text-sm text-slate-700 hover:border-teal-400 hover:text-teal-700"
              title={fullName ?? "Mon profil"}
            >
              <span className="flex h-7 w-7 items-center justify-center rounded-full bg-teal-100 text-xs font-semibold text-teal-700">
                {initials || <User className="h-3.5 w-3.5" />}
              </span>
            </Link>
          </div>
        </div>
      </header>

      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-6 pb-24 md:pb-10">
        {children}
      </main>

      {isPremium && <ChatBot />}

      <nav className="fixed inset-x-0 bottom-0 z-30 border-t border-slate-200 bg-white/95 backdrop-blur md:hidden">
        <div className="mx-auto grid max-w-5xl grid-cols-4">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex flex-col items-center gap-1 px-2 py-3 text-xs transition ${
                  active ? "text-teal-700 font-medium" : "text-slate-600 hover:text-teal-700"
                }`}
              >
                <Icon className="h-5 w-5" />
                {item.label}
              </Link>
            );
          })}
        </div>
      </nav>
    </>
  );
}
