'use client';

import { SCHEDULE, statusColor, statusLabel } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { ArrowRight, Clock } from 'lucide-react';
import Link from 'next/link';

const DAYS_FR = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];

const FORMAT_LABELS: Record<string, string> = {
  article: 'Article',
  'fiche-produit': 'Fiche produit',
  faq: 'FAQ',
  pillar: 'Page pilier',
  guide: 'Guide',
};

const FORMAT_COLORS: Record<string, string> = {
  article: 'text-sky-400 bg-sky-500/10 border-sky-500/25',
  'fiche-produit': 'text-purple-400 bg-purple-500/10 border-purple-500/25',
  faq: 'text-amber-400 bg-amber-500/10 border-amber-500/25',
  pillar: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/25',
  guide: 'text-cyan-400 bg-cyan-500/10 border-cyan-500/25',
};

export function NextPublications() {
  const items = SCHEDULE.slice(0, 5);

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.3 }}
      className="bg-bg-card border border-border rounded-2xl flex flex-col"
    >
      <div className="px-5 py-4 border-b border-border">
        <h2 className="text-[14px] font-semibold tracking-tight">Prochaines publications</h2>
      </div>

      <div className="flex-1 divide-y divide-border">
        {items.map((item) => (
          <div key={item.id} className="px-5 py-3.5 flex items-start gap-3">
            {/* Jour / heure */}
            <div className="flex-shrink-0 flex items-center gap-1 text-[11px] text-text-dim w-20">
              <Clock className="w-3 h-3" />
              <span>
                {DAYS_FR[item.day]} {item.hour}h
              </span>
            </div>

            <div className="flex-1 min-w-0">
              <p className="text-[12.5px] font-medium truncate">{item.title}</p>
              <p className="text-[11px] text-text-dim truncate mt-0.5">{item.keyword}</p>
            </div>

            <div className="flex flex-col items-end gap-1.5 flex-shrink-0">
              <span
                className={`px-2 py-0.5 rounded-full text-[10px] font-medium border ${FORMAT_COLORS[item.format]}`}
              >
                {FORMAT_LABELS[item.format]}
              </span>
              <span
                className={`px-2 py-0.5 rounded-full text-[10px] font-medium border ${statusColor(item.status)}`}
              >
                {statusLabel(item.status)}
              </span>
            </div>
          </div>
        ))}
      </div>

      <div className="px-5 py-3 border-t border-border">
        <Link
          href="/planning"
          className="flex items-center gap-1.5 text-[12px] text-text-dim hover:text-accent-light transition-colors"
        >
          Voir le planning
          <ArrowRight className="w-3.5 h-3.5" />
        </Link>
      </div>
    </motion.div>
  );
}