"use client";

import { cn } from "@/lib/utils";
import type { Week } from "@/lib/types";
import { Lock } from "lucide-react";

interface WeekTabsProps {
  activeWeek: Week;
  onWeekChange: (week: Week) => void;
  className?: string;
  lockedWeeks?: Set<Week>;
  isAdmin?: boolean;
}

const weekData: Record<Week, { title: string; color: string }> = {
  1: {
    title: "SEMAINE 1",
    color: "#f97316", // Orange for Week 1
  },
  2: {
    title: "SEMAINE 2",
    color: "#155dfc", // Blue for Week 2
  },
  3: {
    title: "SEMAINE 3",
    color: "#16A34A", // Green for Week 3
  },
};

export function WeekTabs({
  activeWeek,
  onWeekChange,
  className,
  lockedWeeks = new Set(),
  isAdmin = false
}: WeekTabsProps) {
  const renderWeekButton = (week: Week) => {
    const isActive = activeWeek === week;
    const isLocked = lockedWeeks.has(week);
    const color = weekData[week].color;
    const isDisabled = isLocked && !isAdmin;

    return (
      <button
        key={week}
        onClick={() => {
          if (!isDisabled) {
            onWeekChange(week);
          }
        }}
        disabled={isDisabled}
        className={cn(
          "py-[14px] px-[28px] transition-all duration-200 text-center border-2 relative",
          isActive && !isLocked
            ? "text-white"
            : isActive && isLocked
              ? "text-white"
              : isLocked && !isAdmin
                ? "bg-gray-100 text-gray-400 border-gray-300 cursor-not-allowed opacity-60"
                : "bg-white text-[#0a0a0a] border-black hover:bg-gray-50"
        )}
        style={{
          backgroundColor: isActive ? color : (isLocked && !isAdmin ? undefined : undefined),
          borderColor: isActive ? color : (isLocked && !isAdmin ? "#d1d5db" : "#000"),
        }}
      >
        <span className="font-bold text-[16px] uppercase tracking-[0.09px] leading-[24px] flex items-center justify-center gap-2">
          {isLocked && (
            <Lock className="w-4 h-4" />
          )}
          {weekData[week].title}
        </span>
      </button>
    );
  };

  return (
    <div className={cn("flex flex-col sm:flex-row gap-6", className)}>
      {/* Week 1 - Exploration */}
      <div className="flex flex-col items-center gap-1">
        <span className="text-sm italic text-gray-500">Exploration</span>
        {renderWeekButton(1)}
      </div>

      {/* Weeks 2 & 3 - Design Fiction */}
      <div className="flex flex-col items-center gap-1">
        <span className="text-sm italic text-gray-500">Design Fiction</span>
        <div className="flex flex-col sm:flex-row gap-4">
          {renderWeekButton(2)}
          {renderWeekButton(3)}
        </div>
      </div>
    </div>
  );
}