"use client";

import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { ArrowUpDown } from "lucide-react";
import { type Content, statusLabel, statusColor } from "@/lib/mock-data";

function formatDate(iso: string): string {
  return new Date(iso).toLocaleDateString("fr-FR", { day: "numeric", month: "short" });
}

function SeoBarMini({ score }: { score: number }) {
  const color = score >= 90 ? "bg-emerald-500" : score >= 75 ? "bg-amber-500" : "bg-rose-500";
  return (
    <div className="flex items-center gap-2">
      <div className="w-20 h-1.5 rounded-full bg-bg overflow-hidden">
        <motion.div
          initial={{ width: 0 }}
          animate={{ width: `${score}%` }}
          transition={{ duration: 0.7, ease: "easeOut" }}
          className={`h-full ${color}`}
        />
      </div>
      <span className="text-[11px] font-mono text-text-dim">{score}</span>
    </div>
  );
}

export function ContentTable({ contents }: { contents: Content[] }) {
  const router = useRouter();
  return (
    <div className="overflow-x-auto rounded-xl border border-border">
      <table className="w-full text-[12.5px]">
        <thead>
          <tr className="border-b border-border bg-bg-card/80">
            {["Titre / Mot-clé", "Statut", "Auteur", "Mots", "Score SEO", "Rankings", "Date"].map((col) => (
              <th key={col} className="px-4 py-3 text-left text-[11px] text-text-dimmer font-medium uppercase tracking-wider whitespace-nowrap">
                <span className="flex items-center gap-1">
                  {col}
                  <ArrowUpDown className="w-2.5 h-2.5 opacity-40" />
                </span>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          <AnimatePresence initial={false}>
            {contents.map((c, i) => (
              <motion.tr
                key={c.id}
                layout
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ delay: i * 0.03 }}
                onClick={() => router.push(`/contenus/${c.id}`)}
                className="border-b border-border/50 hover:bg-bg-card/60 transition-colors cursor-pointer"
              >
                <td className="px-4 py-3 max-w-xs">
                  <div className="font-medium text-text line-clamp-2 leading-snug">{c.title}</div>
                  <div className="text-[11px] text-text-dim mt-0.5">{c.keyword}</div>
                </td>
                <td className="px-4 py-3 whitespace-nowrap">
                  <span className={`inline-flex px-2 py-0.5 rounded-full text-[10px] border font-medium ${statusColor(c.status)}`}>
                    {statusLabel(c.status)}
                  </span>
                </td>
                <td className="px-4 py-3 text-text-dim whitespace-nowrap">{c.author}</td>
                <td className="px-4 py-3 font-mono text-text whitespace-nowrap">
                  {c.wordCount.toLocaleString("fr-FR")}
                </td>
                <td className="px-4 py-3">
                  <SeoBarMini score={c.seoScore} />
                </td>
                <td className="px-4 py-3 font-mono text-text whitespace-nowrap">
                  {c.rankingKeywords ?? "—"}
                </td>
                <td className="px-4 py-3 text-text-dim whitespace-nowrap">{formatDate(c.createdAt)}</td>
              </motion.tr>
            ))}
          </AnimatePresence>
        </tbody>
      </table>
    </div>
  );
}