import React from "react";
import { base44 } from "@/api/base44Client";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CheckCircle, XCircle, Clock, MapPin, Calendar, AlertTriangle, RefreshCw, Info } from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { format } from "date-fns";

export default function WorkerConfirmationCard({ assignment, event }) {
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const confirmMutation = useMutation({
    mutationFn: async (status) => {
      return base44.entities.Assignment.update(assignment.id, {
        assignment_status: status,
        confirmed_date: new Date().toISOString()
      });
    },
    onSuccess: (_, status) => {
      queryClient.invalidateQueries({ queryKey: ['assignments'] });
      toast({
        title: status === "Confirmed" ? "✅ Shift Confirmed" : "❌ Shift Declined",
        description: status === "Confirmed" 
          ? "You're all set! See you at the event."
          : "Notified vendor. They'll find a replacement.",
      });
    },
  });

  const getStatusColor = () => {
    switch (assignment.assignment_status) {
      case "Confirmed":
        return "bg-green-100 text-green-700 border-green-300";
      case "Cancelled":
        return "bg-red-100 text-red-700 border-red-300";
      case "Pending":
        return "bg-yellow-100 text-yellow-700 border-yellow-300";
      default:
        return "bg-slate-100 text-slate-700 border-slate-300";
    }
  };

  return (
    <Card className="bg-white border-2 border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all">
      <CardContent className="p-5">
        <div className="flex items-start justify-between mb-4">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-2">
              <h3 className="font-bold text-lg text-slate-900">{event.event_name}</h3>
              {event.is_rapid && (
                <Badge className="bg-red-600 text-white font-bold text-xs">
                  <AlertTriangle className="w-3 h-3 mr-1" />
                  RAPID
                </Badge>
              )}
            </div>
            <p className="text-sm text-slate-600">{assignment.role}</p>
          </div>
          <Badge className={`border-2 font-semibold ${getStatusColor()}`}>
            {assignment.assignment_status}
          </Badge>
        </div>

        <div className="grid grid-cols-2 gap-4 mb-4">
          <div className="flex items-center gap-2 text-sm">
            <Calendar className="w-4 h-4 text-blue-600" />
            <div>
              <p className="text-xs text-slate-500">Date</p>
              <p className="font-semibold text-slate-900">
                {event.date ? format(new Date(event.date), "MMM d, yyyy") : "TBD"}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2 text-sm">
            <Clock className="w-4 h-4 text-blue-600" />
            <div>
              <p className="text-xs text-slate-500">Time</p>
              <p className="font-semibold text-slate-900">
                {assignment.scheduled_start ? format(new Date(assignment.scheduled_start), "h:mm a") : "ASAP"}
              </p>
            </div>
          </div>
          <div className="flex items-center gap-2 text-sm col-span-2">
            <MapPin className="w-4 h-4 text-blue-600" />
            <div>
              <p className="text-xs text-slate-500">Location</p>
              <p className="font-semibold text-slate-900">{event.event_location || event.hub}</p>
            </div>
          </div>
        </div>

        {/* Shift Details */}
        {event.shifts?.[0] && (
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
            <div className="flex items-center gap-2 mb-2">
              <Info className="w-4 h-4 text-blue-600" />
              <span className="text-xs font-bold text-blue-900">Shift Details</span>
            </div>
            <div className="space-y-1 text-xs text-slate-700">
              {event.shifts[0].uniform_type && (
                <p><strong>Attire:</strong> {event.shifts[0].uniform_type}</p>
              )}
              {event.addons?.meal_provided && (
                <p><strong>Meal:</strong> Provided</p>
              )}
              {event.notes && (
                <p><strong>Notes:</strong> {event.notes}</p>
              )}
            </div>
          </div>
        )}

        {/* Action Buttons */}
        {assignment.assignment_status === "Pending" && (
          <div className="flex gap-2">
            <Button
              onClick={() => confirmMutation.mutate("Confirmed")}
              disabled={confirmMutation.isPending}
              className="flex-1 bg-green-600 hover:bg-green-700 text-white font-bold"
            >
              <CheckCircle className="w-4 h-4 mr-2" />
              Accept Shift
            </Button>
            <Button
              onClick={() => confirmMutation.mutate("Cancelled")}
              disabled={confirmMutation.isPending}
              variant="outline"
              className="flex-1 border-2 border-red-300 text-red-600 hover:bg-red-50 font-bold"
            >
              <XCircle className="w-4 h-4 mr-2" />
              Decline
            </Button>
          </div>
        )}

        {assignment.assignment_status === "Confirmed" && (
          <div className="bg-green-50 border-2 border-green-300 rounded-lg p-3">
            <div className="flex items-center gap-2 text-green-700">
              <CheckCircle className="w-5 h-5" />
              <span className="font-bold text-sm">You're confirmed for this shift!</span>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}