"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { MoreHorizontal, ArrowRight } from "lucide-react";
import { type Content, statusLabel, statusColor, formatTokens } from "@/lib/mock-data";

const INTENT_LABEL: Record<Content["intent"], string> = {
  informational: "Informatif",
  commercial: "Commercial",
  transactional: "Transactionnel",
};

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

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

export function ContentCard({ content, index }: { content: Content; index: number }) {
  return (
    <Link href={`/contenus/${content.id}`} className="block">
    <motion.div
      layout
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.97 }}
      transition={{ delay: index * 0.05, duration: 0.3 }}
      whileHover={{ scale: 1.01, boxShadow: "0 8px 32px rgba(6,182,212,0.10)" }}
      className="group flex flex-col bg-bg-card border border-border rounded-xl overflow-hidden hover:border-cyan-500/25 transition-all"
    >
      {/* Header */}
      <div className="px-4 py-3 flex items-start justify-between gap-2 border-b border-border">
        <span className={`inline-flex px-2 py-0.5 rounded-full text-[10.5px] border font-medium ${statusColor(content.status)}`}>
          {statusLabel(content.status)}
        </span>
        <button className="p-1 rounded-md hover:bg-bg-card-hover text-text-dimmer hover:text-text-dim transition-colors opacity-0 group-hover:opacity-100">
          <MoreHorizontal className="w-3.5 h-3.5" />
        </button>
      </div>

      {/* Body */}
      <div className="flex-1 px-4 py-3">
        <h3 className="text-[13px] font-semibold text-text leading-snug line-clamp-3 mb-2">
          {content.title}
        </h3>
        <p className="text-[11.5px] text-text-dim mb-1">
          Mot-clé : <span className="text-text-dim font-medium">{content.keyword}</span>
        </p>
        <div className="flex items-center gap-2 mb-4">
          <span className="text-[10.5px] text-text-dimmer">{content.tone}</span>
          <span className="w-1 h-1 rounded-full bg-text-dimmer" />
          <span className="text-[10.5px] text-text-dimmer">{INTENT_LABEL[content.intent]}</span>
        </div>

        {/* Métriques 2x2 */}
        <div className="grid grid-cols-2 gap-3">
          <Metric label="Mots" value={content.wordCount.toLocaleString("fr-FR")} />
          <div>
            <div className="text-[10px] text-text-dimmer uppercase tracking-wider mb-1.5">Score SEO</div>
            <SeoBar score={content.seoScore} />
          </div>
          <Metric label="Tokens" value={formatTokens(content.tokensUsed)} />
          <Metric
            label="Mots-clés rankés"
            value={content.rankingKeywords ? String(content.rankingKeywords) : "—"}
          />
        </div>
      </div>

      {/* Footer */}
      <div className="px-4 py-3 border-t border-border flex items-center justify-between">
        <span className="text-[10.5px] text-text-dimmer">Créé le {formatDate(content.createdAt)}</span>
        <span className="flex items-center gap-1 text-[11.5px] text-accent-light font-medium">
          Ouvrir
          <ArrowRight className="w-3 h-3" />
        </span>
      </div>
    </motion.div>
    </Link>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-[10px] text-text-dimmer uppercase tracking-wider mb-1">{label}</div>
      <div className="text-[12.5px] font-mono text-text">{value}</div>
    </div>
  );
}