
import React from 'react';
import {
  Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { AlertTriangle, ArrowRight } from "lucide-react";

export default function ParkingRecordEscalationDialog({ 
  isOpen, onOpenChange, record, onConfirm, isEscalating 
}) {
  if (!record) return null;

  const getLevelLabel = (level) => {
    switch (level) {
      case 'first_warning': return 'First Warning';
      case 'second_warning': return 'Second Warning';
      case 'final_warning': return 'Final Warning';
      default: return 'First Warning';
    }
  };

  const safeLevel = record.warning_level || 'first_warning';
  const currentLabel = getLevelLabel(safeLevel);
  const nextLabel = safeLevel === 'first_warning' ? getLevelLabel('second_warning') : getLevelLabel('final_warning');

  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-amber-600">
            <AlertTriangle className="h-5 w-5" />
            Confirm Escalation
          </DialogTitle>
          <DialogDescription>
            Are you sure you want to escalate this parking violation?
          </DialogDescription>
        </DialogHeader>
        
        <div className="flex items-center justify-between py-4 px-2">
          <div className="text-center p-3 bg-muted rounded-lg border w-1/3">
            <span className="block text-xs text-muted-foreground uppercase font-semibold">Current</span>
            <span className="font-medium">{currentLabel}</span>
          </div>
          <ArrowRight className="text-muted-foreground" />
          <div className="text-center p-3 bg-destructive/10 rounded-lg border border-destructive/20 w-1/3">
            <span className="block text-xs text-destructive uppercase font-semibold">Next Level</span>
            <span className="font-bold text-destructive">{nextLabel}</span>
          </div>
        </div>

        <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md border mb-2">
          <p><strong>Vehicle:</strong> {record.vehicle_plate} ({record.vehicle_make} {record.vehicle_model})</p>
          <p><strong>Citation:</strong> {record.citation}</p>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isEscalating}>Cancel</Button>
          <Button variant="destructive" onClick={() => onConfirm(record.id, safeLevel)} disabled={isEscalating}>
            {isEscalating ? 'Escalating...' : 'Confirm Escalation'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
