"use client";

import {useState, useTransition} from "react";
import {useRouter} from "next/navigation";
import {Button} from "@/components/ui/button";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {updateVehicleStatus, deleteVehicle} from "@/features/vehicles/server/actions";

type VehicleStatusControlProps = {
  vehicleId: string;
  tenantSlug: string;
  currentStatus: string;
};

const statusOptions = [
  {value: "AVAILABLE", label: "Available", className: "bg-green-600 hover:bg-green-700"},
  {value: "MAINTENANCE", label: "Set Maintenance", className: "bg-orange-600 hover:bg-orange-700"},
  {value: "INACTIVE", label: "Set Inactive", className: "bg-slate-600 hover:bg-slate-700"}
] as const;

export function VehicleStatusControl({vehicleId, tenantSlug, currentStatus}: VehicleStatusControlProps) {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  async function handleStatusChange(status: "AVAILABLE" | "RESERVED" | "RENTED" | "MAINTENANCE" | "INACTIVE" | "ARCHIVED") {
    setError(null);
    setSuccess(null);
    const result = await updateVehicleStatus(vehicleId, tenantSlug, status);
    if (result.success) {
      setSuccess(`Status updated to ${status}`);
      startTransition(() => router.refresh());
    } else {
      setError(result.error ?? "Failed to update status");
    }
  }

  async function handleDelete() {
    if (!window.confirm("Archive this vehicle? It will be hidden from listings but data is preserved.")) return;
    setError(null);
    const result = await deleteVehicle(vehicleId, tenantSlug);
    if (result.success) {
      router.push(`/company/${tenantSlug}/fleet`);
    } else {
      setError(result.error ?? "Failed to archive vehicle");
    }
  }

  const availableStatuses = statusOptions.filter((s) => s.value !== currentStatus);

  return (
    <Card>
      <CardHeader><CardTitle>Manage Status</CardTitle></CardHeader>
      <CardContent className="space-y-3">
        <div className="flex flex-wrap gap-2">
          {availableStatuses.map(({value, label, className}) => (
            <Button
              key={value}
              size="sm"
              disabled={isPending}
              className={className}
              onClick={() => handleStatusChange(value as "AVAILABLE" | "MAINTENANCE" | "INACTIVE")}
            >
              {label}
            </Button>
          ))}
        </div>
        <Button
          size="sm"
          variant="outline"
          disabled={isPending}
          className="w-full border-red-300 text-red-600 hover:bg-red-50"
          onClick={handleDelete}
        >
          Archive Vehicle
        </Button>
        {success && <p className="rounded-lg bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-700">{success}</p>}
        {error && <p className="rounded-lg bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-600">{error}</p>}
      </CardContent>
    </Card>
  );
}