"use client";

import { useState, useEffect, useCallback } from "react";
import { adminService } from "@/services/admin.service";
import { AdminStatistics } from "@/types";
import Link from "next/link";
import {
  Users,
  Ticket,
  TrendingUp,
  AlertCircle,
  Gift,
  BarChart3,
  RefreshCw,
  MapPin,
  User as UserIcon,
  Calendar,
  Download,
  Filter,
} from "lucide-react";
import {
  PieChart,
  Pie,
  Cell,
  BarChart,
  Bar,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

// Couleurs pour les graphiques
const COLORS = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
const GENDER_COLORS = {
  male: "#3b82f6",
  female: "#ec4899",
  other: "#8b5cf6",
  notSpecified: "#6b7280",
};

export default function AdminDashboardAdvanced() {
  const [stats, setStats] = useState<AdminStatistics | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [autoRefresh, setAutoRefresh] = useState(false);
  const [refreshInterval, setRefreshInterval] = useState(30); // secondes
  const [selectedPeriod, setSelectedPeriod] = useState("all"); // all, week, month, year

  useEffect(() => {
    loadStatistics();
  }, []);

  // Auto-refresh
  useEffect(() => {
    if (autoRefresh) {
      const interval = setInterval(() => {
        loadStatistics();
      }, refreshInterval * 1000);
      return () => clearInterval(interval);
    }
  }, [autoRefresh, refreshInterval]);

  const loadStatistics = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await adminService.getStatistics();
      setStats(data);
    } catch (err: any) {
      setError(err.message || "Erreur lors du chargement des statistiques");
      setStats(null);
    } finally {
      setLoading(false);
    }
  };

  // Export CSV
  const exportToCSV = useCallback(() => {
    if (!stats) return;

    const csv = [
      ["Type", "Métrique", "Valeur"],
      ["Utilisateurs", "Total", stats.users.total],
      ["Utilisateurs", "Clients", stats.users.clients],
      ["Utilisateurs", "Employés", stats.users.employees],
      ["Utilisateurs", "Admins", stats.users.admins],
      ["Tickets", "Total", stats.tickets.total],
      ["Tickets", "Distribués", stats.tickets.distributed],
      ["Tickets", "Utilisés", stats.tickets.used],
      ["Tickets", "En attente", stats.tickets.pending],
      ["Lots", "Total distribué", stats.prizes.distributed],
    ];

    // Ajouter les données démographiques
    if (stats.demographics?.gender) {
      csv.push(["Démographie", "Hommes", stats.demographics.gender.male]);
      csv.push(["Démographie", "Femmes", stats.demographics.gender.female]);
    }

    const csvContent = csv.map((row) => row.join(",")).join("\n");
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
    const link = document.createElement("a");
    const url = URL.createObjectURL(blob);
    link.setAttribute("href", url);
    link.setAttribute("download", `statistiques_${new Date().toISOString()}.csv`);
    link.style.visibility = "hidden";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }, [stats]);

  if (loading) {
    return (
      <div className="p-8">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-gray-200 rounded w-1/4"></div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[...Array(4)].map((_, i) => (
              <div key={i} className="h-32 bg-gray-200 rounded"></div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (error || !stats) {
    return (
      <div className="p-8">
        <div className="bg-red-50 border border-red-200 text-red-800 px-6 py-4 rounded-lg mb-6 flex items-center gap-3">
          <AlertCircle className="w-5 h-5" />
          <span>{error || "Erreur lors du chargement des statistiques"}</span>
        </div>
        <button
          onClick={loadStatistics}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          Réessayer
        </button>
      </div>
    );
  }

  // Préparer les données pour les graphiques
  const prizeChartData = stats.prizes.byCategory?.map((prize) => ({
    name: prize.prizeName,
    value: prize.count,
    percentage: prize.percentage,
  })) || [];

  // Ne montrer le graphique genre que s'il y a des données autres que "Non spécifié"
  const genderChartData = stats.demographics?.gender
    ? [
        { name: "Hommes", value: stats.demographics.gender.male, color: GENDER_COLORS.male },
        { name: "Femmes", value: stats.demographics.gender.female, color: GENDER_COLORS.female },
        { name: "Autre", value: stats.demographics.gender.other, color: GENDER_COLORS.other },
      ].filter((item) => item.value > 0)
    : [];

  // Ne montrer le graphique âge que s'il y a des données avec des vraies tranches d'âge
  const ageChartData = (stats.demographics?.ageRanges || []).filter(
    (item) => item.range && !item.range.toLowerCase().includes("non spécifié") && item.count > 0
  );

  // Ne montrer les villes que s'il y a des vraies villes (pas vides ou "non spécifié")
  const topCitiesData = (stats.demographics?.topCities || []).filter(
    (city) => city.city && city.city.trim() !== "" && !city.city.toLowerCase().includes("non spécifié") && city.count > 0
  );

  const ticketDistributedPercent = stats.tickets.total > 0
    ? ((stats.tickets.distributed / stats.tickets.total) * 100).toFixed(1)
    : 0;
  const ticketUsedPercent = stats.tickets.distributed > 0
    ? ((stats.tickets.used / stats.tickets.distributed) * 100).toFixed(1)
    : 0;

  return (
    <div className="p-8 bg-gray-50 min-h-screen">
      {/* Header avec contrôles */}
      <div className="mb-8">
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">Dashboard Administrateur Avancé</h1>
            <p className="text-gray-600 mt-2">
              Statistiques complètes et analyses en temps réel
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-3">
            {/* Auto-refresh toggle */}
            <label className="flex items-center gap-2 bg-white px-4 py-2 rounded-lg border border-gray-200">
              <input
                type="checkbox"
                checked={autoRefresh}
                onChange={(e) => setAutoRefresh(e.target.checked)}
                className="rounded"
              />
              <span className="text-sm">Auto-refresh ({refreshInterval}s)</span>
            </label>

            {/* Export button */}
            <button
              onClick={exportToCSV}
              className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition"
            >
              <Download className="w-4 h-4" />
              Export CSV
            </button>

            {/* Refresh button */}
            <button
              onClick={loadStatistics}
              className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
            >
              <RefreshCw className="w-4 h-4" />
              Rafraîchir
            </button>
          </div>
        </div>

        {/* Filter period */}
        <div className="mt-4 flex items-center gap-2">
          <Filter className="w-4 h-4 text-gray-600" />
          <span className="text-sm text-gray-600">Période:</span>
          {["all", "week", "month", "year"].map((period) => (
            <button
              key={period}
              onClick={() => setSelectedPeriod(period)}
              className={`px-3 py-1 rounded text-sm ${
                selectedPeriod === period
                  ? "bg-blue-600 text-white"
                  : "bg-white text-gray-700 border border-gray-200 hover:bg-gray-50"
              }`}
            >
              {period === "all" && "Tout"}
              {period === "week" && "Semaine"}
              {period === "month" && "Mois"}
              {period === "year" && "Année"}
            </button>
          ))}
        </div>
      </div>

      {/* Stats Cards - Principales */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <StatCard
          title="Utilisateurs"
          value={stats?.users?.total || 0}
          icon={<Users className="w-6 h-6" />}
          color="blue"
          link="/admin/utilisateurs"
          trend="+12%"
        />
        <StatCard
          title="Tickets Distribués"
          value={stats?.tickets?.distributed || 0}
          subtitle={`${ticketDistributedPercent}% du total`}
          icon={<Ticket className="w-6 h-6" />}
          color="green"
          link="/admin/tickets"
          trend="+8%"
        />
        <StatCard
          title="Tickets Utilisés"
          value={stats?.tickets?.used || 0}
          subtitle={`${ticketUsedPercent}% des distribués`}
          icon={<BarChart3 className="w-6 h-6" />}
          color="purple"
          link="/admin/tickets"
          trend="+15%"
        />
        <StatCard
          title="Lots Gagnés"
          value={stats?.prizes?.distributed || 0}
          icon={<Gift className="w-6 h-6" />}
          color="yellow"
          link="/admin/tickets"
          trend="+10%"
        />
      </div>

      {/* Graphiques en ligne */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {/* Graphique répartition des lots */}
        {prizeChartData.length > 0 && (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Gift className="w-5 h-5" />
              Répartition des Lots
            </h2>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={prizeChartData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={(entry: any) => `${entry.name}: ${entry.percentage}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {prizeChartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        )}

        {/* Graphique répartition par genre */}
        {genderChartData.length > 0 && (
          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
            <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <UserIcon className="w-5 h-5" />
              Répartition par Genre
            </h2>
            <ResponsiveContainer width="100%" height={300}>
              <PieChart>
                <Pie
                  data={genderChartData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, value }) => `${name}: ${value}`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {genderChartData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        )}
      </div>

      {/* Graphique tranches d'âge */}
      {ageChartData.length > 0 && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
          <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <Calendar className="w-5 h-5" />
            Répartition par Âge
          </h2>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={ageChartData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="range" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="count" fill="#3b82f6" name="Nombre de participants" />
            </BarChart>
          </ResponsiveContainer>
        </div>
      )}

      {/* Section détaillée existante */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        {/* Statistiques Tickets détaillées */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
              <Ticket className="w-5 h-5" />
              Statistiques des Tickets
            </h2>
            <Link
              href="/admin/tickets"
              className="text-blue-600 hover:text-blue-700 text-sm font-medium"
            >
              Voir tout →
            </Link>
          </div>
          <div className="space-y-3">
            <StatRow label="Total des tickets" value={stats?.tickets?.total || 0} />
            <StatRow
              label="Tickets distribués"
              value={stats?.tickets?.distributed || 0}
              color="green"
              percentage={ticketDistributedPercent}
            />
            <StatRow
              label="Tickets utilisés"
              value={stats?.tickets?.used || 0}
              color="purple"
              percentage={ticketUsedPercent}
            />
            <StatRow label="En attente" value={stats?.tickets?.pending || 0} color="yellow" />
            <StatRow label="Réclamés" value={stats?.tickets?.claimed || 0} color="green" />
            <StatRow label="Rejetés" value={stats?.tickets?.rejected || 0} color="red" />
          </div>
        </div>

        {/* Utilisateurs */}
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold text-gray-900 flex items-center gap-2">
              <Users className="w-5 h-5" />
              Utilisateurs
            </h2>
            <Link
              href="/admin/utilisateurs"
              className="text-blue-600 hover:text-blue-700 text-sm font-medium"
            >
              Voir tout →
            </Link>
          </div>
          <div className="space-y-3">
            <StatRow label="Total" value={stats?.users?.total || 0} />
            <StatRow label="Clients" value={stats?.users?.clients || 0} color="green" />
            <StatRow label="Employés" value={stats?.users?.employees || 0} color="purple" />
            <StatRow label="Admins" value={stats?.users?.admins || 0} color="blue" />
          </div>
        </div>
      </div>

      {/* Top Villes - affiché uniquement s'il y a des vraies données de villes */}
      {topCitiesData.length > 0 && (
        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
            <MapPin className="w-5 h-5" />
            Top 10 Villes des Participants
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
            {topCitiesData.slice(0, 10).map((city, idx) => (
              <CityCard
                key={idx}
                rank={idx + 1}
                city={city.city}
                count={city.count}
                percentage={city.percentage}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// Composants réutilisables
interface StatCardProps {
  title: string;
  value: number;
  subtitle?: string;
  icon: React.ReactNode;
  color: "blue" | "green" | "yellow" | "purple" | "red";
  link: string;
  trend?: string;
}

function StatCard({ title, value, subtitle, icon, color, link, trend }: StatCardProps) {
  const colors = {
    blue: "bg-blue-100 text-blue-600",
    green: "bg-green-100 text-green-600",
    yellow: "bg-yellow-100 text-yellow-600",
    purple: "bg-purple-100 text-purple-600",
    red: "bg-red-100 text-red-600",
  };

  return (
    <Link
      href={link}
      className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition"
    >
      <div className="flex items-center justify-between mb-4">
        <div className={`p-3 rounded-lg ${colors[color]}`}>{icon}</div>
        {trend && (
          <div className="flex items-center gap-1 text-green-600 text-sm font-medium">
            <TrendingUp className="w-4 h-4" />
            {trend}
          </div>
        )}
      </div>
      <h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
      <p className="text-3xl font-bold text-gray-900">{(value || 0).toLocaleString("fr-FR")}</p>
      {subtitle && <p className="text-xs text-gray-500 mt-1">{subtitle}</p>}
    </Link>
  );
}

interface StatRowProps {
  label: string;
  value: number;
  color?: "green" | "yellow" | "red" | "purple" | "blue";
  percentage?: string | number;
}

function StatRow({ label, value, color, percentage }: StatRowProps) {
  const colors = {
    green: "text-green-600",
    yellow: "text-yellow-600",
    red: "text-red-600",
    purple: "text-purple-600",
    blue: "text-blue-600",
  };

  return (
    <div className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
      <span className="text-gray-700">{label}</span>
      <div className="flex items-center gap-2">
        <span className={`font-semibold ${color ? colors[color] : "text-gray-900"}`}>
          {(value || 0).toLocaleString("fr-FR")}
        </span>
        {percentage !== undefined && <span className="text-xs text-gray-500">({percentage}%)</span>}
      </div>
    </div>
  );
}

interface CityCardProps {
  rank: number;
  city: string;
  count: number;
  percentage: number;
}

function CityCard({ rank, city, count, percentage }: CityCardProps) {
  const rankColors = {
    1: "bg-yellow-100 text-yellow-800 border-yellow-300",
    2: "bg-gray-100 text-gray-800 border-gray-300",
    3: "bg-orange-100 text-orange-800 border-orange-300",
  };

  const rankColor =
    rankColors[rank as keyof typeof rankColors] || "bg-blue-50 text-blue-800 border-blue-200";

  return (
    <div className={`rounded-lg border-2 p-4 ${rankColor} hover:shadow-md transition`}>
      <div className="flex items-center justify-between mb-2">
        <span className="text-lg font-bold">#{rank}</span>
        <MapPin className="w-4 h-4" />
      </div>
      <h4 className="font-semibold text-sm mb-1 truncate" title={city}>
        {city}
      </h4>
      <div className="flex items-baseline gap-2">
        <span className="text-xl font-bold">{count}</span>
        <span className="text-xs">({percentage.toFixed(1)}%)</span>
      </div>
    </div>
  );
}
