"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { Badge } from "@/components/ui/Badge";
import { transitionSurveyStatus } from "@/lib/actions/surveys";
import type { SurveyStatus } from "@/types";

interface SurveyStatusSelectProps {
  surveyId: string;
  status: SurveyStatus;
}

const statuses: SurveyStatus[] = ["draft", "active", "closed"];

export function SurveyStatusSelect({
  surveyId,
  status,
}: SurveyStatusSelectProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();

  function handleChange(next: SurveyStatus) {
    if (next === status) return;
    startTransition(async () => {
      await transitionSurveyStatus(surveyId, next);
      router.refresh();
    });
  }

  return (
    <div className="relative inline-flex items-center gap-1">
      <Badge status={status} />
      <select
        aria-label="Change survey status"
        disabled={isPending}
        value={status}
        onChange={(e) => handleChange(e.target.value as SurveyStatus)}
        className="absolute inset-0 cursor-pointer opacity-0"
      >
        {statuses.map((s) => (
          <option key={s} value={s}>
            {s}
          </option>
        ))}
      </select>
    </div>
  );
}