import React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { AlertTriangle, Clock, Calendar } from "lucide-react";
import { format } from "date-fns";

export default function DoubleBookingOverrideDialog({ 
  open, 
  onClose, 
  conflict, 
  workerName,
  onConfirm 
}) {
  if (!conflict) return null;
  
  const { existingEvent, existingShift, gapMinutes, canOverride } = conflict;
  
  const existingShiftTime = existingShift?.roles?.[0] || existingShift || {};
  const existingStart = existingShiftTime.start_time || '00:00';
  const existingEnd = existingShiftTime.end_time || '23:59';
  
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-orange-600">
            <AlertTriangle className="w-5 h-5" />
            {canOverride ? 'Double Shift Assignment' : 'Assignment Blocked'}
          </DialogTitle>
          <DialogDescription>
            {canOverride 
              ? `${workerName} is finishing another shift within ${gapMinutes} minutes of this assignment.`
              : `${workerName} cannot be assigned due to a scheduling conflict.`
            }
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-4">
          <Alert className="border-orange-200 bg-orange-50">
            <AlertTriangle className="w-4 h-4 text-orange-600" />
            <AlertDescription className="text-sm text-orange-900">
              {conflict.reason}
            </AlertDescription>
          </Alert>
          
          <div className="bg-slate-50 rounded-lg p-4 space-y-3">
            <div className="flex items-center gap-2 text-sm font-semibold text-slate-900">
              <Calendar className="w-4 h-4" />
              Existing Assignment
            </div>
            
            <div className="space-y-1.5 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-600">Event:</span>
                <span className="font-medium text-slate-900">{existingEvent?.event_name || 'Unnamed Event'}</span>
              </div>
              
              <div className="flex justify-between">
                <span className="text-slate-600">Location:</span>
                <span className="font-medium text-slate-900">{existingEvent?.hub || existingEvent?.event_location || '-'}</span>
              </div>
              
              <div className="flex justify-between">
                <span className="text-slate-600">Date:</span>
                <span className="font-medium text-slate-900">
                  {existingEvent?.date ? format(new Date(existingEvent.date), 'MMM d, yyyy') : '-'}
                </span>
              </div>
              
              <div className="flex justify-between items-center">
                <span className="text-slate-600">Time:</span>
                <div className="flex items-center gap-1.5 font-medium text-slate-900">
                  <Clock className="w-3.5 h-3.5" />
                  <span>{existingStart} - {existingEnd}</span>
                </div>
              </div>
            </div>
          </div>
          
          {canOverride && (
            <Alert className="border-blue-200 bg-blue-50">
              <AlertDescription className="text-sm text-blue-900">
                As a vendor, you can override this restriction and assign {workerName} to a double shift. 
                Please ensure the worker has adequate rest and complies with labor regulations.
              </AlertDescription>
            </Alert>
          )}
        </div>
        
        <DialogFooter>
          {canOverride ? (
            <>
              <Button variant="outline" onClick={onClose}>
                Cancel Assignment
              </Button>
              <Button 
                onClick={onConfirm}
                className="bg-orange-600 hover:bg-orange-700"
              >
                Override & Assign Double Shift
              </Button>
            </>
          ) : (
            <Button onClick={onClose}>
              Close
            </Button>
          )}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}