"use client";

import { cn } from "@/lib/utils";
import { CanvasCard } from "./CanvasCard";
import type { CanvasTemplate, Day, Week, CanvasStatus } from "@/lib/types";

interface DaySectionProps {
  week: Week;
  day: Day;
  canvases: CanvasTemplate[];
  canvasStatuses: Record<string, CanvasStatus>;
  className?: string;
}

export function DaySection({ week, day, canvases, canvasStatuses, className }: DaySectionProps) {
  const borderColor = week === 1 ? "#f97316" : week === 2 ? "#155dfc" : "#16A34A";

  const totalCanvases = canvases.length;
  const finishedCanvases = canvases.filter(
    (c) => canvasStatuses[c.id] === "finished"
  ).length;
  const isComplete = finishedCanvases === totalCanvases && totalCanvases > 0;

  return (
    <section className={cn("mb-4", className)}>
      {/* Section Header */}
      <div
        className="pb-2 mb-4 border-b-2 flex justify-between items-end"
        style={{ borderColor }}
      >
        <h2 className="text-[24px] font-bold text-[#0a0a0a] uppercase tracking-[0.67px] leading-[32px]">
          Semaine {week} - Jour {day}
        </h2>
        <span
          className={cn(
            "text-[24px] font-normal uppercase tracking-[0.67px] leading-[32px]",
            isComplete ? "text-green-500" : "text-[#0a0a0a]"
          )}
        >
          {finishedCanvases}/{totalCanvases}
        </span>
      </div>

      {/* Canvas Grid or Empty State */}
      {canvases.length > 0 ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {canvases.map((canvas) => (
            <CanvasCard
              key={canvas.id}
              canvas={canvas}
              status={canvasStatuses[canvas.id] || 'not_started'}
            />
          ))}
        </div>
      ) : (
        <div className="py-8 text-center text-[#6a7282] border border-dashed border-gray-300 rounded-lg">
          <p className="text-[14px]">Aucun canevas pour ce jour</p>
        </div>
      )}
    </section>
  );
}