"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { useAuth, UserMenu } from "@/components/auth";
import { Users, Trash2, Loader2, CheckCircle, Calendar, Lock, Unlock, Printer } from "lucide-react";
import { createClient } from "@/lib/supabase/client";
import { cn } from "@/lib/utils";
import { weekLockDB } from "@/lib/db";
import type { Week } from "@/lib/types";

export default function AdminDashboard() {
  const router = useRouter();
  const { isAdmin, isLoading, allTeams, user, lockedWeeks, refreshLockedWeeks } = useAuth();

  // State for reset functionality
  const [isResetting, setIsResetting] = useState(false);
  const [resetSuccess, setResetSuccess] = useState(false);
  const [updatingWeek, setUpdatingWeek] = useState<Week | null>(null);
  const [selectedCanvasId, setSelectedCanvasId] = useState<string>("");

  // State for canvas statistics
  const [teamStats, setTeamStats] = useState<Record<string, number>>({});
  // eslint-disable-next-line @typescript-eslint/no-var-requires
  const { allCanvases } = require("@/lib/canvas-data"); // Dynamic import to avoid SSR issues if any, or just standard import

  const totalTemplates = allCanvases.length;

  useEffect(() => {
    async function fetchCanvasStats() {
      const supabase = createClient();
      const { data } = (await supabase
        .from("canvas_data")
        .select("team_id, metadata")) as {
          data: { team_id: string; metadata: any }[] | null;
        };

      if (data) {
        const stats: Record<string, number> = {};

        data.forEach((row) => {
          // eslint-disable-next-line @typescript-eslint/no-explicit-any
          const metadata = row.metadata as any;
          if (metadata?.status === "finished") {
            stats[row.team_id] = (stats[row.team_id] || 0) + 1;
          }
        });

        setTeamStats(stats);
      }
    }

    fetchCanvasStats();
  }, []);

  // Function to reset all canvases for all teams
  const resetAllCanvases = async () => {
    // Double confirmation for safety
    const firstConfirm = confirm(
      "⚠️ ATTENTION: Vous êtes sur le point de supprimer TOUS les canevas de TOUTES les équipes.\n\nCette action est IRRÉVERSIBLE.\n\nVoulez-vous continuer?"
    );
    if (!firstConfirm) return;

    const secondConfirm = confirm(
      "🚨 DERNIÈRE CONFIRMATION 🚨\n\nToutes les données des canevas seront perdues définitivement.\n\nÊtes-vous ABSOLUMENT certain?"
    );
    if (!secondConfirm) return;

    setIsResetting(true);
    setResetSuccess(false);

    try {
      const supabase = createClient();

      // Delete all canvas data from all teams
      const { error } = await supabase
        .from("canvas_data")
        .delete()
        .neq("team_id", "00000000-0000-0000-0000-000000000000"); // Delete all rows (trick to match all)

      if (error) {
        console.error("Error resetting canvases:", error);
        alert("Erreur lors de la réinitialisation: " + error.message);
      } else {
        setResetSuccess(true);
        setTimeout(() => setResetSuccess(false), 3000);
        console.log("All canvases have been reset successfully");
        setTeamStats({}); // Reset local stats
      }
    } catch (err) {
      console.error("Error resetting canvases:", err);
      alert("Erreur inattendue lors de la réinitialisation");
    } finally {
      setIsResetting(false);
    }
  };

  // Redirect non-admins to home
  useEffect(() => {
    if (!isLoading && !isAdmin) {
      router.push("/");
    }
  }, [isAdmin, isLoading, router]);

  if (isLoading) {
    return (
      <div className="min-h-screen bg-[#f3f4f6] flex items-center justify-center">
        <div className="text-center">
          <div className="animate-pulse">
            <div className="h-8 w-48 bg-gray-200 rounded mb-4 mx-auto"></div>
            <div className="h-4 w-32 bg-gray-200 rounded mx-auto"></div>
          </div>
        </div>
      </div>
    );
  }

  if (!isAdmin) {
    return null; // Will redirect
  }

  // Filter out the admin team from the list (if it exists)
  const teamsList = allTeams.filter(team =>
    !team.name.toLowerCase().includes('admin') &&
    !team.name.toLowerCase().includes('administrateur')
  );

  return (
    <div className="min-h-screen bg-[#f3f4f6]">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div className="max-w-[1066px] mx-auto px-6 lg:px-0 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <span className="text-sm font-medium text-[#0a0a0a]">
              Programme Pionniers
            </span>
            <span className="px-2 py-1 bg-purple-50 text-purple-700 text-xs font-medium rounded">
              Administration
            </span>
          </div>
          <UserMenu />
        </div>
      </header>

      <main className="max-w-[1066px] mx-auto px-6 lg:px-0 pt-12 pb-8">
        {/* Hero Section */}
        <div className="text-center mb-10">
          <h1 className="text-[48px] font-normal text-[#0a0a0a] mb-4 tracking-[1.5px] leading-[48px]">
            TABLEAU DE BORD ADMIN
          </h1>
          <p className="text-[18px] text-[#4a5565] mb-2 leading-[28px] tracking-[-0.44px]">
            Sélectionnez une équipe pour accéder à ses canevas
          </p>
          <p className="text-[14px] text-[#6a7282] leading-[20px] tracking-[-0.15px]">
            {teamsList.length} équipes disponibles
          </p>
        </div>

        {/* Teams Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {teamsList.map((team) => {
            const finishedCount = teamStats[team.id] || 0;
            const isComplete = finishedCount === totalTemplates && totalTemplates > 0;

            return (
              <Link
                key={team.id}
                href={`/admin/team/${team.id}`}
                className={cn(
                  "group border rounded-lg p-6 hover:shadow-md transition-all relative",
                  isComplete
                    ? "bg-green-100 border-green-500"
                    : "bg-white border-gray-200 hover:border-black"
                )}
              >
                <div className="flex items-start justify-between mb-4">
                  <div className="w-12 h-12 bg-blue-50 rounded-lg flex items-center justify-center">
                    <Users className="w-6 h-6 text-blue-600" />
                  </div>
                  <span className="text-[24px] font-normal text-[#0a0a0a]">
                    {finishedCount}/{totalTemplates}
                  </span>
                </div>

                <h2 className="text-[20px] font-medium text-[#0a0a0a] mb-2">
                  {team.name}
                </h2>

                <p className="text-[14px] text-[#6a7282]">
                  Accéder aux canevas de cette équipe
                </p>
              </Link>
            )
          })}
        </div>

        {teamsList.length === 0 && (
          <div className="text-center py-12">
            <Users className="w-12 h-12 text-gray-300 mx-auto mb-4" />
            <h2 className="text-[20px] font-medium text-[#0a0a0a] mb-2">
              Aucune équipe trouvée
            </h2>
            <p className="text-[14px] text-[#6a7282]">
              Créez des équipes dans Supabase pour les voir apparaître ici.
            </p>
          </div>
        )}

        {/* Week Management Section */}
        <div className="mt-12 p-6 bg-blue-50 border border-blue-200 rounded-lg">
          <h3 className="text-[16px] font-medium text-blue-800 mb-2 flex items-center gap-2">
            <Calendar className="w-5 h-5" />
            Gestion des Semaines
          </h3>
          <p className="text-[14px] text-blue-600 mb-4">
            Verrouillez ou déverrouillez les semaines pour contrôler l&apos;accès des équipes.
          </p>
          <div className="flex flex-wrap gap-4">
            {([1, 2, 3] as Week[]).map((week) => {
              const isLocked = lockedWeeks.has(week);
              const isUpdating = updatingWeek === week;
              const weekColors = {
                1: { bg: "#f97316", label: "SEMAINE 1" },
                2: { bg: "#155dfc", label: "SEMAINE 2" },
                3: { bg: "#16A34A", label: "SEMAINE 3" },
              };

              return (
                <button
                  key={week}
                  onClick={async () => {
                    setUpdatingWeek(week);
                    await weekLockDB.setLocked(week, !isLocked);
                    await refreshLockedWeeks();
                    setUpdatingWeek(null);
                  }}
                  disabled={isUpdating}
                  className={cn(
                    "flex items-center gap-2 px-4 py-3 rounded-lg font-medium text-[14px] transition-all border-2",
                    isLocked
                      ? "bg-gray-100 text-gray-600 border-gray-300 hover:bg-gray-200"
                      : "text-white border-transparent hover:opacity-90",
                    isUpdating && "opacity-50 cursor-not-allowed"
                  )}
                  style={{
                    backgroundColor: isLocked ? undefined : weekColors[week].bg,
                  }}
                >
                  {isUpdating ? (
                    <Loader2 className="w-4 h-4 animate-spin" />
                  ) : isLocked ? (
                    <Lock className="w-4 h-4" />
                  ) : (
                    <Unlock className="w-4 h-4" />
                  )}
                  {weekColors[week].label}
                  {isLocked && <span className="text-xs">(Verrouillé)</span>}
                </button>
              );
            })}
          </div>
        </div>

        {/* Global Export Section */}
        <div className="mt-12 p-6 bg-gray-50 border border-gray-200 rounded-lg">
          <h3 className="text-[16px] font-medium text-gray-900 mb-2 flex items-center gap-2">
            <Printer className="w-5 h-5" />
            Export Global
          </h3>
          <p className="text-[14px] text-gray-600 mb-4">
            Imprimez (PDF) un canevas spécifique pour toutes les équipes en une seule fois.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 items-end sm:items-center">
            <div className="flex-1 w-full">
              <label htmlFor="canvas-select" className="block text-sm font-medium text-gray-700 mb-1">
                Choisir un canevas
              </label>
              <select
                id="canvas-select"
                value={selectedCanvasId}
                onChange={(e) => setSelectedCanvasId(e.target.value)}
                className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 py-2 px-3 border"
              >
                <option value="">Sélectionnez un canevas...</option>
                {[1, 2, 3].map((week) => (
                  <optgroup key={week} label={`SEMAINE ${week}`}>
                    {allCanvases
                      .filter((c: any) => c.week === week)
                      .map((canvas: any) => (
                        <option key={canvas.id} value={canvas.id}>
                          Jour {canvas.day} - {canvas.title}
                        </option>
                      ))}
                  </optgroup>
                ))}
              </select>
            </div>

            <button
              onClick={() => {
                if (selectedCanvasId) {
                  window.open(`/admin/export-canvas/${selectedCanvasId}`, '_blank');
                }
              }}
              disabled={!selectedCanvasId}
              className="w-full sm:w-auto px-6 py-2 bg-black text-white rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium h-[42px]"
            >
              Lancer l'impression globale
            </button>
          </div>
        </div>

        {/* Debug Tools Section */}
        <div className="mt-12 p-6 bg-red-50 border border-red-200 rounded-lg">
          <h3 className="text-[16px] font-medium text-red-800 mb-2 flex items-center gap-2">
            <Trash2 className="w-5 h-5" />
            Outils de Debug
          </h3>
          <p className="text-[14px] text-red-600 mb-4">
            ⚠️ Ces outils sont destinés uniquement au debug et peuvent supprimer des données de manière irréversible.
          </p>
          <button
            onClick={resetAllCanvases}
            disabled={isResetting}
            className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white text-[14px] font-medium rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {isResetting ? (
              <>
                <Loader2 className="w-4 h-4 animate-spin" />
                Réinitialisation en cours...
              </>
            ) : resetSuccess ? (
              <>
                <CheckCircle className="w-4 h-4" />
                Tous les canevas ont été réinitialisés!
              </>
            ) : (
              <>
                <Trash2 className="w-4 h-4" />
                Réinitialiser tous les canevas (toutes les équipes)
              </>
            )}
          </button>
        </div>

        {/* Footer Info */}
        <footer className="mt-12 text-center">
          <p className="text-[12px] text-[#6a7282] leading-[16px]">
            © Mathieu Aguesse 2026 — Tous droits réservés
          </p>
        </footer>
      </main>
    </div>
  );
}