"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { orderStatusLabels } from "../data/orders-data";
import { orderStatusMeta } from "./order-status-badge";
import type { Order, OrderStatus } from "../types";

interface UpdateOrderStatusDialogProps {
  order: Order;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (status: OrderStatus) => void;
}

/**
 * Modal used to move an order forward (or backwards) through its
 * lifecycle. Excludes "cancelled" — cancellation has its own flow.
 */
export function UpdateOrderStatusDialog({
  order,
  open,
  onOpenChange,
  onConfirm,
}: UpdateOrderStatusDialogProps) {
  const [nextStatus, setNextStatus] = useState<OrderStatus | null>(null);
  const current = orderStatusMeta[order.status];

  const statusOptions = (
    Object.keys(orderStatusLabels) as OrderStatus[]
  ).filter((s) => s !== "cancelled");

  const handleConfirm = () => {
    if (nextStatus && nextStatus !== order.status) {
      onConfirm(nextStatus);
    }
    onOpenChange(false);
    setNextStatus(null);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        onOpenChange(next);
        if (!next) setNextStatus(null);
      }}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update order status</DialogTitle>
          <DialogDescription>
            Change the fulfillment stage for{" "}
            <span className="font-medium text-foreground">
              {order.orderNumber}
            </span>
            .
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col gap-3 py-1">
          <div className="flex items-center justify-between rounded-lg border bg-muted/30 px-3 py-2.5 text-sm">
            <span className="text-muted-foreground">Current status</span>
            <span className="inline-flex items-center gap-1.5 font-medium">
              <span
                className={`size-1.5 rounded-full ${current.dotClassName}`}
              />
              {current.label}
            </span>
          </div>

          <div className="space-y-2">
            <label htmlFor="next-status" className="text-sm font-medium">
              New status
            </label>
            <Select
              items={statusOptions.map((status) => ({
                value: status,
                label: orderStatusLabels[status],
              }))}
              value={nextStatus ?? order.status}
              onValueChange={(val) => setNextStatus(val as OrderStatus)}
            >
              <SelectTrigger id="next-status" className="w-full">
                <SelectValue placeholder="Select a status" />
              </SelectTrigger>
              <SelectContent>
                {statusOptions.map((status) => (
                  <SelectItem
                    key={status}
                    value={status}
                    disabled={status === order.status}
                  >
                    {orderStatusLabels[status]}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Cancel
          </Button>
          <Button
            onClick={handleConfirm}
            disabled={!nextStatus || nextStatus === order.status}
          >
            Save status
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}