"use client";

import React, { useEffect, useState, useMemo } from "react";
import DashboardLayout from "@/app/dashboard/layout";
import apis, { BUCKET_ROOT } from "@/utils/apis";
import dayjs from "dayjs";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationEllipsis,
} from "@/components/ui/pagination";
import { useGlobalContext } from "@/context/Provider";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import {
  Truck,
  User,
  Phone,
  Mail,
  Search,
  Star,
  CheckCircle2,
  XCircle,
  ShieldCheck,
  LayoutGrid,
  List,
  Eye,
  BadgeCheck,
  MapPin,
  Calendar,
  Navigation,
  Trash2,
  AlertTriangle,
  Loader2
} from "lucide-react";

interface VehicleType {
  _id: string;
  name: string;
  created_at?: number;
  updated_at?: number | null;
}

interface DriverItem {
  _id: string;
  name: string;
  email: string;
  country_code: string;
  phone: string;
  image?: string | null;
  formatted_address?: string;
  latitude?: string;
  longitude?: string;
  status: "online" | "offline" | string;
  ride_status?: string;
  is_active: boolean;
  is_approved: boolean;
  verification?: string;
  ratings?: number;
  preferred_currency?: string;
  currency_symbol?: string;
  created_at?: number;
  createdAt?: string;
  vehicle_id?: VehicleType | null;
}

const getPaginationRange = (
  currentPage: number,
  totalPages: number,
  siblingCount = 1
) => {
  const totalPageNumbers = siblingCount * 2 + 5;
  if (totalPages <= totalPageNumbers)
    return Array.from({ length: totalPages }, (_, i) => i + 1);

  const leftSiblingIndex = Math.max(currentPage - siblingCount, 2);
  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - 1);

  const shouldShowLeftEllipsis = leftSiblingIndex > 2;
  const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;

  const range: (number | "...")[] = [1];

  if (shouldShowLeftEllipsis) range.push("...");

  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) range.push(i);

  if (shouldShowRightEllipsis) range.push("...");

  range.push(totalPages);
  return range;
};

const DriversContent = () => {
  const { Toast } = useGlobalContext();

  const [drivers, setDrivers] = useState<DriverItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [debouncedSearch, setDebouncedSearch] = useState("");
  const [viewMode, setViewMode] = useState<"grid" | "table">("grid");
  const [selectedDriver, setSelectedDriver] = useState<DriverItem | null>(null);
  const [driverToDelete, setDriverToDelete] = useState<DriverItem | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [pageNumber, setPageNumber] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [totalCount, setTotalCount] = useState(0);

  const limit = 8;

  // Handle debounced search input
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedSearch(searchQuery);
      setPageNumber(1);
    }, 400);
    return () => clearTimeout(handler);
  }, [searchQuery]);

  const fetchDrivers = async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams();
      if (debouncedSearch) {
        params.append("search", debouncedSearch);
      }
      params.append("page", String(pageNumber));
      params.append("limit", String(limit));

      const queryStr = params.toString();
      const res = await apis.Driver.getDriversList(queryStr);

      const rawData = res?.data || (Array.isArray(res) ? res : res?.list || res?.drivers || []);
      const total = res?.total || res?.count || rawData.length || 0;

      setDrivers(rawData);
      setTotalCount(total);
      setTotalPages(Math.ceil(total / limit) || 1);
    } catch (error: any) {
      console.error("Error fetching drivers list:", error);
      Toast.error(error?.message || "Failed to load drivers list");
      setDrivers([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDrivers();
  }, [debouncedSearch, pageNumber]);

  const handleRemoveDriver = async () => {
    if (!driverToDelete) return;
    setDeleting(true);
    try {
      await apis.Driver.removeDriver(driverToDelete._id);
      Toast.success("Driver removed successfully!");
      if (selectedDriver?._id === driverToDelete._id) {
        setSelectedDriver(null);
      }
      setDriverToDelete(null);
      fetchDrivers();
    } catch (error: any) {
      console.error("Error removing driver:", error);
      Toast.error(error?.message || "Failed to remove driver");
    } finally {
      setDeleting(false);
    }
  };

  const getDriverName = (driver: DriverItem) => driver.name || "Driver";

  const getDriverPhone = (driver: DriverItem) => {
    if (!driver.phone) return "N/A";
    const code = driver.country_code ? (driver.country_code.startsWith("+") ? driver.country_code : `+${driver.country_code}`) : "";
    return `${code} ${driver.phone}`.trim();
  };

  const getDriverImage = (driver: DriverItem) => {
    if (!driver.image) return null;
    return driver.image.startsWith("http") ? driver.image : `${BUCKET_ROOT}${driver.image}`;
  };

  const isDriverOnline = (driver: DriverItem) => {
    return driver.status?.toLowerCase() === "online";
  };

  const getVehicleName = (driver: DriverItem) => {
    return driver.vehicle_id?.name || "Delivery Vehicle";
  };

  return (
    <div className="overflow-y-auto h-screen w-full flex flex-col bg-gray-50/60 p-6 pb-28">
      {/* Header Title Section */}
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Working Drivers</h1>
          </div>
          <p className="text-sm text-gray-500 mt-1">
            Delivery partners working with your store.
          </p>
        </div>

        <div className="flex items-center gap-3 w-full md:w-auto">
          <div className="flex items-center bg-white border border-gray-200 rounded-lg p-1 shadow-xs">
            <button
              onClick={() => setViewMode("grid")}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === "grid"
                  ? "bg-gray-100 text-gray-900 font-medium"
                  : "text-gray-400 hover:text-gray-600"
              }`}
              title="Grid View"
            >
              <LayoutGrid className="w-4 h-4" />
            </button>
            <button
              onClick={() => setViewMode("table")}
              className={`p-1.5 rounded-md transition-colors ${
                viewMode === "table"
                  ? "bg-gray-100 text-gray-900 font-medium"
                  : "text-gray-400 hover:text-gray-600"
              }`}
              title="Table View"
            >
              <List className="w-4 h-4" />
            </button>
          </div>
        </div>
      </div>

      {/* Search Bar */}
      <div className="bg-white border border-gray-200 rounded-2xl p-4 mb-6 shadow-xs flex flex-col md:flex-row items-center justify-between gap-4">
        <div className="relative w-full md:w-80">
          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            placeholder="Search driver by name or phone..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--orange-500)]/20 focus:border-[var(--orange-500)] bg-gray-50/50"
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery("")}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-gray-400 hover:text-gray-600 bg-gray-200 rounded-full w-4 h-4 flex items-center justify-center"
            >
              ×
            </button>
          )}
        </div>
      </div>

      {/* Driver Cards / Table Content */}
      {loading ? (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {[...Array(8)].map((_, i) => (
            <div
              key={i}
              className="bg-white rounded-2xl p-5 border border-gray-100 shadow-xs animate-pulse flex flex-col gap-4"
            >
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 bg-gray-200 rounded-full" />
                <div className="space-y-2 flex-1">
                  <div className="h-4 bg-gray-200 rounded w-3/4" />
                  <div className="h-3 bg-gray-200 rounded w-1/2" />
                </div>
              </div>
              <div className="space-y-2 pt-2 border-t border-gray-100">
                <div className="h-3 bg-gray-200 rounded w-full" />
                <div className="h-3 bg-gray-200 rounded w-4/5" />
              </div>
              <div className="h-9 bg-gray-200 rounded-xl w-full mt-2" />
            </div>
          ))}
        </div>
      ) : drivers.length > 0 ? (
        viewMode === "grid" ? (
          /* Grid Card View */
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {drivers.map((driver) => {
              const driverName = getDriverName(driver);
              const driverPhone = getDriverPhone(driver);
              const driverImg = getDriverImage(driver);
              const online = isDriverOnline(driver);
              const vehicleName = getVehicleName(driver);
              const rating = driver.ratings || 0;

              return (
                <div
                  key={driver._id}
                  className="bg-white border border-gray-200/90 hover:border-[var(--orange-500)]/40 rounded-2xl p-5 shadow-xs hover:shadow-md transition-all flex flex-col justify-between group"
                >
                  <div>
                    {/* Header Image & Status */}
                    <div className="flex items-start justify-between mb-4">
                      <div className="relative">
                        {driverImg ? (
                          <img
                            src={driverImg}
                            alt={driverName}
                            className="w-14 h-14 rounded-2xl object-cover border-2 border-gray-100 shadow-xs"
                          />
                        ) : (
                          <div className="w-14 h-14 rounded-2xl bg-orange-100 text-[var(--orange-500)] font-bold text-lg flex items-center justify-center border-2 border-gray-100">
                            {driverName.charAt(0).toUpperCase()}
                          </div>
                        )}
                        <span
                          className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
                            online ? "bg-emerald-500" : "bg-gray-400"
                          }`}
                        />
                      </div>

                      <div className="flex flex-col items-end gap-1">
                        <span
                          className={`text-[11px] font-semibold px-2.5 py-1 rounded-full border flex items-center gap-1 ${
                            online
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : "bg-gray-50 text-gray-600 border-gray-200"
                          }`}
                        >
                          <span
                            className={`w-1.5 h-1.5 rounded-full ${
                              online ? "bg-emerald-500 animate-pulse" : "bg-gray-400"
                            }`}
                          />
                          {online ? "Online" : "Offline"}
                        </span>
                        {driver.ride_status && (
                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-md bg-blue-50 text-blue-600 border border-blue-100 capitalize">
                            {driver.ride_status}
                          </span>
                        )}
                      </div>
                    </div>

                    {/* Driver Name & Verification */}
                    <div className="mb-3">
                      <div className="flex items-center justify-between">
                        <h3 className="font-bold text-gray-900 text-base group-hover:text-[var(--orange-500)] transition-colors truncate">
                          {driverName}
                        </h3>
                        {driver.verification === "APPROVED" && (
                          <BadgeCheck className="w-4 h-4 text-blue-500 flex-shrink-0 ml-1" />
                        )}
                      </div>
                      <div className="flex items-center gap-2 mt-1">
                        <div className="flex items-center text-amber-500 font-semibold text-xs bg-amber-50 px-2 py-0.5 rounded-md">
                          <Star className="w-3 h-3 fill-amber-400 text-amber-400 mr-1" />
                          {Number(rating).toFixed(1)}
                        </div>
                        {driver.formatted_address && (
                          <>
                            <span className="text-xs text-gray-400">•</span>
                            <span className="text-xs text-gray-500 font-medium truncate max-w-[120px]">
                              {driver.formatted_address}
                            </span>
                          </>
                        )}
                      </div>
                    </div>

                    {/* Contact & Vehicle Details */}
                    <div className="space-y-2 py-3 border-t border-gray-100 text-xs">
                      <div className="flex items-center gap-2 text-gray-600">
                        <Phone className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                        <span className="truncate font-medium">{driverPhone}</span>
                      </div>
                      <div className="flex items-center gap-2 text-gray-600">
                        <Mail className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                        <span className="truncate font-medium">{driver.email}</span>
                      </div>
                      <div className="flex items-center gap-2 text-gray-600">
                        <Truck className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" />
                        <span className="truncate font-medium capitalize">
                          {vehicleName}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Actions */}
                  <div className="mt-4 pt-3 border-t border-gray-100 flex items-center gap-2">
                    <Button
                      onClick={() => setSelectedDriver(driver)}
                      variant="outline"
                      size="sm"
                      className="flex-1 flex items-center justify-center gap-1.5 border-gray-200 text-gray-700 hover:text-[var(--orange-500)] hover:border-[var(--orange-500)]/40 hover:bg-orange-50/50 rounded-xl text-xs font-semibold h-9"
                    >
                      <Eye className="w-3.5 h-3.5" />
                      <span>View Profile</span>
                    </Button>
                    <Button
                      onClick={() => setDriverToDelete(driver)}
                      variant="outline"
                      size="sm"
                      className="border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300 rounded-xl h-9 px-3"
                      title="Remove Driver"
                    >
                      <Trash2 className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          /* Table View */
          <div className="bg-white border border-gray-200 rounded-2xl shadow-xs overflow-hidden">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-sm text-gray-600">
                <thead className="bg-gray-50/80 text-xs uppercase font-semibold text-gray-500 border-b border-gray-200">
                  <tr>
                    <th className="px-6 py-3.5">Driver</th>
                    <th className="px-6 py-3.5">Contact</th>
                    <th className="px-6 py-3.5">Vehicle</th>
                    <th className="px-6 py-3.5">Location</th>
                    <th className="px-6 py-3.5">Status</th>
                    <th className="px-6 py-3.5">Rating</th>
                    <th className="px-6 py-3.5 text-right">Action</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {drivers.map((driver) => {
                    const driverName = getDriverName(driver);
                    const driverPhone = getDriverPhone(driver);
                    const driverImg = getDriverImage(driver);
                    const online = isDriverOnline(driver);
                    const vehicleName = getVehicleName(driver);

                    return (
                      <tr key={driver._id} className="hover:bg-gray-50/60 transition-colors">
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-3">
                            {driverImg ? (
                              <img
                                src={driverImg}
                                alt={driverName}
                                className="w-10 h-10 rounded-full object-cover border border-gray-200"
                              />
                            ) : (
                              <div className="w-10 h-10 rounded-full bg-orange-100 text-[var(--orange-500)] font-bold text-sm flex items-center justify-center">
                                {driverName.charAt(0).toUpperCase()}
                              </div>
                            )}
                            <div>
                              <p className="font-bold text-gray-900 text-sm leading-tight">
                                {driverName}
                              </p>
                              <p className="text-xs text-gray-400 mt-0.5">
                                {driver.email}
                              </p>
                            </div>
                          </div>
                        </td>

                        <td className="px-6 py-4">
                          <span className="font-medium text-gray-700 text-xs">{driverPhone}</span>
                        </td>

                        <td className="px-6 py-4">
                          <span className="font-medium text-gray-800 text-xs capitalize">{vehicleName}</span>
                        </td>

                        <td className="px-6 py-4">
                          <span className="text-xs text-gray-500 truncate max-w-[160px] block">
                            {driver.formatted_address || "N/A"}
                          </span>
                        </td>

                        <td className="px-6 py-4">
                          <span
                            className={`inline-flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1 rounded-full border ${
                              online
                                ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                                : "bg-gray-50 text-gray-600 border-gray-200"
                            }`}
                          >
                            <span
                              className={`w-1.5 h-1.5 rounded-full ${
                                online ? "bg-emerald-500 animate-pulse" : "bg-gray-400"
                              }`}
                            />
                            {online ? "Online" : "Offline"}
                          </span>
                        </td>

                        <td className="px-6 py-4">
                          <div className="flex items-center text-amber-500 font-semibold text-xs">
                            <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400 mr-1" />
                            {Number(driver.ratings || 0).toFixed(1)}
                          </div>
                        </td>

                        <td className="px-6 py-4 text-right">
                          <div className="flex items-center justify-end gap-1">
                            <Button
                              onClick={() => setSelectedDriver(driver)}
                              variant="ghost"
                              size="sm"
                              className="text-gray-600 hover:text-[var(--orange-500)] hover:bg-orange-50 rounded-lg text-xs"
                            >
                              <Eye className="w-4 h-4 mr-1" /> Details
                            </Button>
                            <Button
                              onClick={() => setDriverToDelete(driver)}
                              variant="ghost"
                              size="sm"
                              className="text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg text-xs"
                              title="Remove Driver"
                            >
                              <Trash2 className="w-4 h-4" />
                            </Button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )
      ) : (
        /* Empty State */
        <div className="flex flex-col justify-center items-center text-gray-500 py-20 bg-white rounded-2xl border border-dashed border-gray-200 shadow-xs flex-1">
          <div className="w-16 h-16 bg-orange-50 text-[var(--orange-500)] rounded-full flex items-center justify-center mb-4">
            <Truck className="w-8 h-8" />
          </div>
          <p className="text-lg font-bold text-gray-900">No working drivers found</p>
          <p className="text-sm text-gray-400 mt-1 max-w-sm text-center">
            {searchQuery
              ? `No driver matching "${searchQuery}". Try searching with a different keyword.`
              : "No delivery drivers assigned or associated with your store currently."}
          </p>
          {searchQuery && (
            <Button
              onClick={() => setSearchQuery("")}
              variant="outline"
              size="sm"
              className="mt-4 border-gray-200 text-gray-700"
            >
              Clear Search
            </Button>
          )}
        </div>
      )}

      {/* Pagination Controls */}
      {!loading && totalPages > 1 && (
        <div className="mt-6 flex justify-center bg-white py-3 border border-gray-100 rounded-xl shadow-xs">
          <Pagination>
            <PaginationPrevious
              onClick={() => setPageNumber((prev) => Math.max(prev - 1, 1))}
              className="cursor-pointer"
            >
              Previous
            </PaginationPrevious>
            <PaginationContent>
              {getPaginationRange(pageNumber, totalPages).map((p, i) => (
                <PaginationItem key={i}>
                  {p === "..." ? (
                    <PaginationEllipsis />
                  ) : (
                    <PaginationLink
                      isActive={pageNumber === p}
                      onClick={() => setPageNumber(Number(p))}
                      className="cursor-pointer"
                    >
                      {p}
                    </PaginationLink>
                  )}
                </PaginationItem>
              ))}
            </PaginationContent>
            <PaginationNext
              onClick={() => setPageNumber((prev) => Math.min(prev + 1, totalPages))}
              className="cursor-pointer"
            >
              Next
            </PaginationNext>
          </Pagination>
        </div>
      )}

      {/* Driver Detail Modal Dialog */}
      <Dialog open={!!selectedDriver} onOpenChange={() => setSelectedDriver(null)}>
        <DialogContent className="max-w-md bg-white p-6 rounded-2xl border border-gray-100 shadow-xl">
          <DialogHeader>
            <DialogTitle className="text-lg font-bold text-gray-900 border-b border-gray-100 pb-3">
              Driver Details
            </DialogTitle>
          </DialogHeader>

          {selectedDriver && (
            <div className="space-y-5 pt-2">
              {/* Profile Card Header */}
              <div className="flex items-center gap-4 bg-gray-50 p-4 rounded-2xl border border-gray-100">
                {getDriverImage(selectedDriver) ? (
                  <img
                    src={getDriverImage(selectedDriver)!}
                    alt={getDriverName(selectedDriver)}
                    className="w-16 h-16 rounded-2xl object-cover border-2 border-white shadow-xs"
                  />
                ) : (
                  <div className="w-16 h-16 rounded-2xl bg-orange-100 text-[var(--orange-500)] font-bold text-xl flex items-center justify-center border-2 border-white">
                    {getDriverName(selectedDriver).charAt(0).toUpperCase()}
                  </div>
                )}
                <div>
                  <h3 className="font-bold text-gray-900 text-base flex items-center gap-1.5">
                    {getDriverName(selectedDriver)}
                    {selectedDriver.verification === "APPROVED" && (
                      <BadgeCheck className="w-4 h-4 text-blue-500" />
                    )}
                  </h3>
                  <div className="flex items-center gap-2 mt-1">
                    <span
                      className={`text-[11px] font-semibold px-2 py-0.5 rounded-full border ${
                        isDriverOnline(selectedDriver)
                          ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                          : "bg-gray-100 text-gray-600 border-gray-200"
                      }`}
                    >
                      {isDriverOnline(selectedDriver) ? "Online" : "Offline"}
                    </span>
                    <div className="flex items-center text-amber-500 font-semibold text-xs">
                      <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400 mr-0.5" />
                      {Number(selectedDriver.ratings || 0).toFixed(1)}
                    </div>
                  </div>
                </div>
              </div>

              {/* Contact Information */}
              <div className="space-y-3">
                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
                  Contact Information
                </h4>
                <div className="bg-white border border-gray-100 rounded-xl p-3 space-y-2.5 text-xs text-gray-700">
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2 text-gray-500">
                      <Phone className="w-3.5 h-3.5 text-gray-400" /> Phone Number
                    </span>
                    <span className="font-semibold text-gray-900">{getDriverPhone(selectedDriver)}</span>
                  </div>
                  <div className="flex items-center justify-between border-t border-gray-50 pt-2">
                    <span className="flex items-center gap-2 text-gray-500">
                      <Mail className="w-3.5 h-3.5 text-gray-400" /> Email Address
                    </span>
                    <span className="font-semibold text-gray-900 truncate max-w-[180px]">
                      {selectedDriver.email}
                    </span>
                  </div>
                  {selectedDriver.formatted_address && (
                    <div className="flex items-center justify-between border-t border-gray-50 pt-2">
                      <span className="flex items-center gap-2 text-gray-500">
                        <MapPin className="w-3.5 h-3.5 text-gray-400" /> Address
                      </span>
                      <span className="font-semibold text-gray-900 truncate max-w-[200px]">
                        {selectedDriver.formatted_address}
                      </span>
                    </div>
                  )}
                </div>
              </div>

              {/* Vehicle & Verification Details */}
              <div className="space-y-3">
                <h4 className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
                  Vehicle & Status
                </h4>
                <div className="bg-white border border-gray-100 rounded-xl p-3 space-y-2.5 text-xs text-gray-700">
                  <div className="flex items-center justify-between">
                    <span className="flex items-center gap-2 text-gray-500">
                      <Truck className="w-3.5 h-3.5 text-gray-400" /> Vehicle Type
                    </span>
                    <span className="font-semibold text-gray-900 capitalize">
                      {getVehicleName(selectedDriver)}
                    </span>
                  </div>
                  <div className="flex items-center justify-between border-t border-gray-50 pt-2">
                    <span className="flex items-center gap-2 text-gray-500">
                      <Navigation className="w-3.5 h-3.5 text-gray-400" /> Duty / Ride Status
                    </span>
                    <span className="font-semibold text-gray-900 capitalize">
                      {selectedDriver.ride_status || "Free"}
                    </span>
                  </div>
                  <div className="flex items-center justify-between border-t border-gray-50 pt-2">
                    <span className="flex items-center gap-2 text-gray-500">
                      <ShieldCheck className="w-3.5 h-3.5 text-gray-400" /> Verification
                    </span>
                    <span className="font-semibold text-emerald-600">
                      {selectedDriver.verification || "APPROVED"}
                    </span>
                  </div>
                  {(selectedDriver.createdAt || selectedDriver.created_at) && (
                    <div className="flex items-center justify-between border-t border-gray-50 pt-2">
                      <span className="flex items-center gap-2 text-gray-500">
                        <Calendar className="w-3.5 h-3.5 text-gray-400" /> Joined Date
                      </span>
                      <span className="font-semibold text-gray-900">
                        {dayjs(selectedDriver.createdAt || selectedDriver.created_at).format("DD MMM YYYY")}
                      </span>
                    </div>
                  )}
                </div>
              </div>

              {/* Action Buttons */}
              <div className="pt-3 flex items-center gap-3">
                <Button
                  onClick={() => {
                    setDriverToDelete(selectedDriver);
                  }}
                  variant="outline"
                  className="flex-1 border-red-200 text-red-600 hover:bg-red-50 hover:border-red-300 h-10 rounded-xl text-xs font-semibold"
                >
                  <Trash2 className="w-3.5 h-3.5 mr-1.5" /> Remove Driver
                </Button>
                <Button
                  onClick={() => setSelectedDriver(null)}
                  className="flex-1 bg-gray-900 text-white hover:bg-gray-800 h-10 rounded-xl text-xs font-semibold"
                >
                  Close
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      {/* Confirm Deletion Modal Dialog */}
      <Dialog open={!!driverToDelete} onOpenChange={() => !deleting && setDriverToDelete(null)}>
        <DialogContent className="max-w-sm bg-white p-6 rounded-2xl border border-gray-100 shadow-xl text-center">
          <div className="w-12 h-12 rounded-2xl bg-red-50 text-red-500 flex items-center justify-center mx-auto mb-3">
            <AlertTriangle className="w-6 h-6" />
          </div>
          <h3 className="text-base font-bold text-gray-900">Remove Driver</h3>
          <p className="text-xs text-gray-500 mt-1">
            Are you sure you want to remove <span className="font-bold text-gray-800">{driverToDelete && getDriverName(driverToDelete)}</span> from working with your store?
          </p>

          <div className="flex items-center gap-3 mt-5">
            <Button
              onClick={() => setDriverToDelete(null)}
              disabled={deleting}
              variant="outline"
              className="flex-1 border-gray-200 text-gray-700 h-9 rounded-xl text-xs font-semibold"
            >
              Cancel
            </Button>
            <Button
              onClick={handleRemoveDriver}
              disabled={deleting}
              className="flex-1 bg-red-600 hover:bg-red-700 text-white h-9 rounded-xl text-xs font-semibold flex items-center justify-center gap-1.5"
            >
              {deleting ? (
                <>
                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
                  <span>Removing...</span>
                </>
              ) : (
                <span>Confirm</span>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default function DriversPage() {
  return (
    <DashboardLayout>
      <DriversContent />
    </DashboardLayout>
  );
}