"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  Bell,
  ChevronDown,
  Database,
  GitCompare,
  Globe2,
  LayoutDashboard,
  MessageSquareQuote,
  Radar,
  Settings,
  Sparkles
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { CuveeSelector } from "@/components/CuveeSelector";
import { DataChatbot } from "@/components/DataChatbot";
import { TimeRangePicker } from "@/components/TimeRangePicker";
import { formatDateFr } from "@/lib/constants";
import { t } from "@/lib/i18n";
import { useOenoscopeStore } from "@/lib/store";
import { cn } from "@/lib/utils";

const navItems = [
  { label: "overview", href: "/", icon: LayoutDashboard },
  { label: "perception", href: "/perception", icon: MessageSquareQuote },
  { label: "markets", href: "/markets", icon: Globe2 },
  { label: "lexicon", href: "/lexicon", icon: Sparkles },
  { label: "competitive", href: "/competitive", icon: GitCompare },
  { label: "signals", href: "/signals", icon: Radar },
  { label: "sources", href: "/sources", icon: Database },
  { label: "settings", href: "/settings", icon: Settings }
] as const;

export function AppShell({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const locale = useOenoscopeStore((state) => state.locale);
  const setLocale = useOenoscopeStore((state) => state.setLocale);

  return (
    <div className="min-h-screen bg-ivory text-bordeaux-ink">
      <aside className="print-hidden fixed inset-y-0 left-0 z-30 flex w-52 flex-col border-r border-gold/25 bg-ivory px-3 py-5 xl:w-60 xl:px-4">
        <Link href="/" className="mb-8 flex items-center gap-3">
          <span className="grid h-11 w-11 place-items-center rounded-md border border-gold/40 font-serif text-3xl font-semibold text-gold">
            Œ
          </span>
          <span>
            <span className="block font-serif text-xl font-semibold leading-none text-bordeaux-deep xl:text-2xl">Œnoscope</span>
            <span className="text-[10px] uppercase tracking-[0.14em] text-smoke xl:text-[11px] xl:tracking-[0.18em]">Domaine de Chevalier</span>
          </span>
        </Link>

        <nav className="flex flex-1 flex-col gap-1">
          {navItems.map((item, index) => {
            const Icon = item.icon;
            const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex h-10 items-center gap-2 rounded-md px-2 text-sm transition-colors xl:gap-3 xl:px-3",
                  active ? "bg-bordeaux-deep text-ivory" : "text-bordeaux-ink hover:bg-gold/10",
                  index === 7 && "mt-3 border-t border-gold/20 pt-4"
                )}
              >
                <Icon className={cn("h-4 w-4", active ? "text-gold-pale" : "text-gold")} strokeWidth={1.5} />
                {t(item.label, locale)}
              </Link>
            );
          })}
        </nav>

        <div className="mt-4 rounded-md border border-gold/25 bg-ivory-warm p-3">
          <div className="flex items-center gap-3">
            <div className="grid h-10 w-10 place-items-center rounded-full bg-bordeaux-deep font-serif text-lg text-ivory">
              PB
            </div>
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-medium">Philippe Boutaud</p>
              <p className="hidden text-xs leading-snug text-smoke xl:block">Responsable Administratif et Financier</p>
            </div>
            <ChevronDown className="h-4 w-4 text-gold" strokeWidth={1.5} />
          </div>
        </div>
      </aside>

      <header className="print-hidden fixed left-52 right-0 top-0 z-20 grid h-16 grid-cols-[150px_minmax(0,1fr)_170px] items-center gap-3 border-b border-gold/25 bg-ivory px-4 xl:left-60 xl:grid-cols-[210px_minmax(0,1fr)_210px] xl:px-6 2xl:grid-cols-[230px_minmax(0,1fr)_240px] 2xl:px-8">
        <Link href="/" className="flex items-center gap-3">
          <span className="font-serif text-2xl font-semibold leading-none text-gold">Œ</span>
          <span>
            <span className="block font-serif text-lg font-semibold leading-none text-bordeaux-deep xl:text-xl">Œnoscope</span>
            <span className="hidden text-[10px] uppercase tracking-[0.16em] text-smoke xl:block">Domaine de Chevalier</span>
          </span>
        </Link>

        <div className="flex min-w-0 items-center justify-center gap-2 xl:gap-4">
          <TimeRangePicker compact />
          <Separator className="h-8 w-px" />
          <CuveeSelector compact />
        </div>

        <div className="flex items-center justify-end gap-2 xl:gap-3">
          <div className="flex rounded-md border border-gold/30 bg-ivory-warm p-1">
            {(["fr", "en"] as const).map((option) => (
              <button
                key={option}
                type="button"
                onClick={() => setLocale(option)}
                className={cn(
                  "h-7 rounded px-3 text-xs font-medium uppercase transition-colors",
                  locale === option ? "bg-bordeaux-deep text-ivory" : "text-smoke hover:text-bordeaux-ink"
                )}
              >
                {option}
              </button>
            ))}
          </div>
          <Button variant="secondary" size="icon" aria-label="Notifications">
            <span className="relative">
              <Bell className="h-4 w-4" strokeWidth={1.5} />
              <span className="absolute -right-2 -top-2 grid h-4 min-w-4 place-items-center rounded-full bg-rust px-1 text-[10px] text-ivory">
                4
              </span>
            </span>
          </Button>
          <div className="grid h-9 w-9 place-items-center rounded-full bg-bordeaux-deep font-serif text-sm text-ivory">
            PB
          </div>
        </div>
      </header>

      <main className="ml-52 pt-16 xl:ml-60">
        <div className="mx-auto max-w-7xl p-4 lg:p-6 2xl:p-8">{children}</div>
        <footer className="mx-auto max-w-7xl px-4 pb-8 text-xs text-smoke lg:px-6 2xl:px-8">
          <Separator className="mb-4" />
          Œnoscope — observatoire mondial de la perception. Données actualisées le {formatDateFr(new Date())}.
          Conçu pour la famille Bernard.
        </footer>
      </main>
      <DataChatbot />
    </div>
  );
}