pn-new-crm/src/components/berths/berth-status-suggestion-dialog.tsx

'use client';

import { useMutation } from '@tanstack/react-query';
import { ArrowRight, Loader2 } from 'lucide-react';

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { apiFetch } from '@/lib/api/client';

interface BerthStatusSuggestionDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  berthId: string;
  currentStatus: string;
  suggestedStatus: string;
  reason: string;
  onApplied: () => void;
}

export function BerthStatusSuggestionDialog({
  open,
  onOpenChange,
  berthId,
  currentStatus,
  suggestedStatus,
  reason,
  onApplied,
}: BerthStatusSuggestionDialogProps) {
  const applyMutation = useMutation({
    mutationFn: () =>
      apiFetch(`/api/v1/berths/${berthId}/status`, {
        method: 'PATCH',
        body: JSON.stringify({ status: suggestedStatus, reason }),
      }),
    onSuccess: () => {
      onApplied();
      onOpenChange(false);
    },
  });

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Suggested Status Change</DialogTitle>
          <DialogDescription>
            Based on recent activity, a berth status update is recommended.
          </DialogDescription>
        </DialogHeader>

        <div className="flex items-center justify-center gap-4 py-4">
          <Badge variant="outline" className="text-base px-4 py-1.5">
            {currentStatus.replace(/_/g, ' ')}
          </Badge>
          <ArrowRight className="h-5 w-5 text-muted-foreground" />
          <Badge variant="default" className="text-base px-4 py-1.5">
            {suggestedStatus.replace(/_/g, ' ')}
          </Badge>
        </div>

        {reason && (
          <p className="text-sm text-muted-foreground text-center px-4">{reason}</p>
        )}

        <DialogFooter className="gap-2">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            Dismiss
          </Button>
          <Button
            onClick={() => applyMutation.mutate()}
            disabled={applyMutation.isPending}
          >
            {applyMutation.isPending && (
              <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
            )}
            Apply Change
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}