"use client";

import Link from "next/link";
import { cn } from "@/lib/utils";
import type { CanvasTemplate, Day, Week, CanvasStatus } from "@/lib/types";

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

export function AdminDaySection({ week, day, canvases, teamId, canvasStatuses, className }: AdminDaySectionProps) {
  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) => (
            <AdminCanvasCard
              key={canvas.id}
              canvas={canvas}
              teamId={teamId}
              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>
  );
}

interface AdminCanvasCardProps {
  canvas: CanvasTemplate;
  teamId: string;
  status: CanvasStatus;
  className?: string;
}

function AdminCanvasCard({ canvas, teamId, status, className }: AdminCanvasCardProps) {
  let headerBgColor = "bg-white";
  // Badge color based on week: Week 1 = Orange, Week 2 = Blue, Week 3 = Green
  let badgeColor = canvas.week === 1 ? "#f97316" : canvas.week === 2 ? "#155dfc" : "#16A34A";
  let statusBorderColor = "border-black";

  if (status === "started") {
    headerBgColor = "bg-orange-100";
    statusBorderColor = "border-orange-300";
  } else if (status === "finished") {
    headerBgColor = "bg-green-100";
    statusBorderColor = "border-green-500";
  }

  return (
    <Link
      href={`/canvas/${canvas.id}?teamId=${teamId}`}
      className={cn(
        "group block border-2",
        "pt-[26px] pb-[26px] px-[26px]",
        "transition-all duration-200 ease-out",
        "hover:shadow-lg hover:-translate-y-0.5",
        headerBgColor, // Apply background color to entire card
        statusBorderColor,
        className
      )}
    >
      <div className="flex items-start gap-3">
        {/* Number Badge - Square */}
        <div
          className="w-8 h-8 flex items-center justify-center flex-shrink-0"
          style={{ backgroundColor: badgeColor }}
        >
          <span className="text-[14px] font-bold text-white leading-[20px] tracking-[-0.15px]">
            {canvas.exerciseNumber}
          </span>
        </div>

        {/* Content */}
        <div className="flex-1 min-w-0">
          <h3 className="text-[18px] font-normal text-[#0a0a0a] uppercase tracking-[0.01px] leading-[22.5px]">
            {canvas.title}
          </h3>
        </div>
      </div>

      {/* Subtitle */}
      {canvas.subtitle && (
        <p className="mt-3 text-[14px] text-[#4a5565] leading-[20px] tracking-[-0.15px]">
          {canvas.subtitle}
        </p>
      )}
    </Link>
  );
}