"use client";

import { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Sparkles } from "lucide-react";
import Link from "next/link";
import { Shell } from "@/components/Shell";
import { ContenusFilters, type FiltersState, type Status } from "@/components/contenus/ContenusFilters";
import { ContentCard } from "@/components/contenus/ContentCard";
import { ContentTable } from "@/components/contenus/ContentTable";
import { CONTENTS, type Content } from "@/lib/mock-data";

function filterAndSort(contents: Content[], filters: FiltersState): Content[] {
  let result = [...contents];

  if (filters.search.trim()) {
    const q = filters.search.toLowerCase();
    result = result.filter(
      (c) =>
        c.title.toLowerCase().includes(q) ||
        c.keyword.toLowerCase().includes(q) ||
        c.author.toLowerCase().includes(q),
    );
  }

  if (filters.status !== "all") {
    result = result.filter((c) => c.status === filters.status);
  }

  switch (filters.sort) {
    case "recent":
      result.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
      break;
    case "old":
      result.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());
      break;
    case "score":
      result.sort((a, b) => b.seoScore - a.seoScore);
      break;
    case "words":
      result.sort((a, b) => b.wordCount - a.wordCount);
      break;
  }

  return result;
}

export default function ContenusPage() {
  const [filters, setFilters] = useState<FiltersState>({
    search: "",
    status: "all",
    sort: "recent",
    view: "grid",
  });

  const filtered = useMemo(() => filterAndSort(CONTENTS, filters), [filters]);

  const counts = useMemo(() => {
    const c: Record<Status, number> = {
      all: CONTENTS.length,
      validated: 0,
      in_review: 0,
      draft: 0,
      archived: 0,
    };
    for (const item of CONTENTS) {
      c[item.status]++;
    }
    return c;
  }, []);

  return (
    <Shell>
      <div className="max-w-[1400px] mx-auto">
        {/* Header */}
        <div className="flex items-start justify-between gap-4 mb-2">
          <div>
            <h1 className="text-[22px] font-semibold tracking-tight text-text">Contenus</h1>
            <p className="text-[13px] text-text-dim mt-1">
              <span className="text-text font-medium">{CONTENTS.length} contenus</span>
              {" "}dans votre bibliothèque
            </p>
          </div>
          <Link
            href="/atelier"
            className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-[13px] font-semibold text-white bg-gradient-to-r from-accent to-cyan-500 hover:opacity-90 transition-opacity shrink-0"
          >
            <Sparkles className="w-4 h-4" />
            Générer un contenu
          </Link>
        </div>

        {/* Filtres sticky */}
        <ContenusFilters filters={filters} onChange={setFilters} counts={counts} />

        {/* Résultats */}
        {filtered.length === 0 ? (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="py-24 text-center text-text-dim text-[13px]"
          >
            Aucun contenu ne correspond à vos filtres.
          </motion.div>
        ) : filters.view === "grid" ? (
          <motion.div layout className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-4">
            <AnimatePresence mode="popLayout">
              {filtered.map((c, i) => (
                <ContentCard key={c.id} content={c} index={i} />
              ))}
            </AnimatePresence>
          </motion.div>
        ) : (
          <ContentTable contents={filtered} />
        )}
      </div>
    </Shell>
  );
}