import React, { useState } from "react";
import { base44 } from "@/api/base44Client";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { Link, useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { ArrowLeft, Calendar, MapPin, Users, DollarSign, Send, Edit3, X, AlertTriangle } from "lucide-react";
import ShiftCard from "@/components/events/ShiftCard";
import OrderStatusBadge from "@/components/orders/OrderStatusBadge";
import { useToast } from "@/components/ui/use-toast";
import { format } from "date-fns";

const safeFormatDate = (dateString) => {
  if (!dateString) return "—";
  try {
    return format(new Date(dateString), "MMMM d, yyyy");
  } catch {
    return "—";
  }
};

export default function EventDetail() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const [notifyDialog, setNotifyDialog] = useState(false);
  const [cancelDialog, setCancelDialog] = useState(false);

  const urlParams = new URLSearchParams(window.location.search);
  const eventId = urlParams.get("id");

  const { data: user } = useQuery({
    queryKey: ['current-user-event-detail'],
    queryFn: () => base44.auth.me(),
  });

  const { data: allEvents, isLoading } = useQuery({
    queryKey: ['events'],
    queryFn: () => base44.entities.Event.list(),
    initialData: [],
  });

  const event = allEvents.find(e => e.id === eventId);

  // Cancel order mutation
  const cancelOrderMutation = useMutation({
    mutationFn: () => base44.entities.Event.update(eventId, { status: "Canceled" }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['events'] });
      queryClient.invalidateQueries({ queryKey: ['all-events-client'] });
      toast({
        title: "✅ Order Canceled",
        description: "Your order has been canceled successfully",
      });
      setCancelDialog(false);
      navigate(createPageUrl("ClientOrders"));
    },
    onError: () => {
      toast({
        title: "❌ Failed to Cancel",
        description: "Could not cancel order. Please try again.",
        variant: "destructive",
      });
    },
  });

  const handleNotifyStaff = async () => {
    const assignedStaff = event?.assigned_staff || [];
    
    for (const staff of assignedStaff) {
      try {
        await base44.integrations.Core.SendEmail({
          to: staff.email || `${staff.staff_name}@example.com`,
          subject: `Shift Update: ${event.event_name}`,
          body: `You have an update for: ${event.event_name}\nDate: ${event.date}\nLocation: ${event.event_location || event.hub}\n\nPlease check the platform for details.`
        });
      } catch (error) {
        console.error("Failed to send email:", error);
      }
    }

    toast({
      title: "✅ Notifications Sent",
      description: `Notified ${assignedStaff.length} staff members`,
    });
    setNotifyDialog(false);
  };

  const isClient = user?.user_role === 'client' || 
                   event?.created_by === user?.email ||
                   event?.client_email === user?.email;

  const canEditOrder = () => {
    if (!event) return false;
    const eventDate = new Date(event.date);
    const now = new Date();
    return isClient && 
           event.status !== "Completed" && 
           event.status !== "Canceled" && 
           eventDate > now;
  };

  const canCancelOrder = () => {
    if (!event) return false;
    return isClient && 
           event.status !== "Completed" && 
           event.status !== "Canceled";
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600" />
      </div>
    );
  }

  if (!event) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen">
        <p className="text-xl font-semibold text-slate-900 mb-4">Event not found</p>
        <Link to={createPageUrl("Events")}>
          <Button variant="outline">Back to Events</Button>
        </Link>
      </div>
    );
  }

  // Get shifts from event.shifts array (primary source)
  const eventShifts = event.shifts || [];

  return (
    <div className="p-4 md:p-8">
      <div className="max-w-7xl mx-auto space-y-6">
        
        {/* Header */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => navigate(-1)}
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
            <div>
              <h1 className="text-3xl font-bold text-slate-900">{event.event_name}</h1>
              <p className="text-slate-600 mt-1">Order Details & Information</p>
            </div>
          </div>
          <div className="flex items-center gap-3">
            <OrderStatusBadge order={event} />
            {canEditOrder() && (
              <button
                onClick={() => navigate(createPageUrl(`EditEvent?id=${event.id}`))}
                className="flex items-center gap-2 px-5 py-2.5 bg-white hover:bg-blue-50 border-2 border-blue-200 rounded-full text-blue-600 font-semibold text-base transition-all shadow-md hover:shadow-lg"
              >
                <Edit3 className="w-5 h-5" />
                Edit
              </button>
            )}
            {canCancelOrder() && (
              <button
                onClick={() => setCancelDialog(true)}
                className="flex items-center gap-2 px-5 py-2.5 bg-white hover:bg-red-50 border-2 border-red-200 rounded-full text-red-600 font-semibold text-base transition-all shadow-md hover:shadow-lg"
              >
                <X className="w-5 h-5" />
                cancel
              </button>
            )}
            {!isClient && event.assigned_staff?.length > 0 && (
              <Button
                onClick={() => setNotifyDialog(true)}
                className="bg-blue-600 hover:bg-blue-700"
              >
                <Send className="w-4 h-4 mr-2" />
                Notify Staff
              </Button>
            )}
          </div>
        </div>

        {/* Order Details Card */}
        <Card className="bg-white border border-slate-200 shadow-md">
          <CardHeader className="border-b border-slate-100">
            <CardTitle className="text-lg font-bold text-slate-900">Order Information</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-4 gap-6">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center">
                  <Calendar className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <p className="text-xs text-slate-500">Event Date</p>
                  <p className="font-bold text-slate-900">{safeFormatDate(event.date)}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-purple-50 rounded-lg flex items-center justify-center">
                  <MapPin className="w-5 h-5 text-purple-600" />
                </div>
                <div>
                  <p className="text-xs text-slate-500">Location</p>
                  <p className="font-bold text-slate-900">{event.hub || event.event_location || "—"}</p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-green-50 rounded-lg flex items-center justify-center">
                  <Users className="w-5 h-5 text-green-600" />
                </div>
                <div>
                  <p className="text-xs text-slate-500">Staff Assigned</p>
                  <p className="font-bold text-slate-900">
                    {event.assigned_staff?.length || 0} / {event.requested || 0}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-amber-50 rounded-lg flex items-center justify-center">
                  <DollarSign className="w-5 h-5 text-amber-600" />
                </div>
                <div>
                  <p className="text-xs text-slate-500">Total Cost</p>
                  <p className="font-bold text-slate-900">${(event.total || 0).toLocaleString()}</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Client Information (if not client viewing) */}
        {!isClient && (
          <Card className="bg-white border border-slate-200 shadow-md">
            <CardHeader className="border-b border-slate-100">
              <CardTitle className="text-lg font-bold text-slate-900">Client Information</CardTitle>
            </CardHeader>
            <CardContent className="p-6">
              <div className="grid grid-cols-3 gap-6">
                <div>
                  <p className="text-xs text-slate-500 mb-1">Business Name</p>
                  <p className="font-bold text-slate-900">{event.business_name || "—"}</p>
                </div>
                <div>
                  <p className="text-xs text-slate-500 mb-1">Contact Name</p>
                  <p className="font-bold text-slate-900">{event.client_name || "—"}</p>
                </div>
                <div>
                  <p className="text-xs text-slate-500 mb-1">Contact Email</p>
                  <p className="font-bold text-slate-900">{event.client_email || "—"}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* Shifts - Using event.shifts array */}
        <div className="space-y-4">
          <h2 className="text-xl font-bold text-slate-900">Event Shifts & Staff Assignment</h2>
          {eventShifts.length > 0 ? (
            eventShifts.map((shift, idx) => (
              <ShiftCard key={idx} shift={shift} event={event} />
            ))
          ) : (
            <Card className="bg-white border border-slate-200">
              <CardContent className="p-12 text-center">
                <Users className="w-12 h-12 mx-auto mb-4 text-slate-400" />
                <p className="text-slate-600 font-medium mb-2">No shifts defined for this event</p>
                <p className="text-slate-500 text-sm">Add roles and staff requirements to get started</p>
              </CardContent>
            </Card>
          )}
        </div>

        {/* Notes */}
        {event.notes && (
          <Card className="bg-white border border-slate-200 shadow-md">
            <CardHeader className="border-b border-slate-100">
              <CardTitle className="text-lg font-bold text-slate-900">Additional Notes</CardTitle>
            </CardHeader>
            <CardContent className="p-6">
              <p className="text-slate-700 whitespace-pre-wrap">{event.notes}</p>
            </CardContent>
          </Card>
        )}
      </div>

      {/* Notify Staff Dialog */}
      <Dialog open={notifyDialog} onOpenChange={setNotifyDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Notify Assigned Staff</DialogTitle>
            <DialogDescription>
              Send notification to all {event.assigned_staff?.length || 0} assigned staff members about this event.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setNotifyDialog(false)}>
              Cancel
            </Button>
            <Button onClick={handleNotifyStaff} className="bg-blue-600 hover:bg-blue-700">
              <Send className="w-4 h-4 mr-2" />
              Send Notifications
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Cancel Order Dialog */}
      <Dialog open={cancelDialog} onOpenChange={setCancelDialog}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-red-600">
              <AlertTriangle className="w-5 h-5" />
              Cancel Order?
            </DialogTitle>
            <DialogDescription>
              Are you sure you want to cancel this order? This action cannot be undone and the vendor will be notified immediately.
            </DialogDescription>
          </DialogHeader>
          
          <div className="bg-slate-50 rounded-lg p-4 space-y-2">
            <p className="font-bold text-slate-900">{event.event_name}</p>
            <div className="flex items-center gap-2 text-sm text-slate-600">
              <Calendar className="w-4 h-4" />
              {safeFormatDate(event.date)}
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-600">
              <MapPin className="w-4 h-4" />
              {event.hub || event.event_location}
            </div>
          </div>

          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setCancelDialog(false)}
            >
              Keep Order
            </Button>
            <Button
              variant="destructive"
              onClick={() => cancelOrderMutation.mutate()}
              disabled={cancelOrderMutation.isPending}
            >
              {cancelOrderMutation.isPending ? "Canceling..." : "Yes, Cancel Order"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}