"use client";

import React, { useState, useEffect, useCallback } from "react";
import DataTable from "react-data-table-component";
import axiosInstance from "@/lib/axios";
import { Modal } from "@/components/common/modal";
import { toast } from "react-toastify";
import { useAppSelector } from "@/store/hooks";

import {
  FolderKanban,
  CheckCircle2,
  Clock3,
  ArrowUp,
  ArrowDown,
  Eye,
  Trash2,
  ChevronDown,
  CircleCheckBig,
  CalendarRange,
  ListTodo,
  Users,
  Flag,
  X,
} from "lucide-react";

export default function Dashboard() {
  const user = useAppSelector((state) => state.auth.user);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [currentPage, setCurrentPage] = useState(1);
  const [dashboardData, setDashboardData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [selectedProject, setSelectedProject] = useState<any>(null);

  const fetchStats = useCallback(async () => {
    try {
      const response = await axiosInstance.get(`/api/dashboard/stats?page=${currentPage}&limit=${rowsPerPage}`);
      setDashboardData(response.data.data);
    } catch (error) {
      console.error("Failed to fetch dashboard stats", error);
    } finally {
      setLoading(false);
    }
  }, [currentPage, rowsPerPage]);

  useEffect(() => {
    fetchStats();
  }, [fetchStats]);

  const getStatusColor = (status: string) => {
    switch (status?.toLowerCase()) {
      case 'active':
      case 'in progress':
        return 'bg-green-100 text-green-700';
      case 'completed':
        return 'bg-blue-100 text-blue-700';
      case 'on hold':
      case 'delayed':
        return 'bg-red-100 text-red-700';
      default:
        return 'bg-gray-100 text-gray-700';
    }
  };

  const renderTrendBadge = (trendValue: number | undefined) => {
    if (trendValue === undefined || trendValue === null) {
      return (
        <span className="flex items-center gap-1 bg-gray-100 border border-gray-200 text-gray-500 rounded-sm px-2 py-1 text-xs">
          0%
        </span>
      );
    }
    if (trendValue > 0) {
      return (
        <span className="flex items-center gap-1 bg-green-600/10 border border-green-600 text-green-600 rounded-sm px-2 py-1 text-xs">
          <ArrowUp className="h-4 w-4 text-green-600" />
          {trendValue}%
        </span>
      );
    } else if (trendValue < 0) {
      return (
        <span className="flex items-center gap-1 bg-red-600/10 border border-red-600 text-red-600 rounded-sm px-2 py-1 text-xs">
          <ArrowDown className="h-4 w-4 text-red-600" />
          {Math.abs(trendValue)}%
        </span>
      );
    } else {
      return (
        <span className="flex items-center gap-1 bg-gray-100 border border-gray-200 text-gray-500 rounded-sm px-2 py-1 text-xs">
          0%
        </span>
      );
    }
  };

  const handleView = (project: any) => {
    setSelectedProject(project);
    setIsViewModalOpen(true);
  };

  const confirmDelete = async () => {
    if (selectedProject) {
      try {
        await axiosInstance.delete(`/api/projects/${selectedProject._rawId}`);
        toast.success("Project deleted successfully");
        setIsDeleteModalOpen(false);
        fetchStats();
      } catch (error) {
        toast.error("Failed to delete project");
      }
    }
  };

  const columns = [
    {
      name: 'S.No.',
      width: "80px",
      cell: (row: any, index?: number) => (
        <div data-th="S.No." className="mobile-cell">
          <span className="text-gray-500">
            {(currentPage - 1) * rowsPerPage + (index !== undefined ? index : 0) + 1}
          </span>
        </div>
      )
    },
    {
      name: 'ID',
      selector: (row: any) => row.id,
      sortable: true,
      cell: (row: any) => <div data-th="ID" className="mobile-cell"><span className="text-gray-500">{row.id}</span></div>
    },
    {
      name: 'Project Name',
      selector: (row: any) => row.name,
      sortable: true,
      minWidth: "200px",
      cell: (row: any) => <div data-th="Project Name" className="mobile-cell"><span className="md:font-medium text-gray-600 md:text-gray-900">{row.name}</span></div>
    },
    {
      name: 'Client',
      selector: (row: any) => row.client,
      sortable: true,
      minWidth: "150px",
      cell: (row: any) => <div data-th="Client" className="mobile-cell"><span className="text-gray-600">{row.client}</span></div>
    },
    {
      name: 'Start Date',
      selector: (row: any) => row.start,
      sortable: true,
      minWidth: "140px",
      cell: (row: any) => <div data-th="Start Date" className="mobile-cell"><span className="text-gray-600">{row.start}</span></div>
    },
    {
      name: 'End Date',
      selector: (row: any) => row.end,
      sortable: true,
      minWidth: "140px",
      cell: (row: any) => <div data-th="End Date" className="mobile-cell"><span className="text-gray-600">{row.end}</span></div>
    },
    {
      name: 'Budget',
      selector: (row: any) => row.budget,
      sortable: true,
      minWidth: "120px",
      cell: (row: any) => <div data-th="Budget" className="mobile-cell"><span className="text-gray-600">{row.budget}</span></div>
    },
    {
      name: 'Status',
      selector: (row: any) => row.status,
      sortable: true,
      minWidth: "140px",
      cell: (row: any) => (
        <div data-th="Status" className="mobile-cell">
          <span className={`rounded-md px-3 py-1.5 text-sm font-normal ${getStatusColor(row.status)}`}>
            {row.status}
          </span>
        </div>
      )
    },
    {
      name: 'Action',
      center: true,
      minWidth: "140px",
      cell: (row: any) => (
        <div data-th="Action" className="mobile-cell w-full sm:w-auto">
          <div className="flex justify-start sm:justify-center gap-2">
            <span
              onClick={() => handleView(row)}
              className="cursor-pointer w-8 h-8 rounded-md bg-brand-950/10 flex items-center justify-center text-brand-950 hover:bg-brand-950 hover:text-white transition-colors"
            >
              <Eye size={18} />
            </span>
            {/* <span
              onClick={() => handleDeleteClick(row)}
              className="cursor-pointer w-8 h-8 rounded-md bg-red-500/20 flex items-center justify-center text-red-500 hover:bg-red-500 hover:text-white transition-colors"
            >
              <Trash2 size={16} />
            </span> */}
          </div>
        </div>
      )
    }
  ];

  const projectsData = dashboardData?.allProjects?.data?.map((p: any) => ({
    _rawId: p.id,
    _rawData: p,
    id: p.code || `#${p.id.substring(0, 5)}`,
    name: p.title,
    client: p.client?.name || 'N/A',
    start: p.startDate ? new Date(p.startDate).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : 'N/A',
    end: p.endDate ? new Date(p.endDate).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }) : 'N/A',
    budget: p.budget ? `${p.currency === 'USD' ? '$' : p.currency} ${p.budget}` : 'N/A',
    status: p.status,
  })) || [];

  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading dashboard...</div>;
  }

  return (
    <div>
      <div className="mx-auto max-w-[1500px] space-y-6">
        <h1 className="text-xl lg:text-2xl font-medium text-brand-950">Dashboard</h1>

        {/* Main Grid */}
        <div className="grid gap-6 xl:grid-cols-3">
          <div className="xl:col-span-2">
            <div className="rounded-xl bg-white p-6 shadow-theme-md space-y-6">
              <h2 className="mb-4 lg:mb-6 text-lg lg:text-xl font-medium text-brand-950">Project Overview</h2>
              <div className="grid gap-5 md:grid-cols-2">
                {/* Active Projects */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Active Projects</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.activeProjects || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#22C55E]/10`}>
                      <FolderKanban className="w-6 lg:w-8 h-6 lg:h-8 text-[#22C55E]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Projects this month</p>
                    {renderTrendBadge(dashboardData?.overview?.trends?.activeProjects)}
                  </div>
                </div>

                {/* Completed Projects */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Completed Projects</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.completedProjects || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#2563EB]/10`}>
                      <CircleCheckBig className="w-6 lg:w-8 h-6 lg:h-8 text-[#2563EB]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Projects this month</p>
                    {renderTrendBadge(dashboardData?.overview?.trends?.completedProjects)}
                  </div>
                </div>

                {/* Delayed Projects */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Delayed Projects</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.delayedProjects || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#EF4444]/10`}>
                      <Clock3 className="w-6 lg:w-8 h-6 lg:h-8 text-[#EF4444]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Projects this month</p>
                    {renderTrendBadge(dashboardData?.overview?.trends?.delayedProjects)}
                  </div>
                </div>

                {/* Active Sprints */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Active Sprints</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.activeSprints || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#8B5CF6]/10`}>
                      <CalendarRange className="w-6 lg:w-8 h-6 lg:h-8 text-[#8B5CF6]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Projects this month</p>
                    {renderTrendBadge(dashboardData?.overview?.trends?.activeSprints)}
                  </div>
                </div>

                {/* Pending Tasks */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Pending Tasks</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.pendingTasks || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#F59E0B]/10`}>
                      <ListTodo className="w-6 lg:w-8 h-6 lg:h-8 text-[#F59E0B]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Projects this month</p>
                    {renderTrendBadge(dashboardData?.overview?.trends?.pendingTasks)}
                  </div>
                </div>

                {/* Developer Workload */}
                {['admin', 'manager', 'team leader', 'team_leader'].some(r => user?.role?.toLowerCase().includes(r)) && (
                  <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                    <div className="flex items-center gap-2 justify-between">
                      <div>
                        <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Developer Workload</span>
                        <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.developerWorkload || 0}%</h3>
                      </div>
                      <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-cyan-100`}>
                        <Users className="w-6 lg:w-8 h-6 lg:h-8 text-cyan-600" />
                      </div>
                    </div>
                    <div className="mt-5">
                      <div className="mt-5 h-2.5 rounded-full bg-gray-200">
                        <div className="h-2.5 rounded-full bg-green-500" style={{ width: `${dashboardData?.overview?.developerWorkload || 0}%` }}></div>
                      </div>
                      <p className="mt-1 text-xs text-gray-500">
                        Average utilization: <b>{dashboardData?.overview?.developerWorkload || 0}%</b>
                      </p>
                    </div>
                  </div>
                )}

                {/* Upcoming Milestones */}
                <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                  <div className="flex items-center gap-2 justify-between">
                    <div>
                      <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Upcoming Milestones</span>
                      <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.upcomingMilestones || 0}</h3>
                    </div>
                    <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-[#f65cd1]/10`}>
                      <Flag className="w-6 lg:w-8 h-6 lg:h-8 text-[#f65cd1]" />
                    </div>
                  </div>
                  <div className="mt-5 flex items-center gap-2 justify-between">
                    <p className="text-sm text-gray-500">Due within next 30 days</p>
                  </div>
                </div>

                {/* Active Users */}
                {['admin', 'manager', 'team leader', 'team_leader'].some(r => user?.role?.toLowerCase().includes(r)) && (
                  <div className="p-4 border border-gray-200 rounded-lg lg:p-[23px] bg-gray-50">
                    <div className="flex items-center gap-2 justify-between">
                      <div>
                        <span className="mb-2 text-lg lg:text-xl text-gray-500 font-normal block">Active Users</span>
                        <h3 className="text-3xl font-semibold text-brand-950">{dashboardData?.overview?.activeUsers || 0}</h3>
                      </div>
                      <div className={`flex h-[60px] lg:h-[75px] w-[60px] lg:w-[75px] items-center justify-center rounded-full bg-indigo-100`}>
                        <Users className="w-6 lg:w-8 h-6 lg:h-8 text-indigo-600" />
                      </div>
                    </div>
                    <div className="mt-5 flex items-center gap-2 justify-between">
                      <p className="text-sm text-gray-500">Total active users</p>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Right Sidebar */}
          <div className="space-y-6">
            {/* Recent Activity */}
            <div className="rounded-xl bg-white p-6 shadow-theme-md">
              <h2 className="mb-4 lg:mb-6 text-lg lg:text-xl font-medium text-brand-950">Recent Activities</h2>
              <div className="my-8 flex justify-center">
                <div className="relative flex h-44 w-44 items-center justify-center rounded-full border-[18px] border-lime-400 border-t-[#2563EB] border-r-[#6B7280] border-b-[#F59E0B]">
                  <div className="text-center">
                    <h3 className="text-2xl font-semibold text-brand-950">{dashboardData?.activities?.totalTasks || 0}</h3>
                    <p className="text-gray-500 text-sm">Total Tasks</p>
                  </div>
                </div>
              </div>

              <div className="space-y-4">
                <div className="flex justify-between">
                  <span className="text-gray-500 text-sm relative pl-4 before:content-[''] before:bg-lime-400 before:w-1.5 before:h-1.5 before:rounded-full before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2">On Going</span>
                  <span className="font-semibold text-brand-950">{dashboardData?.activities?.onGoing || 0}</span>
                </div>

                <div className="flex justify-between">
                  <span className="text-gray-500 text-sm relative pl-4 before:content-[''] before:bg-[#2563EB] before:w-1.5 before:h-1.5 before:rounded-full before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2">Completed</span>
                  <span className="font-semibold text-brand-950">{dashboardData?.activities?.completed || 0}</span>
                </div>

                <div className="flex justify-between">
                  <span className="text-gray-500 text-sm relative pl-4 before:content-[''] before:bg-[#6B7280] before:w-1.5 before:h-1.5 before:rounded-full before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2">To Do</span>
                  <span className="font-semibold text-brand-950">{dashboardData?.activities?.toDo || 0}</span>
                </div>

                <div className="flex justify-between">
                  <span className="text-gray-500 text-sm relative pl-4 before:content-[''] before:bg-[#F59E0B] before:w-1.5 before:h-1.5 before:rounded-full before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2">Pending</span>
                  <span className="font-semibold text-brand-950">{dashboardData?.activities?.pending || 0}</span>
                </div>
              </div>
            </div>

            {/* Notifications */}
            {/* <div className="rounded-xl bg-white p-6 shadow-theme-md">
              <h2 className="mb-4 lg:mb-6 text-lg lg:text-xl font-medium text-brand-950">Recent Notifications</h2>
              <div className="space-y-3">
                {dashboardData?.recentNotifications?.map((item: any, index: number) => (
                  <div
                    key={index}
                    className="rounded-lg bg-gray-50 px-3 py-2.5 text-gray-500 text-sm"
                  >
                    {item.title}
                  </div>
                ))}
                {!dashboardData?.recentNotifications?.length && (
                  <div className="text-sm text-gray-400 italic">No recent notifications.</div>
                )}
              </div>
            </div> */}
          </div>
        </div>
        {/* All Projects
        <div className="rounded-xl bg-white p-6 shadow-theme-md">
          <div className="md:border border-gray-200 md:rounded-lg overflow-hidden">
            <div className="flex sm:items-center flex-col sm:flex-row gap-2 sm:justify-between md:border-b md:px-4 pb-4 md:py-4">
              <h2 className="text-lg lg:text-xl font-medium text-brand-950">All Projects</h2>
              <div className="hidden md:flex items-center gap-2">
                <span className="text-sm font-normal text-gray-500 block">Show</span>
                <div className="relative">
                  <select
                    value={rowsPerPage}
                    onChange={(e) => {
                      setRowsPerPage(Number(e.target.value));
                      setCurrentPage(1);
                    }}
                    className="w-full rounded-lg border appearance-none px-3 py-2 pr-8 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 border-gray-300 outline-none"
                  >
                    <option value={10}>10</option>
                    <option value={20}>20</option>
                    <option value={30}>30</option>
                    <option value={50}>50</option>
                  </select>
                  <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-2 top-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none">
                      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M4.792 7.396 10 12.604l5.208-5.208"></path>
                    </svg>
                  </span>
                </div>
                <span className="text-sm font-normal text-gray-500">entries</span>
              </div>
            </div>

            <div className="overflow-x-auto">
              <DataTable
                columns={columns}
                data={projectsData}
                progressPending={loading}
                pagination
                paginationServer
                paginationTotalRows={dashboardData?.allProjects?.meta?.total || 0}
                paginationPerPage={rowsPerPage}
                onChangePage={(page) => setCurrentPage(page)}
                paginationComponentOptions={{ noRowsPerPage: true }}
                customStyles={{
                  headRow: {
                    style: {
                      backgroundColor: '#ffffff',
                      color: '#1E293B',
                      fontWeight: 600,
                      fontSize: '14px',
                      borderBottom: '1px solid #F1F5F9',
                    },
                  },
                  rows: {
                    style: {
                      fontSize: '14px',
                      color: '#475569',
                      minHeight: '60px',
                      borderBottom: '1px solid #F1F5F9',
                    },
                  },
                }}
              />
            </div>
          </div>
        </div>
        */}
      </div>

      {/* View Project Modal */}
      {selectedProject && (
        <Modal isOpen={isViewModalOpen} onClose={() => setIsViewModalOpen(false)} className="max-w-[700px] m-4">
          <div className="no-scrollbar relative w-full max-w-[700px] rounded-3xl bg-white p-4 lg:p-8">
            <div className="px-2 pr-14">
              <h4 className="mb-2 text-xl lg:text-2xl font-semibold text-brand-950">
                {selectedProject.name}
              </h4>

            </div>

            <div className="px-2 space-y-6 lg:space-y-5">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                  <p className="mb-1.5 block text-sm font-normal text-gray-500">Status</p>
                  <p className={`font-medium ${selectedProject.status === "In Progress" ? "text-[#b446e5]" :
                    selectedProject.status === "Completed" ? "text-[#2563EB]" :
                      "text-[#9CA3AF]"
                    }`}>
                    {selectedProject.status}
                  </p>
                </div>
                <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
                  <p className="mb-1.5 block text-sm font-normal text-gray-500">Budget</p>
                  <p className="font-medium text-gray-800">{selectedProject.budget || "N/A"}</p>
                </div>
              </div>

              <div>
                <h5 className="mb-4 text-lg font-medium text-gray-800">Project Details</h5>
                <div className="bg-white border border-gray-200 rounded-lg p-4 space-y-4">
                  <div className="flex items-center gap-3">
                    <div>
                      <p className="text-sm text-gray-500 font-normal">Description</p>
                      <p className="text-sm font-medium text-gray-800 mt-1.5">{selectedProject._rawData?.description || "No description provided."}</p>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-4 pt-4 border-t border-gray-100">
                    <div>
                      <p className="mb-1.5 block text-sm font-normal text-gray-500">Start Date</p>
                      <p className="text-sm font-medium text-gray-800">{selectedProject.start || "N/A"}</p>
                    </div>
                    <div>
                      <p className="mb-1.5 block text-sm font-normal text-gray-500">End Date</p>
                      <p className="text-sm font-medium text-gray-800">{selectedProject.end || "N/A"}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <h5 className="mb-4 text-lg font-medium text-gray-800">Client Information</h5>
                <div className="bg-white border border-gray-200 rounded-lg p-4">
                  <p className="mb-1.5 block text-sm font-normal text-gray-500">Client</p>
                  <p className="text-sm font-medium text-gray-800">{selectedProject.client || "N/A"}</p>
                </div>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {/* Delete Project Modal */}
      <Modal isOpen={isDeleteModalOpen} onClose={() => setIsDeleteModalOpen(false)} showCloseButton={false} className="max-w-[450px] m-4">
        <div className="no-scrollbar relative w-full max-w-[700px] rounded-3xl bg-white p-4 lg:p-8">
          <div className="px-2 text-center">
            <h4 className="text-xl lg:text-2xl font-semibold text-brand-950 mb-2">
              Confirm Delete
            </h4>
            <p className="mb-6 text-sm text-gray-500 lg:mb-7">
              Are you sure you want to delete
              <span className="font-semibold pl-0.5">
                {selectedProject?.name}
              </span> ?
            </p>
          </div>
          <div className="flex items-center gap-3 mt-6 justify-center">
            <button
              type="button"
              onClick={() => setIsDeleteModalOpen(false)}
              className="flex items-center justify-center gap-2 rounded-lg border border-gray-300 bg-[#f7f8fa] px-4 py-3 text-sm font-medium text-gray-700 hover:bg-gray-100 transition-colors"
            >
              Cancel
            </button>
            <button
              type="button"
              onClick={confirmDelete}
              className="inline-flex items-center justify-center font-medium gap-2 rounded-lg transition px-4 py-3 text-sm bg-brand-950 text-white shadow-theme-xs hover:text-brand-950 hover:bg-yellow-500"
            >
              Delete
            </button>
          </div>
        </div>
      </Modal>

    </div>
  );
}