import  { useMemo, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { format } from "date-fns";
import { useSelector } from "react-redux";
import { Calendar, MapPin, Users, DollarSign, Edit3, X, Copy, Clock, FileText, UserPlus } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/common/components/ui/card";
import { Button } from "@/common/components/ui/button";
import { Badge } from "@/common/components/ui/badge";
import DashboardLayout from "@/features/layouts/DashboardLayout";
import { useGetOrderById, useUpdateOrder, useListShiftRolesByBusinessAndOrder } from "@/dataconnect-generated/react";
import { OrderStatus } from "@/dataconnect-generated";
import { dataConnect } from "@/features/auth/firebase";
import { useToast } from "@/common/components/ui/use-toast";
import AssignStaffModal from "./components/AssignStaffModal";
import type { RootState } from "@/store/store";

const safeFormatDate = (value?: string | null): string => {
  if (!value) return "—";
  try {
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return "—";
    return format(d, "MMM d, yyyy");
  } catch {
    return "—";
  }
};

const safeFormatDateTime = (value?: string | null): string => {
  if (!value) return "—";
  try {
    const d = new Date(value);
    if (Number.isNaN(d.getTime())) return "—";
    return format(d, "MMM d, yyyy • h:mm a");
  } catch {
    return "—";
  }
};

const getStatusBadge = (status: OrderStatus) => {
  switch (status) {
    case OrderStatus.FULLY_STAFFED:
    case OrderStatus.FILLED:
      return (
        <Badge className="bg-emerald-500 hover:bg-emerald-600 text-white border-none font-bold uppercase text-[10px]">
          Fully Staffed
        </Badge>
      );
    case OrderStatus.PARTIAL_STAFFED:
      return (
        <Badge className="bg-orange-500 hover:bg-orange-600 text-white border-none font-bold uppercase text-[10px]">
          Partial Staffed
        </Badge>
      );
    case OrderStatus.PENDING:
    case OrderStatus.POSTED:
      return (
        <Badge className="bg-blue-500 hover:bg-blue-600 text-white border-none font-bold uppercase text-[10px]">
          {status}
        </Badge>
      );
    case OrderStatus.CANCELLED:
      return (
        <Badge className="bg-red-500 hover:bg-red-600 text-white border-none font-bold uppercase text-[10px]">
          Cancelled
        </Badge>
      );
    case OrderStatus.COMPLETED:
      return (
        <Badge className="bg-slate-700 hover:bg-slate-800 text-white border-none font-bold uppercase text-[10px]">
          Completed
        </Badge>
      );
    case OrderStatus.DRAFT:
    default:
      return (
        <Badge variant="outline" className="font-bold uppercase text-[10px]">
          {status}
        </Badge>
      );
  }
};

export default function OrderDetail() {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const { toast } = useToast();
  const { user } = useSelector((state: RootState) => state.auth);
  const [selectedShift, setSelectedShift] = useState<any>(null);
  const [isAssignModalOpen, setIsAssignModalOpen] = useState(false);

  const {
    data,
    isLoading,
  } = useGetOrderById(
    dataConnect,
    { id: id || "" },
    {
      enabled: !!id,
    },
  );

  const order = data?.order;

  // Fetch real shift roles to get IDs and accurate counts
  const { 
    data: shiftRolesData, 
    isLoading: isLoadingShifts,
    refetch: refetchShifts 
  } = useListShiftRolesByBusinessAndOrder(
    dataConnect,
    { 
      orderId: id || "", 
      businessId: order?.businessId || "" 
    },
    {
      enabled: !!id && !!order?.businessId,
    }
  );

  const cancelMutation = useUpdateOrder(dataConnect, {
    onSuccess: () => {
      toast({
        title: "Order cancelled",
        description: "The order status has been updated to Cancelled.",
      });
    },
    onError: () => {
      toast({
        title: "Failed to cancel order",
        description: "Please try again or contact support.",
        variant: "destructive",
      });
    },
  });

  const canModify = useMemo(() => {
    if (!order) return false;
    const status = order.status as OrderStatus;
    return status !== OrderStatus.CANCELLED && status !== OrderStatus.COMPLETED;
  }, [order]);

  const handleCancel = () => {
    if (!order || !id || !canModify) return;
    cancelMutation.mutate({
      id,
      status: OrderStatus.CANCELLED,
    });
  };

  const handleEdit = () => {
    if (!order || !id) return;
    navigate(`/orders/${id}/edit`);
  };

  const handleDuplicate = () => {
    if (!order || !id) return;
    // Placeholder: route can later pre-fill a new order from this one
    navigate(`/orders/create?duplicate=${id}`);
  };

  const shifts: any[] = useMemo(() => {
    if (shiftRolesData?.shiftRoles && shiftRolesData.shiftRoles.length > 0) {
      return shiftRolesData.shiftRoles;
    }
    return Array.isArray(order?.shifts) ? (order!.shifts as any[]) : [];
  }, [shiftRolesData, order?.shifts]);

  const totalRequested = order?.requested ?? 0;
  const totalAssigned = Array.isArray(order?.assignedStaff) ? order!.assignedStaff.length : 0;

  if (isLoading) {
    return (
      <DashboardLayout title="Order Detail" subtitle="Loading order details">
        <div className="flex items-center justify-center min-h-[40vh]">
          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin" />
        </div>
      </DashboardLayout>
    );
  }

  if (!order) {
    return (
      <DashboardLayout title="Order Not Found" subtitle="The requested order could not be located">
        <div className="flex flex-col items-center justify-center min-h-[40vh] space-y-4">
          <p className="text-muted-foreground">This order may have been deleted or the link is invalid.</p>
          <Button variant="outline" onClick={() => navigate("/orders")}>
            Back to Orders
          </Button>
        </div>
      </DashboardLayout>
    );
  }

  const isClient = user?.userRole === "client";

  const clientName = order.business?.businessName || "Unknown client";
  const eventDateLabel = safeFormatDate(order.date as string | null);
  const locationLabel = order.business?.businessName || "—";

  const timelineItems = [
    {
      label: "Order created",
      value: safeFormatDateTime(order.createdAt as string | null),
    },
    {
      label: "Event date",
      value: eventDateLabel,
    },
    {
      label: "Current status",
      value: (order.status as string) || "—",
    },
  ];

  return (
    <DashboardLayout
      title={order.eventName || "Order Detail"}
      subtitle="Detailed view of this order and its shifts"
      actions={
        <div className="flex items-center gap-3">
          {getStatusBadge(order.status as OrderStatus)}
          <Button
            variant="outline"
            size="sm"
            onClick={handleEdit}
            disabled={!canModify || !isClient}
            className="rounded-xl"
          >
            <Edit3 className="w-4 h-4 mr-2" />
            Edit
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={handleDuplicate}
            className="rounded-xl"
          >
            <Copy className="w-4 h-4 mr-2" />
            Duplicate
          </Button>
          <Button
            variant="destructive"
            size="sm"
            onClick={handleCancel}
            disabled={!canModify || cancelMutation.isPending}
            className="rounded-xl"
          >
            <X className="w-4 h-4 mr-2" />
            {cancelMutation.isPending ? "Cancelling..." : "Cancel Order"}
          </Button>
        </div>
      }
    >
      <div className="space-y-6">
        {/* Header / Key Info */}
        <Card className="bg-card border-border/50 shadow-sm">
          <CardHeader className="border-b border-border/40">
            <CardTitle className="text-lg font-bold text-primary-text">Order Overview</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
                  <FileText className="w-6 h-6 text-primary" />
                </div>
                <div>
                  <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                    Client Name
                  </p>
                  <p className="font-bold text-primary-text">{clientName}</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
                  <Calendar className="w-6 h-6 text-blue-600" />
                </div>
                <div>
                  <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                    Event Date
                  </p>
                  <p className="font-bold text-primary-text">{eventDateLabel}</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center border border-purple-500/20">
                  <MapPin className="w-6 h-6 text-purple-600" />
                </div>
                <div>
                  <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                    Location
                  </p>
                  <p className="font-bold text-primary-text">{locationLabel}</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-emerald-500/10 rounded-xl flex items-center justify-center border border-emerald-500/20">
                  <Users className="w-6 h-6 text-emerald-600" />
                </div>
                <div>
                  <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                    Staffed / Requested
                  </p>
                  <p className="font-bold text-primary-text">
                    {totalAssigned} / {totalRequested}
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Shifts Section */}
        <Card className="bg-card border-border/50 shadow-sm">
          <CardHeader className="border-b border-border/40">
            <CardTitle className="text-lg font-bold text-primary-text">Shifts</CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            {shifts.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-10 text-center text-muted-foreground">
                <Users className="w-10 h-10 mb-3 text-muted-foreground/40" />
                <p className="font-medium">No shifts defined for this order.</p>
                <p className="text-sm">
                  Add shifts when creating or editing the order to see them here.
                </p>
              </div>
            ) : (
              <div className="space-y-3">
                {shifts.map((shift: any, index: number) => {
                  const start = safeFormatDateTime(shift.startTime || shift.start || shift.date);
                  const end = safeFormatDateTime(shift.endTime || shift.end);
                  const title = shift.title || shift.positionName || shift.roleName || `Shift #${index + 1}`;
                  const workersNeeded = shift.workersNeeded ?? shift.requested ?? 0;
                  const filled =
                    typeof shift.filled === "number"
                      ? shift.filled
                      : Array.isArray(shift.assignedStaff)
                      ? shift.assignedStaff.length
                      : 0;
                  const vacancies = Math.max(workersNeeded - filled, 0);

                  return (
                    <div
                      key={index}
                      className="flex flex-col md:flex-row md:items-center justify-between gap-3 border border-border/60 rounded-xl px-4 py-3 bg-background/40"
                    >
                      <div className="space-y-1">
                        <p className="font-semibold text-primary-text">{title}</p>
                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
                          <Clock className="w-3.5 h-3.5" />
                          <span>
                            {start} {end !== "—" && `→ ${end}`}
                          </span>
                        </div>
                      </div>

                      <div className="flex items-center gap-4 text-sm">
                        <div className="flex flex-col items-start">
                          <span className="text-xs text-muted-foreground uppercase tracking-wide">
                            Required
                          </span>
                          <span className="font-semibold">{workersNeeded || "—"}</span>
                        </div>
                        <div className="flex flex-col items-start">
                          <span className="text-xs text-muted-foreground uppercase tracking-wide">
                            Assigned
                          </span>
                          <span className="font-semibold">{filled}</span>
                        </div>
                        <div className="flex flex-col items-start">
                          <span className="text-xs text-muted-foreground uppercase tracking-wide">
                            Vacancies
                          </span>
                          <span className="font-semibold">{vacancies}</span>
                        </div>
                        
                        {!isClient && canModify && (
                          <Button 
                            variant="ghost" 
                            size="sm"
                            className="ml-2 text-primary hover:text-primary hover:bg-primary/10 rounded-lg h-8 px-2"
                            onClick={() => {
                              setSelectedShift(shift);
                              setIsAssignModalOpen(true);
                            }}
                          >
                            <UserPlus className="w-4 h-4 mr-1.5" />
                            Assign
                          </Button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Timeline Section */}
        <Card className="bg-card border-border/50 shadow-sm">
          <CardHeader className="border-b border-border/40">
            <CardTitle className="text-lg font-bold text-primary-text">
              Order Status Timeline
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="relative pl-4 border-l border-border/70 space-y-5">
              {timelineItems.map((item, idx) => (
                <div key={idx} className="relative flex flex-col gap-1">
                  <div className="absolute -left-[9px] top-1 w-4 h-4 rounded-full border-2 border-primary bg-background" />
                  <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                    {item.label}
                  </p>
                  <p className="text-sm font-medium text-primary-text">{item.value}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Financial Summary (optional helper, derived from existing fields) */}
        <Card className="bg-card border-border/50 shadow-sm">
          <CardHeader className="border-b border-border/40">
            <CardTitle className="text-lg font-bold text-primary-text">Summary</CardTitle>
          </CardHeader>
          <CardContent className="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-amber-500/10 rounded-xl flex items-center justify-center border border-amber-500/20">
                <DollarSign className="w-6 h-6 text-amber-600" />
              </div>
              <div>
                <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                  Estimated Total
                </p>
                <p className="font-bold text-primary-text">
                  {typeof order.total === "number" ? `$${order.total.toLocaleString()}` : "—"}
                </p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-slate-500/10 rounded-xl flex items-center justify-center border border-slate-500/20">
                <Users className="w-6 h-6 text-slate-700" />
              </div>
              <div>
                <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                  Total Positions
                </p>
                <p className="font-bold text-primary-text">{totalRequested}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20">
                <Clock className="w-6 h-6 text-primary" />
              </div>
              <div>
                <p className="text-xs text-secondary-text font-medium uppercase tracking-wider">
                  Order Type
                </p>
                <p className="font-bold text-primary-text">
                  {(order.orderType as string)?.replace("_", " ") || "—"}
                </p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {selectedShift && (
        <AssignStaffModal
          isOpen={isAssignModalOpen}
          onClose={() => {
            setIsAssignModalOpen(false);
            setSelectedShift(null);
          }}
          shift={selectedShift}
          onSuccess={() => {
            refetchShifts();
          }}
        />
      )}
    </DashboardLayout>
  );
}