"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { type ScheduledItemWithDate, statusColor, statusLabel, scheduleItemToContentId } from "@/lib/mock-data";

const FORMAT_COLORS: Record<ScheduledItemWithDate["format"], string> = {
  article: "bg-indigo-500/15 text-indigo-300 border-indigo-500/25",
  "fiche-produit": "bg-purple-500/15 text-purple-300 border-purple-500/25",
  faq: "bg-sky-500/15 text-sky-300 border-sky-500/25",
  pillar: "bg-amber-500/15 text-amber-300 border-amber-500/25",
  guide: "bg-emerald-500/15 text-emerald-300 border-emerald-500/25",
};

const FORMAT_LABELS: Record<ScheduledItemWithDate["format"], string> = {
  article: "Article",
  "fiche-produit": "Fiche",
  faq: "FAQ",
  pillar: "Pillar",
  guide: "Guide",
};

type Props = {
  date: Date;
  isToday: boolean;
  isCurrentMonth: boolean;
  items: ScheduledItemWithDate[];
  animIndex: number;
};

export function MonthDayCell({ date, isToday, isCurrentMonth, items, animIndex }: Props) {
  const day = date.getDate();
  const MAX_VISIBLE = 2;
  const visible = items.slice(0, MAX_VISIBLE);
  const overflow = items.length - MAX_VISIBLE;

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.97 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ delay: animIndex * 0.012, duration: 0.22 }}
      whileTap={{ scale: 0.98 }}
      className={[
        "relative min-h-[110px] p-2 rounded-lg border cursor-pointer transition-colors",
        isToday
          ? "border-accent/50 bg-accent/5 ring-1 ring-accent/20"
          : "border-border hover:border-border-bright hover:bg-bg-card/60",
        !isCurrentMonth ? "opacity-40" : "",
      ].join(" ")}
    >
      {/* Numéro du jour */}
      <span
        className={[
          "text-[12px] font-semibold leading-none",
          isToday ? "text-accent-light" : "text-text-dim",
        ].join(" ")}
      >
        {day}
      </span>

      {/* Cartes compactes */}
      <div className="mt-1.5 flex flex-col gap-1">
        {visible.map((item) => (
          <Link
            key={item.id}
            href={`/contenus/${scheduleItemToContentId(item)}`}
            title={`${item.title} — ${statusLabel(item.status)}`}
            className={[
              "text-[9.5px] font-medium px-1.5 py-0.5 rounded border truncate block hover:opacity-80 transition-opacity",
              FORMAT_COLORS[item.format],
            ].join(" ")}
          >
            <span className="opacity-70 mr-1">{FORMAT_LABELS[item.format]}</span>
            {item.title}
          </Link>
        ))}
        {overflow > 0 && (
          <div className="text-[9px] text-text-dimmer pl-0.5">+{overflow} de plus</div>
        )}
      </div>
    </motion.div>
  );
}