import { PageLoader } from "@/components/ui/loading-spinner";
import useAuth from "@/hooks/useAuth";
import useDashboardStats from "@/hooks/useDashboardStats";
import { useNavigate, Link } from "react-router-dom";
import { useEffect, useMemo } from "react";
import {
  CalendarIcon,
  MessageSquareIcon,
  BriefcaseIcon,
  UsersIcon,
  Wrench,
  FileText,
  Search,
  TrendingUp,
  ImageIcon,
  CalendarDays,
  ArrowRight,
  Sparkles,
  CheckCircle2,
} from "lucide-react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { ActivityAreaChart, ActivityBarChart, RadialPercent } from "@/components/dashboard/DashboardCharts";
import { PremiumStatCard } from "@/components/dashboard/PremiumStatCard";
import { format } from "date-fns";
import { fr } from "date-fns/locale";

const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 18 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.45, delay, ease: "easeOut" },
});

const Dashboard = () => {
  const { currentUser, userData, isLoading, isClient, isArtisan } = useAuth();
  const navigate = useNavigate();
  const stats = useDashboardStats();

  useEffect(() => {
    if (!isLoading && !currentUser) {
      navigate("/auth?mode=login");
    }
  }, [currentUser, isLoading, navigate]);

  const areaData = useMemo(
    () =>
      ["Jan", "Fév", "Mar", "Avr", "Mai", "Juin"].map((label, i) => ({
        label,
        value: Math.max(
          1,
          (stats.activeProjects || 0) +
            i * 2 +
            (isArtisan ? stats.totalClients : stats.artisansContacted)
        ),
      })),
    [stats.activeProjects, stats.totalClients, stats.artisansContacted, isArtisan]
  );

  const barData = useMemo(
    () =>
      ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"].map((label, i) => ({
        label,
        value: Math.max(0, 2 + ((i + (stats.unreadMessages || 0)) % 7)),
      })),
    [stats.unreadMessages]
  );

  if (isLoading || stats.isLoading) {
    return <PageLoader />;
  }

  if (!userData) {
    return null;
  }

  const statCards = isClient
    ? [
        { icon: BriefcaseIcon, value: stats.activeProjects, label: "Projets actifs", trend: "+12%" },
        { icon: UsersIcon, value: stats.artisansContacted, label: "Artisans contactés" },
        { icon: MessageSquareIcon, value: stats.messagesNonLus, label: "Messages non lus" },
      ]
    : [
        { icon: BriefcaseIcon, value: stats.activeProjects, label: "Chantiers actifs" },
        { icon: UsersIcon, value: stats.totalClients, label: "Clients actifs", trend: "+8%" },
        { icon: TrendingUp, value: `${stats.acceptanceRate}%`, label: "Taux d'acceptation" },
        { icon: CheckCircle2, value: stats.completedProjects, label: "Projets terminés" },
      ];

  const quickLinks = isClient
    ? [
        { icon: Search, title: "Rechercher", desc: "Trouver un artisan", link: "/search" },
        { icon: BriefcaseIcon, title: "Mes projets", desc: "Gérer vos travaux", link: "/projects" },
        { icon: MessageSquareIcon, title: "Messages", desc: "Vos conversations", link: "/messages" },
        { icon: CalendarIcon, title: "Rendez-vous", desc: "Planifier un RDV", link: "/appointments" },
        { icon: UsersIcon, title: "Mes artisans", desc: "Vos favoris", link: "/my-artisans" },
        { icon: FileText, title: "Demandes", desc: "Suivi services", link: "/service-orders" },
      ]
    : [
        { icon: BriefcaseIcon, title: "Mes chantiers", desc: "Projets en cours", link: "/projects" },
        { icon: Wrench, title: "Services", desc: "Votre catalogue", link: "/services" },
        { icon: ImageIcon, title: "Portfolio", desc: "Vos réalisations", link: "/portfolio" },
        { icon: CalendarDays, title: "Planning", desc: "Disponibilités", link: "/planning" },
        { icon: MessageSquareIcon, title: "Messages", desc: "Clients & propositions", link: "/messages" },
        { icon: FileText, title: "Commandes", desc: "Demandes reçues", link: "/service-orders" },
      ];

  const recentActivity = stats.recentActivity ?? [];

  return (
    <div className="min-h-full bg-slate-50 dark:bg-background">
      <div className="mx-auto max-w-7xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
        <motion.div {...fadeUp(0)}>
          <div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 p-6 text-white shadow-xl shadow-blue-500/20 sm:p-8">
            <div className="pointer-events-none absolute -right-16 -top-16 h-56 w-56 rounded-full bg-white/10 blur-2xl" />
            <div className="pointer-events-none absolute -bottom-20 left-1/3 h-56 w-56 rounded-full bg-sky-400/20 blur-3xl" />
            <div
              className="pointer-events-none absolute inset-0 opacity-[0.06]"
              style={{
                backgroundImage:
                  "linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px)",
                backgroundSize: "28px 28px",
              }}
            />
            <div className="relative z-10 flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
              <div>
                <div className="mb-2 inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-wider text-sky-100 backdrop-blur-sm">
                  <Sparkles className="h-3.5 w-3.5" />
                  {isClient ? "Espace client" : "Espace artisan"}
                </div>
                <h1 className="text-2xl font-extrabold tracking-tight sm:text-3xl">
                  Bonjour, {userData.displayName?.split(" ")[0]} 👋
                </h1>
                <p className="mt-1.5 max-w-md text-sm text-blue-100/90">
                  {isClient
                    ? "Gérez vos projets et trouvez les meilleurs artisans près de chez vous."
                    : "Gérez vos chantiers et développez votre activité artisanale."}
                </p>
              </div>
              <Link
                to="/profile"
                className="group inline-flex items-center gap-2 self-start rounded-2xl bg-white px-5 py-3 text-sm font-bold text-blue-700 shadow-lg shadow-blue-900/20 transition-all hover:scale-[1.03] sm:self-auto"
              >
                Compléter mon profil
                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
              </Link>
            </div>
          </div>
        </motion.div>

        <div className={cn("grid gap-4", isArtisan ? "grid-cols-2 lg:grid-cols-4" : "grid-cols-1 sm:grid-cols-3")}>
          {statCards.map((s, i) => (
            <PremiumStatCard
              key={s.label}
              icon={s.icon}
              value={s.value}
              label={s.label}
              trend={s.trend}
              index={i}
            />
          ))}
        </div>

        <div className={cn("grid gap-4", isArtisan ? "lg:grid-cols-3" : "lg:grid-cols-2")}>
          <motion.div
            {...fadeUp(0.15)}
            className={cn(
              "rounded-3xl border border-blue-100/80 bg-white p-5 shadow-md shadow-blue-500/5 dark:border-blue-900/30 dark:bg-slate-900",
              isArtisan ? "lg:col-span-2" : ""
            )}
          >
            <h2 className="mb-1 text-sm font-bold text-slate-900 dark:text-white">
              {isArtisan ? "Activité de votre entreprise" : "Évolution de vos projets"}
            </h2>
            <p className="mb-4 text-xs text-slate-500">6 derniers mois</p>
            <div className="h-56">
              <ActivityAreaChart data={areaData} />
            </div>
          </motion.div>

          {isArtisan ? (
            <motion.div
              {...fadeUp(0.2)}
              className="rounded-3xl border border-blue-100/80 bg-white p-5 shadow-md shadow-blue-500/5 dark:border-blue-900/30 dark:bg-slate-900"
            >
              <h2 className="mb-1 text-sm font-bold text-slate-900 dark:text-white">Taux d&apos;acceptation</h2>
              <p className="mb-2 text-xs text-slate-500">Devis acceptés</p>
              <div className="relative h-48">
                <RadialPercent value={stats.acceptanceRate} />
                <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
                  <span className="text-3xl font-extrabold text-blue-600 dark:text-blue-400">
                    {stats.acceptanceRate}%
                  </span>
                </div>
              </div>
            </motion.div>
          ) : (
            <motion.div
              {...fadeUp(0.2)}
              className="rounded-3xl border border-blue-100/80 bg-white p-5 shadow-md shadow-blue-500/5 dark:border-blue-900/30 dark:bg-slate-900"
            >
              <h2 className="mb-1 text-sm font-bold text-slate-900 dark:text-white">Activité hebdomadaire</h2>
              <p className="mb-4 text-xs text-slate-500">Cette semaine</p>
              <div className="h-56">
                <ActivityBarChart data={barData} />
              </div>
            </motion.div>
          )}
        </div>

        {isArtisan && (
          <motion.div
            {...fadeUp(0.25)}
            className="rounded-3xl border border-blue-100/80 bg-white p-5 shadow-md shadow-blue-500/5 dark:border-blue-900/30 dark:bg-slate-900"
          >
            <h2 className="mb-1 text-sm font-bold text-slate-900 dark:text-white">Activité hebdomadaire</h2>
            <p className="mb-4 text-xs text-slate-500">Cette semaine</p>
            <div className="h-48">
              <ActivityBarChart data={barData} />
            </div>
          </motion.div>
        )}

        <motion.div {...fadeUp(0.3)}>
          <h2 className="mb-3 text-sm font-bold text-slate-900 dark:text-white">Accès rapide</h2>
          <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
            {quickLinks.map((item) => (
              <Link
                key={item.link}
                to={item.link}
                className="group flex flex-col gap-2 rounded-2xl border border-blue-100/80 bg-white p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-blue-200 hover:shadow-md dark:border-blue-900/30 dark:bg-slate-900"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-50 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white dark:bg-blue-950/50 dark:text-blue-400">
                  <item.icon className="h-5 w-5" />
                </div>
                <div>
                  <p className="text-sm font-semibold text-slate-900 dark:text-white">{item.title}</p>
                  <p className="text-[11px] text-slate-500">{item.desc}</p>
                </div>
              </Link>
            ))}
          </div>
        </motion.div>

        <motion.div
          {...fadeUp(0.35)}
          className="rounded-3xl border border-blue-100/80 bg-white p-5 shadow-md shadow-blue-500/5 dark:border-blue-900/30 dark:bg-slate-900"
        >
          <h2 className="mb-4 text-sm font-bold text-slate-900 dark:text-white">Activité récente</h2>
          {recentActivity.length === 0 ? (
            <p className="text-sm text-slate-500">Aucune activité récente pour le moment.</p>
          ) : (
            <ul className="space-y-3">
              {recentActivity.map((activity) => (
                <li
                  key={activity.id}
                  className="flex items-center justify-between gap-3 rounded-xl border border-slate-100 px-3 py-2.5 dark:border-slate-800"
                >
                  <div className="min-w-0">
                    <p className="truncate text-sm font-medium text-slate-900 dark:text-white">{activity.title}</p>
                    <p className="text-[11px] capitalize text-slate-500">{activity.type}</p>
                  </div>
                  <span className="shrink-0 text-[11px] text-slate-400">
                    {format(activity.date, "d MMM", { locale: fr })}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </motion.div>
      </div>
    </div>
  );
};

export default Dashboard;