"use client";

import { useRouter } from "next/navigation";
import { Popover } from "@/components/ui/popover";
import { useTheme, type Theme } from "@/components/theme-provider";
import { useToast } from "@/components/ui/toast";
import {
  IconCheck,
  IconChevronUp,
  IconLogOut,
  IconMonitor,
  IconMoon,
  IconSun,
} from "@/components/icons";

type User = {
  name: string;
  email: string;
};

const THEMES: { id: Theme; label: string; icon: React.ReactNode }[] = [
  { id: "light", label: "Clair", icon: <IconSun size={14} /> },
  { id: "dark", label: "Sombre", icon: <IconMoon size={14} /> },
  { id: "system", label: "Système", icon: <IconMonitor size={14} /> },
];

export function UserMenu({ user }: { user: User }) {
  const router = useRouter();
  const { toast } = useToast();
  const { theme, setTheme } = useTheme();

  const initials =
    (user.name || user.email)
      .split(/\s+/)
      .filter(Boolean)
      .slice(0, 2)
      .map((s) => s.charAt(0).toUpperCase())
      .join("") || "?";

  async function handleLogout() {
    try {
      await fetch("/api/auth/logout", { method: "POST" });
    } catch {
      /* on continue */
    }
    toast({ title: "Session terminée", tone: "success", duration: 2000 });
    router.replace("/login");
    router.refresh();
  }

  return (
    <Popover
      side="top"
      align="start"
      panelClassName="w-60 left-2 right-2 mb-2 p-1"
      triggerClassName="rounded-md hover:bg-sidebar-active transition-colors text-left"
      trigger={
        <div className="flex items-center gap-3 px-2 py-2">
          <div className="flex h-8 w-8 items-center justify-center rounded-full bg-sidebar-active text-xs font-semibold text-sidebar-foreground ring-1 ring-sidebar-accent/40">
            {initials}
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-xs font-medium text-sidebar-foreground">
              {user.name || user.email}
            </p>
            <p className="truncate text-[10px] text-sidebar-muted">
              {user.email}
            </p>
          </div>
          <IconChevronUp size={14} className="text-sidebar-muted shrink-0" />
        </div>
      }
    >
      <div className="px-2 pb-2 pt-1">
        <p className="px-2 py-1 text-[10px] font-medium uppercase tracking-wider text-subtle-foreground">
          Thème
        </p>
        <div className="space-y-0.5">
          {THEMES.map((t) => {
            const active = theme === t.id;
            return (
              <button
                key={t.id}
                type="button"
                onClick={() => setTheme(t.id)}
                className={[
                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors",
                  active
                    ? "bg-accent-subtle text-accent"
                    : "text-foreground hover:bg-surface-2",
                ].join(" ")}
              >
                <span
                  className={
                    active ? "text-accent" : "text-muted-foreground"
                  }
                >
                  {t.icon}
                </span>
                <span className="flex-1 text-left">{t.label}</span>
                {active && <IconCheck size={14} />}
              </button>
            );
          })}
        </div>
      </div>

      <div className="border-t border-border p-1">
        <button
          type="button"
          data-popover-close
          onClick={handleLogout}
          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-surface-2 transition-colors"
        >
          <IconLogOut size={14} className="text-muted-foreground" />
          Se déconnecter
        </button>
      </div>
    </Popover>
  );
}