"use client";

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

// Backend API status type
export type APITaskStatus = "pending" | "in_progress" | "completed";

// UI status type for display
export type TaskStatus = "not_started" | "inProgress" | "completed";

interface TaskStatusSelectorProps {
  value: TaskStatus;
  onChange: (status: TaskStatus) => void;
  translations: {
    not_started: string;
    inProgress: string;
    completed: string;
  };
  className?: string;
}

// Map UI status to StatusBadge compatible status
const statusMap: Record<TaskStatus, string> = {
  not_started: "pending",
  inProgress: "in_progress",
  completed: "completed",
};

/**
 * Maps UI status to API status for backend requests
 */
export function mapUIStatusToAPIStatus(uiStatus: TaskStatus): APITaskStatus {
  switch (uiStatus) {
    case "not_started":
      return "pending";
    case "inProgress":
      return "in_progress";
    case "completed":
      return "completed";
  }
}

/**
 * Maps API status to UI status for display
 */
export function mapAPIStatusToUIStatus(apiStatus: string): TaskStatus {
  switch (apiStatus) {
    case "done":
    case "completed":
      return "completed";
    case "in_progress":
    case "inProgress":
      return "inProgress";
    case "pending":
    case "not_started":
    case "todo":
    default:
      return "not_started";
  }
}

export function TaskStatusSelector({
  value,
  onChange,
  translations,
  className,
}: TaskStatusSelectorProps) {
  const getLabel = (status: TaskStatus) => {
    switch (status) {
      case "not_started":
        return translations.not_started;
      case "inProgress":
        return translations.inProgress;
      case "completed":
        return translations.completed;
    }
  };

  return (
    <Select value={value} onValueChange={(val) => onChange(val as TaskStatus)}>
      <SelectTrigger
        className={cn(
          "h-10 w-full border border-input bg-background",
          "[&>span]:flex [&>span]:items-center [&>span]:gap-2",
          className
        )}
      >
        <SelectValue>
          <StatusBadge
            status={statusMap[value]}
            label={getLabel(value)}
            className="text-xs"
          />
        </SelectValue>
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="not_started" className="cursor-pointer">
          <StatusBadge
            status="pending"
            label={translations.not_started}
            className="text-xs"
          />
        </SelectItem>
        <SelectItem value="inProgress" className="cursor-pointer">
          <StatusBadge
            status="in_progress"
            label={translations.inProgress}
            className="text-xs"
          />
        </SelectItem>
        <SelectItem value="completed" className="cursor-pointer">
          <StatusBadge
            status="completed"
            label={translations.completed}
            className="text-xs"
          />
        </SelectItem>
      </SelectContent>
    </Select>
  );
}