"use client";

import { StatusBadge } from "@/components/shared/status-badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

// API status type for phases
export type PhaseStatus = "not_started" | "in_progress" | "completed" | "delayed";

// Phase status options with labels
const PHASE_STATUSES: { value: PhaseStatus; labelAr: string; labelEn: string }[] = [
  { value: "not_started", labelAr: "لم تبدأ", labelEn: "Not Started" },
  { value: "in_progress", labelAr: "قيد التنفيذ", labelEn: "In Progress" },
  { value: "completed", labelAr: "مكتملة", labelEn: "Completed" },
  { value: "delayed", labelAr: "متأخرة", labelEn: "Delayed" },
];

// Map API status to StatusBadge compatible status
const statusBadgeMap: Record<PhaseStatus, string> = {
  not_started: "pending",
  in_progress: "in_progress",
  completed: "completed",
  delayed: "delayed",
};

interface PhaseStatusSelectorProps {
  value: PhaseStatus;
  onChange: (status: PhaseStatus) => void;
  locale: "ar" | "en";
  placeholder?: string;
  className?: string;
}

export function PhaseStatusSelector({
  value,
  onChange,
  locale,
  placeholder,
  className,
}: PhaseStatusSelectorProps) {
  const getLabel = (status: PhaseStatus): string => {
    const statusOption = PHASE_STATUSES.find((s) => s.value === status);
    return (locale === "ar" ? statusOption?.labelAr : statusOption?.labelEn) ?? "";
  };

  return (
    <Select value={value} onValueChange={(val) => onChange(val as PhaseStatus)}>
      <SelectTrigger
        className={cn(
          "h-10 w-full border border-input bg-background",
          "[&>span]:flex [&>span]:items-center [&>span]:gap-2",
          className
        )}
      >
        <SelectValue placeholder={placeholder}>
          {value && (
            <StatusBadge
              status={statusBadgeMap[value]}
              label={getLabel(value)}
              className="text-xs"
            />
          )}
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        {PHASE_STATUSES.map((status) => (
          <SelectItem key={status.value} value={status.value} className="cursor-pointer">
            <StatusBadge
              status={statusBadgeMap[status.value]}
              label={locale === "ar" ? status.labelAr : status.labelEn}
              className="text-xs"
            />
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}