import { useState } from "react";
import { Link, useLocation } from "wouter";
import { useTranslation } from "react-i18next";
import {
  LayoutDashboard, Building2, BarChart3, CreditCard,
  HelpCircle, LogOut, Stethoscope, Menu, X, Shield,
} from "lucide-react";
import { useAuth } from "@/_core/hooks/useAuth";
import { cn } from "@/lib/utils";

function LanguageSwitcher({ className = "" }: { className?: string }) {
  const { i18n } = useTranslation();
  const current = i18n.resolvedLanguage ?? i18n.language ?? "fr";
  const change = (lng: "fr" | "en") => i18n.changeLanguage(lng);
  return (
    <div className={cn("inline-flex rounded-lg overflow-hidden border border-emerald-200 bg-white text-xs font-semibold", className)}>
      <button
        onClick={() => change("fr")}
        className={cn(
          "px-2.5 py-1 transition-colors",
          current.startsWith("fr") ? "bg-emerald-500 text-white" : "text-slate-600 hover:bg-emerald-50"
        )}
        aria-pressed={current.startsWith("fr")}
      >
        FR
      </button>
      <button
        onClick={() => change("en")}
        className={cn(
          "px-2.5 py-1 transition-colors",
          current.startsWith("en") ? "bg-emerald-500 text-white" : "text-slate-600 hover:bg-emerald-50"
        )}
        aria-pressed={current.startsWith("en")}
      >
        EN
      </button>
    </div>
  );
}

export default function Layout({ children }: { children: React.ReactNode }) {
  const { t } = useTranslation();
  const [location] = useLocation();
  const { user, logout } = useAuth();
  const [mobileOpen, setMobileOpen] = useState(false);

  const NAV = [
    { href: "/dashboard", label: t("nav.dashboard"), icon: LayoutDashboard },
    { href: "/dashboard/clinics", label: t("nav.clinics"), icon: Building2 },
    { href: "/dashboard/analytics", label: t("nav.analytics"), icon: BarChart3 },
    { href: "/dashboard/subscription", label: t("nav.subscription"), icon: CreditCard },
    { href: "/help", label: t("nav.help"), icon: HelpCircle },
    ...(user?.role === "admin"
      ? [{ href: "/admin", label: "Admin", icon: Shield }]
      : []),
  ];

  const isActive = (href: string) =>
    href === "/dashboard"
      ? location === "/dashboard"
      : location === href || location.startsWith(href + "/");

  return (
    <div className="min-h-screen flex bg-gradient-to-br from-emerald-50/40 via-white to-cyan-50/40">
      {/* ─── Sidebar (desktop) ──────────────────────────────────────────── */}
      <aside className="hidden lg:flex lg:w-64 flex-shrink-0 flex-col border-r border-emerald-100/60 bg-white/70 backdrop-blur-xl">
        <Link href="/dashboard">
          <a className="flex items-center gap-3 px-6 h-16 border-b border-emerald-100/60">
            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center shadow-md">
              <Stethoscope className="w-5 h-5 text-white" />
            </div>
            <div className="font-bold text-lg gradient-text tracking-tight">QueueMed</div>
          </a>
        </Link>

        <nav className="flex-1 px-3 py-6 space-y-1">
          {NAV.map((item) => {
            const Icon = item.icon;
            const active = isActive(item.href);
            return (
              <Link key={item.href} href={item.href}>
                <a
                  className={cn(
                    "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all",
                    active
                      ? "bg-gradient-to-r from-emerald-500 to-cyan-500 text-white shadow-md"
                      : "text-slate-600 hover:bg-emerald-50 hover:text-emerald-700"
                  )}
                >
                  <Icon className="w-4 h-4" />
                  {item.label}
                </a>
              </Link>
            );
          })}
        </nav>

        {/* User card */}
        <div className="p-3 border-t border-emerald-100/60 space-y-3">
          <div className="flex items-center justify-between px-1">
            <span className="text-xs uppercase tracking-wider text-slate-500 font-semibold">
              {t("common.language")}
            </span>
            <LanguageSwitcher />
          </div>
          <div className="px-3 py-3 rounded-xl bg-gradient-to-br from-emerald-50 to-cyan-50 border border-emerald-100/80">
            <div className="text-xs uppercase tracking-wider text-emerald-700 font-semibold mb-1">
              {t("nav.connected")}
            </div>
            <div className="font-semibold text-slate-900 text-sm truncate">
              {user?.name ?? user?.email ?? "—"}
            </div>
            {user?.email && user?.name && (
              <div className="text-xs text-slate-500 truncate">{user.email}</div>
            )}
            <button
              onClick={() => logout()}
              className="mt-3 w-full flex items-center justify-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-600 bg-white hover:bg-red-50 hover:text-red-600 border border-slate-200 transition-colors"
            >
              <LogOut className="w-3.5 h-3.5" /> {t("nav.logout")}
            </button>
          </div>
        </div>
      </aside>

      {/* ─── Main column ───────────────────────────────────────────────── */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Top bar (mobile) */}
        <header className="lg:hidden sticky top-0 z-40 h-16 border-b border-emerald-100/60 bg-white/80 backdrop-blur-xl flex items-center justify-between px-4">
          <Link href="/dashboard">
            <a className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center shadow-md">
                <Stethoscope className="w-4 h-4 text-white" />
              </div>
              <span className="font-bold gradient-text">QueueMed</span>
            </a>
          </Link>
          <div className="flex items-center gap-3">
            <LanguageSwitcher />
            <button
              onClick={() => setMobileOpen(true)}
              className="p-2 rounded-lg text-slate-600 hover:bg-emerald-50"
              aria-label="Menu"
            >
              <Menu className="w-5 h-5" />
            </button>
          </div>
        </header>

        {/* Mobile drawer */}
        {mobileOpen && (
          <div className="lg:hidden fixed inset-0 z-50">
            <div
              className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
              onClick={() => setMobileOpen(false)}
            />
            <div className="absolute left-0 top-0 bottom-0 w-72 bg-white shadow-2xl flex flex-col">
              <div className="flex items-center justify-between h-16 px-4 border-b border-emerald-100/60">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-cyan-500 flex items-center justify-center">
                    <Stethoscope className="w-4 h-4 text-white" />
                  </div>
                  <span className="font-bold gradient-text">QueueMed</span>
                </div>
                <button onClick={() => setMobileOpen(false)} className="p-2 rounded-lg text-slate-600 hover:bg-slate-100">
                  <X className="w-5 h-5" />
                </button>
              </div>
              <nav className="flex-1 px-3 py-4 space-y-1">
                {NAV.map((item) => {
                  const Icon = item.icon;
                  const active = isActive(item.href);
                  return (
                    <Link key={item.href} href={item.href}>
                      <a
                        onClick={() => setMobileOpen(false)}
                        className={cn(
                          "flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-all",
                          active
                            ? "bg-gradient-to-r from-emerald-500 to-cyan-500 text-white shadow-md"
                            : "text-slate-600 hover:bg-emerald-50 hover:text-emerald-700"
                        )}
                      >
                        <Icon className="w-4 h-4" />
                        {item.label}
                      </a>
                    </Link>
                  );
                })}
              </nav>
              <div className="p-3 border-t border-emerald-100/60">
                <div className="px-3 py-2 mb-2 text-sm">
                  <div className="font-semibold text-slate-900 truncate">{user?.name ?? user?.email ?? "—"}</div>
                </div>
                <button
                  onClick={() => { setMobileOpen(false); logout(); }}
                  className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-slate-600 hover:bg-red-50 hover:text-red-600 border border-slate-200"
                >
                  <LogOut className="w-4 h-4" /> Déconnexion
                </button>
              </div>
            </div>
          </div>
        )}

        <main className="flex-1 overflow-y-auto">{children}</main>
      </div>
    </div>
  );
}