"use client";

import { useState } from "react";

import { AlertCircle, Check, ChevronDown, Truck, UserCheck } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { ROLE_LABELS, type Role } from "@/lib/auth";
import { nextStagesForRole } from "@/lib/order/state-machine";
import { STAGE_LABELS, type Order, type OrderStage } from "@/lib/order/types";
import type { Driver } from "@/lib/order/types";

interface QuickActionsProps {
  order: Order;
  role: Role;
  drivers: Driver[];
  onTransition: (target: OrderStage) => void;
  onAssignDriver: (driverId: string) => void;
}

export function QuickActions({ order, role, drivers, onTransition, onAssignDriver }: QuickActionsProps) {
  const [confirmStage, setConfirmStage] = useState<OrderStage | null>(null);

  const available = nextStagesForRole(order, role);
  const assignedDriver = drivers.find((d) => d.id === order.driverId);

  if (available.length === 0) {
    return null;
  }

  const handleClick = (stage: OrderStage, ok: boolean) => {
    if (!ok) return;
    if (confirmStage === stage) {
      onTransition(stage);
      setConfirmStage(null);
    } else {
      setConfirmStage(stage);
    }
  };

  return (
    <div className="border-t px-3 py-2">
      <p className="mb-2 text-[11px] text-muted-foreground uppercase tracking-wider">
        Actions — {ROLE_LABELS[role]}
      </p>
      <div className="flex flex-wrap gap-2">
        {/* Driver assignment (delivery orders, before dispatched) */}
        {order.type === "delivery" &&
          (order.stage === "ready" || order.stage === "assigned") &&
          (role === "admin" || role === "dispatcher" || role === "foh") && (
            <DriverAssignPicker
              drivers={drivers}
              currentDriverId={order.driverId}
              onAssign={onAssignDriver}
            />
          )}

        {/* Stage transitions */}
        {available.map(({ stage, result }) => {
          const isConfirming = confirmStage === stage;
          const label = stage === "assigned" && order.type === "collection"
            ? "Ready for Collection"
            : STAGE_LABELS[stage];

          if (!result.ok) {
            return (
              <Tooltip key={stage}>
                <TooltipTrigger asChild>
                  <Button variant="outline" size="sm" className="h-8 cursor-not-allowed opacity-50" disabled>
                    <AlertCircle className="size-3.5" />
                    {label}
                  </Button>
                </TooltipTrigger>
                <TooltipContent className="max-w-60 text-center">{result.reason}</TooltipContent>
              </Tooltip>
            );
          }

          return (
            <Button
              key={stage}
              variant={isConfirming ? "default" : "outline"}
              size="sm"
              className="h-8"
              onClick={() => handleClick(stage, result.ok)}
            >
              {isConfirming ? (
                <>
                  <Check className="size-3.5" />
                  Confirm: {label}
                </>
              ) : (
                label
              )}
            </Button>
          );
        })}

        {/* Cancel confirm if user clicks elsewhere */}
        {confirmStage && (
          <Button
            variant="ghost"
            size="sm"
            className="h-8 text-muted-foreground"
            onClick={() => setConfirmStage(null)}
          >
            Cancel
          </Button>
        )}
      </div>

      {/* Driver info */}
      {assignedDriver && (
        <p className="mt-1.5 flex items-center gap-1.5 text-[12px] text-muted-foreground">
          <Truck className="size-3.5" />
          Driver: <span className="font-medium text-foreground">{assignedDriver.name}</span>
        </p>
      )}
    </div>
  );
}

function DriverAssignPicker({
  drivers,
  currentDriverId,
  onAssign,
}: {
  drivers: Driver[];
  currentDriverId?: string;
  onAssign: (id: string) => void;
}) {
  const current = drivers.find((d) => d.id === currentDriverId);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 gap-1">
          <UserCheck className="size-3.5" />
          {current ? current.name : "Assign Driver"}
          <ChevronDown className="size-3" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        {drivers.map((d) => (
          <DropdownMenuItem key={d.id} onClick={() => onAssign(d.id)} className="gap-2">
            {d.id === currentDriverId && <Check className="size-3.5 text-primary" />}
            {d.id !== currentDriverId && <span className="size-3.5" />}
            {d.name}
            <span className="ml-auto font-mono text-muted-foreground text-xs">{d.mobile}</span>
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}