"use client";

import axios from "axios";
import { CalendarRange, Check, ChevronDown, Loader2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";

import { useAppToast } from "@/components/hooks/use-app-toast";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { listPeriodes, selectPeriode } from "@/lib/periodes-api";
import { usePeriodeStore } from "@/stores/periode-store";
import type { Periode } from "@/types/periode";

function formatDate(d: string | null | undefined): string {
  if (!d) return "?";
  const [y, m, day] = d.slice(0, 10).split("-");
  return `${day}/${m}/${y}`;
}

function getPeriodeDisplay(p: Periode): { name: string; dates: string } {
  const name = p.libelle?.trim() || "Période";
  const dates = `${formatDate(p.date_debut)} → ${formatDate(p.date_fin)}`;
  return { name, dates };
}

/** Utilisé pour les toasts et notifications */
function formatPeriodeLabel(p: Periode): string {
  const { name, dates } = getPeriodeDisplay(p);
  return `${name} (${dates})`;
}

function apiErrorMessage(err: unknown): string {
  if (axios.isAxiosError(err)) {
    const d = err.response?.data as { message?: string } | undefined;
    if (d?.message) return d.message;
    if (err.message) return err.message;
  }
  if (err instanceof Error) return err.message;
  return "Erreur inattendue.";
}

export function AdminPeriodeSwitcher() {
  const notify = useAppToast();
  const [mounted, setMounted] = useState(false);
  const [list, setList] = useState<Periode[]>([]);
  const [loading, setLoading] = useState(false);
  const [switching, setSwitching] = useState(false);

  const selectedPeriode = usePeriodeStore((s) => s.selectedPeriode);
  const setSelectedPeriode = usePeriodeStore((s) => s.setSelectedPeriode);

  const loadList = useCallback(async () => {
    setLoading(true);
    try {
      const data = await listPeriodes();
      setList(data);

      if (data.length === 0) {
        setSelectedPeriode(null);
      } else {
        const autoSelected = data.find((p) => p.is_selected);
        setSelectedPeriode(autoSelected ?? data[0]);
      }
    } catch {
      setList([]);
    } finally {
      setLoading(false);
    }
  }, [setSelectedPeriode]);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (!mounted) return;
    loadList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mounted]);

  const handleSelect = useCallback(
    (periode: Periode) => {
      if (String(periode.id) === String(selectedPeriode?.id)) return;
      void (async () => {
        setSwitching(true);
        try {
          const updated = await selectPeriode(periode.id);
          setSelectedPeriode(updated);
          notify.success({
            title: "Période sélectionnée",
            description: formatPeriodeLabel(updated),
          });
          if (typeof window !== "undefined") {
            window.location.reload();
          }
        } catch (err) {
          notify.error({
            title: "Échec du changement de période",
            description: apiErrorMessage(err),
          });
        } finally {
          setSwitching(false);
        }
      })();
    },
    [selectedPeriode, setSelectedPeriode, notify]
  );

  if (!mounted) {
    return (
      <Button
        variant="ghost"
        disabled
        className="h-9 max-w-[min(100vw-8rem,260px)] justify-between gap-2 rounded-full border border-border/60 bg-muted/60 px-3 font-normal"
      >
        <CalendarRange className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" aria-hidden />
        <span className="text-muted-foreground text-sm">…</span>
        <ChevronDown className="h-3.5 w-3.5 shrink-0 opacity-40" aria-hidden />
      </Button>
    );
  }

  if (loading && list.length === 0) {
    return (
      <Button
        variant="ghost"
        disabled
        className="h-9 max-w-[min(100vw-8rem,260px)] justify-between gap-2 rounded-full border border-border/60 bg-muted/60 px-3 font-normal"
      >
        <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground/60" aria-hidden />
        <span className="text-sm text-muted-foreground">Chargement…</span>
      </Button>
    );
  }

  if (list.length === 0) {
    return (
      <Button variant="ghost" disabled className="h-9 gap-2 rounded-full border border-border/60 bg-muted/60 px-3 font-normal">
        <CalendarRange className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
        <span className="text-sm text-muted-foreground">Aucune période</span>
      </Button>
    );
  }

  const display = selectedPeriode
    ? getPeriodeDisplay(selectedPeriode)
    : getPeriodeDisplay(list[0]);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="h-9 max-w-[min(100vw-8rem,280px)] justify-between gap-2 rounded-full border border-border/60 bg-muted/50 px-3 py-1.5 font-normal hover:bg-muted hover:border-border transition-colors"
          aria-label="Changer de période"
          disabled={loading || switching}
        >
          {switching ? (
            <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" aria-hidden />
          ) : (
            <CalendarRange className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
          )}
          <span className="min-w-0 flex-1 text-left">
            <span className="block truncate text-sm font-semibold text-foreground leading-tight">
              {display.name}
            </span>
            <span className="block truncate text-[10px] text-muted-foreground leading-tight">
              {display.dates}
            </span>
          </span>
          <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" aria-hidden />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        className="max-h-[min(70vh,24rem)] w-[min(calc(100vw-2rem),300px)] overflow-y-auto"
      >
        <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
          Changer de période
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        {list.map((p) => {
          const d = getPeriodeDisplay(p);
          const isActive = String(p.id) === String(selectedPeriode?.id);
          return (
            <DropdownMenuItem
              key={String(p.id)}
              className="cursor-pointer gap-2 py-2 group"
              disabled={switching}
              onSelect={() => handleSelect(p)}
            >
              <span className="flex h-4 w-4 shrink-0 items-center justify-center">
                {isActive ? (
                  <Check className="h-4 w-4 text-primary group-hover:text-white" aria-hidden />
                ) : null}
              </span>
              <span className="min-w-0 flex-1">
                <span className="block truncate text-sm font-medium leading-tight group-hover:text-white">
                  {d.name.toUpperCase()} - ({d.dates})
                </span>
             
              </span>
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}