"use client";
import React, { useState, useEffect } from "react";
import { Plus, Search, Eye, Trash2, ChevronDown, ChevronLeft, ChevronRight, X, Pencil, Archive, Undo2 } from "lucide-react";
import { CalendarDaysIcon } from "@heroicons/react/24/outline";
import { User } from "@/types";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { addMember, deleteUser, updateMember, registerUser, fetchTeam, getMemberById, updateUser, archiveUserApi } from "@/store/slices/teamSlice";
import { fetchRoles } from "@/store/slices/roleSlice";
import { fetchSymbols } from "@/store/slices/symbolSlice";
import { useModal } from "@/hooks/useModal";
import { Modal } from "@/components/common/modal";
import DataTable from "react-data-table-component";
import { toast } from "react-toastify";

export default function TeamManagementPage() {
  const dispatch = useAppDispatch();
  const { members: team, isLoading, error, meta, selectedMember } = useAppSelector((state) => state.team);
  const { roles } = useAppSelector((state) => state.roles);
  const { symbols } = useAppSelector((state) => state.symbols);

  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);

  const [searchText, setSearchText] = useState("");
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);
  const [resetPaginationToggle, setResetPaginationToggle] = useState(false);
  const [isArchiveView, setIsArchiveView] = useState(false);
  const [isArchiveModalOpen, setIsArchiveModalOpen] = useState(false);
  const [userToArchive, setUserToArchive] = useState<User | null>(null);
  const [isUndoArchiveModalOpen, setIsUndoArchiveModalOpen] = useState(false);
  const [userToUndoArchive, setUserToUndoArchive] = useState<User | null>(null);

  // Form state for add/edit
  const { isOpen, openModal, closeModal } = useModal();
  const [formData, setFormData] = useState<Partial<User>>({});
  const [formErrors, setFormErrors] = useState<Record<string, string>>({});
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [userToDelete, setUserToDelete] = useState<User | null>(null);
  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    dispatch(fetchRoles({ limit: 100 }));
    dispatch(fetchSymbols({ isActive: true }));
  }, [dispatch]);

  useEffect(() => {
    const timer = setTimeout(() => {
      dispatch(
        fetchTeam({
          page: currentPage,
          limit: rowsPerPage,
          search: searchText,
          archived: isArchiveView
        })
      );
    }, 500);
    return () => clearTimeout(timer);
  }, [dispatch, currentPage, rowsPerPage, searchText, isArchiveView]);

  useEffect(() => {
    if (error) {
      toast.error(error);
    }
  }, [error]);

  const handleOpenModal = (user?: User) => {
    if (user) {
      setFormData(user);
    } else {
      setFormData({
        firstName: "",
        lastName: "",
        email: "",
        role: "",
        password: "",
        availability: "Full-time",
        status: "active",
        designation: "",
        experienceYears: 0,
        workingHoursPerDay: 8,
        availableHoursPerDay: 8,
        skills: [],
        joiningDate: "",
        notes: "",
        costPerHour: 0,
        billingRatePerHour: 0,
        currency: "₹",
        effectiveFrom: "",
        effectiveTo: ""
      });
    }
    openModal();
  };

  const handleCloseModal = () => {
    setFormData({});
    setFormErrors({});
    setShowPassword(false);
    closeModal();
  };

  const handleSaveUser = async (e: React.FormEvent) => {
    e.preventDefault();

    // Validation
    const errors: Record<string, string> = {};
    if (!formData.firstName?.trim()) errors.firstName = "First Name is required";
    if (!formData.lastName?.trim()) errors.lastName = "Last Name is required";
    if (!formData.email?.trim()) errors.email = "Email Address is required";
    else if (!/^\S+@\S+\.\S+$/.test(formData.email)) errors.email = "Invalid email format";
    if (!formData.role?.trim()) errors.role = "Role is required";
    if (!formData.id && !formData.password?.trim()) errors.password = "Password is required";

    if (!formData.phone?.trim()) errors.phone = "Phone is required";
    else if (!/^\d{10}$/.test(formData.phone)) errors.phone = "Phone number must be exactly 10 digits";
    if (!formData.designation?.trim()) errors.designation = "Designation is required";
    if (formData.experienceYears === undefined || formData.experienceYears < 0) errors.experienceYears = "Experience is required";
    if (!formData.workingHoursPerDay) errors.workingHoursPerDay = "Working hours is required";
    if (!formData.availableHoursPerDay) errors.availableHoursPerDay = "Available hours is required";
    if (!formData.skills || formData.skills.length === 0) errors.skills = "Skills are required";
    if (!formData.joiningDate) errors.joiningDate = "Joining Date is required";
    if (!formData.costPerHour) errors.costPerHour = "Cost per hour is required";
    if (!formData.billingRatePerHour) errors.billingRatePerHour = "Billing rate is required";
    if (!formData.currency?.trim()) errors.currency = "Currency is required";

    if (Object.keys(errors).length > 0) {
      setFormErrors(errors);
      return;
    }

    setFormErrors({});

    const firstName = (formData.firstName || "").trim();
    const lastName = (formData.lastName || "").trim();
    const roleSlug = (formData.role || "user").toLowerCase().replace(/\s+/g, '-');

    if (formData.id) {
      // Edit mode
      const payload: any = {
        firstName,
        lastName,
        email: formData.email,
        phone: formData.phone || "0000000000",
        roleSlug,
        availability: (formData.availability || "Full-time").toLowerCase(),
        status: formData.status === "onleave" ? "active" : (formData.status || "active"),
        designation: formData.designation,
        experienceYears: Number(formData.experienceYears) || 0,
        workingHoursPerDay: Number(formData.workingHoursPerDay) || 0,
        availableHoursPerDay: Number(formData.availableHoursPerDay) || 0,
        skills: formData.skills || [],
        joiningDate: formData.joiningDate ? formData.joiningDate.split('T')[0] : undefined,
        notes: formData.notes,
        costPerHour: Number(formData.costPerHour) || 0,
        billingRatePerHour: Number(formData.billingRatePerHour) || 0,
        currency: formData.currency || "USD"
      };

      // Only send password if it's changed/not empty
      if (formData.password?.trim()) {
        payload.password = formData.password;
      }

      try {
        const resultAction = await dispatch(updateUser({ id: formData.id, data: payload }));
        if (updateUser.fulfilled.match(resultAction)) {
          toast.success("User updated successfully");
          dispatch(fetchTeam({ page: currentPage, limit: rowsPerPage }));
          handleCloseModal();
        } else {
          toast.error((resultAction.payload as string) || "Update failed");
        }
      } catch (err: any) {
        toast.error(err.message || "An error occurred");
      }
    } else {
      // Add mode
      const payload = {
        firstName,
        lastName,
        email: formData.email,
        password: formData.password,
        phone: formData.phone || "0000000000",
        roleSlug,
        availability: (formData.availability || "Full-time").toLowerCase(),
        status: formData.status === "onleave" ? "active" : (formData.status || "active"),
        designation: formData.designation,
        experienceYears: Number(formData.experienceYears) || 0,
        workingHoursPerDay: Number(formData.workingHoursPerDay) || 0,
        availableHoursPerDay: Number(formData.availableHoursPerDay) || 0,
        skills: formData.skills || [],
        joiningDate: formData.joiningDate ? formData.joiningDate.split('T')[0] : undefined,
        notes: formData.notes,
        costPerHour: Number(formData.costPerHour) || 0,
        billingRatePerHour: Number(formData.billingRatePerHour) || 0,
        currency: formData.currency || "₹"
      };

      try {
        const resultAction = await dispatch(registerUser(payload));
        if (registerUser.fulfilled.match(resultAction)) {
          toast.success("User registered successfully");
          // Refresh latest team list
          dispatch(
            fetchTeam({
              page: currentPage,
              limit: rowsPerPage,
            })
          );
          handleCloseModal();
        } else {
          toast.error(
            (resultAction.payload as string) || "Registration failed"
          );
        }
      } catch (err: any) {
        toast.error(err.message || "An error occurred");
      }
    }
  };

  const handleDeleteUser = (user: User) => {
    setUserToDelete(user);
    setIsDeleteModalOpen(true);
  };
  const closeDeleteModal = () => {
    setIsDeleteModalOpen(false);
    setUserToDelete(null);
  };
  const confirmDelete = async () => {
    if (!userToDelete) return;
    const result = await dispatch(deleteUser(userToDelete.id));
    if (deleteUser.fulfilled.match(result)) {
      toast.success(result.payload.message);
      closeDeleteModal();
    } else {
      toast.error(result.payload as string);
    }
  };

  const handleArchiveUser = (user: User) => {
    setUserToArchive(user);
    setIsArchiveModalOpen(true);
  };
  const closeArchiveModal = () => {
    setIsArchiveModalOpen(false);
    setUserToArchive(null);
  };
  const confirmArchive = async () => {
    if (!userToArchive) return;
    const result = await dispatch(archiveUserApi(userToArchive.id));
    if (archiveUserApi.fulfilled.match(result)) {
      toast.success(result.payload.message);
      closeArchiveModal();
    } else {
      toast.error(result.payload as string);
    }
  };

  const handleUndoArchive = (user: User) => {
    setUserToUndoArchive(user);
    setIsUndoArchiveModalOpen(true);
  };
  const closeUndoArchiveModal = () => {
    setIsUndoArchiveModalOpen(false);
    setUserToUndoArchive(null);
  };
  const confirmUndoArchive = async () => {
    if (!userToUndoArchive) return;
    const result = await dispatch(archiveUserApi(userToUndoArchive.id));
    if (archiveUserApi.fulfilled.match(result)) {
      toast.success("User un-archived successfully");
      closeUndoArchiveModal();
    } else {
      toast.error(result.payload as string);
    }
  };

  const closeProfileModal = () => {
    setIsProfileModalOpen(false);
  };

  const handleViewProfile = async (user: User) => {
    const result = await dispatch(getMemberById(user.id));

    if (getMemberById.fulfilled.match(result)) {
      setIsProfileModalOpen(true);
    }
  };

  const handleEditUser = async (user: User) => {
    const result = await dispatch(getMemberById(user.id));
    if (getMemberById.fulfilled.match(result)) {
      handleOpenModal(result.payload as User);
    } else {
      toast.error((result.payload as string) || "Failed to load user details");
    }
  };

  const getStatusColor = (status?: string) => {
    switch (status) {
      case "active": return "bg-[#22C55E]/10 text-[#22C55E]";
      case "inactive": return "bg-[#fb2c36]/10 text-[#fb2c36]";
      case "onleave": return "bg-[#EAB308]/10 text-[#EAB308]";
      default: return "bg-slate-100 text-slate-600";
    }
  };

  const columns = [
    {
      name: 'S.No',
      width: '80px',
      cell: (row: User, index: number) => (
        <div data-th="S.No" className="mobile-cell">
          <span className="text-gray-500 font-medium">
            {(currentPage - 1) * rowsPerPage + index + 1}
          </span>
        </div>
      ),
    },
    {
      name: 'Name',
      selector: (row: User) => row.name,
      sortable: true,
      cell: (row: User) => <div data-th="Name" className="mobile-cell"><span className="md:font-medium text-gray-600 md:text-gray-900">{row.name}</span></div>
    },
    {
      name: 'Role',
      selector: (row: User) => row.role,
      sortable: true,
      cell: (row: User) => <div data-th="Role" className="mobile-cell"><span className="text-gray-600">{row.role}</span></div>
    },
    {
      name: 'Email',
      selector: (row: User) => row.email,
      sortable: true,
      minWidth: "160px",
      cell: (row: User) => <div data-th="Email" className="mobile-cell"><span className="text-gray-600">{row.email}</span></div>
    },
    {
      name: 'Availability',
      selector: (row: User) => row.availability,
      sortable: true,
      cell: (row: User) => <div data-th="Availability" className="mobile-cell"><span className="text-gray-600">{row.availability}</span></div>
    },
    {
      name: 'Status',
      selector: (row: User) => row.status,
      sortable: true,
      minWidth: "140px",
      cell: (row: User) => (
        <div data-th="Status" className="mobile-cell">
          <span className={`rounded-md px-3 py-1.5 text-sm font-normal capitalize ${getStatusColor(row.status)}`}>
            {row.status === 'onleave' ? 'On Leave' : row.status}
          </span>
        </div>
      )
    },
    {
      name: 'Action',
      center: true,
      minWidth: "160px",
      cell: (row: User) => (
        <div data-th="Action" className="mobile-cell w-full sm:w-auto">
          <div className="flex justify-start sm:justify-center gap-2">
            {isArchiveView ? (
              <button
                className="w-8 h-8 rounded-md bg-gray-500/10 flex items-center justify-center text-gray-600 hover:bg-gray-500/20 transition-colors"
                onClick={() => handleUndoArchive(row)}
                title="Undo Archive"
              >
                <Undo2 size={16} />
              </button>
            ) : (
              <>
                <button className="w-8 h-8 rounded-md bg-brand-950/10 flex items-center justify-center text-brand-950 hover:bg-brand-950/20 transition-colors"
                  onClick={() => handleViewProfile(row)}
                  title="View Profile"
                >
                  <Eye size={16} />
                </button>

                <button
                  className="w-8 h-8 rounded-md bg-amber-500/10 flex items-center justify-center text-amber-600 hover:bg-amber-500/20 transition-colors"
                  onClick={() => handleEditUser(row)}
                  title="Edit User"
                >
                  <Pencil size={16} />
                </button>

                {/* <button
                  className="w-8 h-8 rounded-md bg-gray-500/10 flex items-center justify-center text-gray-600 hover:bg-gray-500/20 transition-colors"
                  onClick={() => handleArchiveUser(row)}
                  title="Archive User"
                >
                  <Archive size={16} />
                </button> */}

                <button className="w-8 h-8 rounded-md bg-red-500/10 flex items-center justify-center text-red-500 hover:bg-red-500/20 transition-colors"
                  onClick={() => handleDeleteUser(row)}
                  title="Delete User"
                >
                  <Trash2 size={16} />
                </button>
              </>
            )}
          </div>
        </div>
      )
    }
  ];

  const filteredTeam = team?.filter(
    (member) =>
      member.name?.toLowerCase().includes(searchText.toLowerCase()) ||
      member.role?.toLowerCase().includes(searchText.toLowerCase()) ||
      member.id?.toLowerCase().includes(searchText.toLowerCase())
  );

  return (
    <div className="min-h-screen">
      <div className="mx-auto max-w-[1500px] space-y-6">
        <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
          <div className="flex flex-col gap-2">
            <div>
              <h1 className="text-xl lg:text-2xl font-medium text-brand-950">Team Management</h1>
            </div>
          </div>
          <button onClick={() => handleOpenModal()} className="inline-flex items-center justify-center font-medium gap-2 rounded-lg transition px-2.5 lg:px-4 py-2.5 lg:py-3 text-sm bg-brand-950 text-white shadow-theme-xs hover:text-brand-950 hover:bg-yellow-500">
            <svg className="w-5 h-5 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" clipRule="evenodd" d="M9 17a1 1 0 102 0v-6h6a1 1 0 100-2h-6V3a1 1 0 10-2 0v6H3a1 1 0 000 2h6v6z" />
            </svg>
            <span className="hidden lg:inline-block">Add Team Member</span>
          </button>
        </div>

        <div className="rounded-xl bg-white p-6 shadow-theme-md">
          <div className="md:border border-gray-200 rounded-lg overflow-hidden">
            <div className="flex items-center justify-between md:border-b md:px-4 pb-4 md:py-4">
              <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);
                      setResetPaginationToggle(!resetPaginationToggle);
                    }}
                    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 className="flex items-center gap-4 w-full sm:w-auto">
                <div className="relative block w-full sm:w-auto">
                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
                  <input
                    type="text"
                    placeholder="Search team..."
                    value={searchText}
                    onChange={(e) => setSearchText(e.target.value)}
                    className="h-11 w-full rounded-lg border appearance-none py-2.5 pl-9 pr-4 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 border-gray-300 outline-none"
                  />
                </div>
              </div>
            </div>

            <div className="overflow-x-auto">
              <DataTable
                key={`table-${rowsPerPage}`}
                columns={columns}
                data={filteredTeam}
                progressPending={isLoading}
                pagination
                paginationResetDefaultPage={resetPaginationToggle}
                paginationServer
                paginationTotalRows={meta?.total || 0}
                paginationPerPage={rowsPerPage}
                onChangePage={(page) => {
                  setCurrentPage(page);
                }}
                onChangeRowsPerPage={(newPerPage) => {
                  setRowsPerPage(newPerPage);
                  setCurrentPage(1);
                }}
                highlightOnHover
                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>

        {/* Delete Confirmation Modal */}
        <Modal isOpen={isDeleteModalOpen} onClose={closeDeleteModal} showCloseButton={false} className="max-w-[450px] m-4">
          <div className="p-8">
            <div className="text-center">
              <h3 className="text-xl font-semibold text-brand-950 mb-4">Confirm Delete</h3>
              <p className="text-sm text-gray-500 mb-8 leading-relaxed">
                Are you sure you want to delete <span className="font-semibold text-gray-800">{userToDelete?.name}</span> ?
              </p>
            </div>
            <div className="flex justify-center gap-3">
              <button onClick={closeDeleteModal} className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
                Cancel
              </button>
              <button onClick={confirmDelete} className="px-5 py-2.5 text-sm font-medium text-white bg-brand-950 rounded-xl hover:text-brand-950 hover:bg-yellow-500 transition-colors">
                Delete
              </button>
            </div>
          </div>
        </Modal>

        {/* Archive Confirmation Modal */}
        {/* <Modal isOpen={isArchiveModalOpen} onClose={closeArchiveModal} showCloseButton={false} className="max-w-[450px] m-4">
          <div className="p-8">
            <div className="text-center">
              <h3 className="text-xl font-semibold text-brand-950 mb-4">Confirm Archive</h3>
              <p className="text-sm text-gray-500 mb-8 leading-relaxed">
                Are you sure you want to archive <span className="font-semibold text-gray-800">{userToArchive?.name}</span>?
              </p>
            </div>
            <div className="flex justify-center gap-3">
              <button onClick={closeArchiveModal} className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
                Cancel
              </button>
              <button onClick={confirmArchive} className="px-5 py-2.5 text-sm font-medium text-white bg-brand-950 rounded-xl hover:text-brand-950 hover:bg-yellow-500 transition-colors">
                Archive
              </button>
            </div>
          </div>
        </Modal> */}

        {/* Undo Archive Confirmation Modal */}
        <Modal isOpen={isUndoArchiveModalOpen} onClose={closeUndoArchiveModal} showCloseButton={false} className="max-w-[450px] m-4">
          <div className="p-8">
            <div className="text-center">
              <h3 className="text-xl font-semibold text-brand-950 mb-4">Confirm Un-archive</h3>
              <p className="text-sm text-gray-500 mb-8 leading-relaxed">
                Are you sure you want to un-archive <span className="font-semibold text-gray-800">{userToUndoArchive?.name}</span>?
              </p>
            </div>
            <div className="flex justify-center gap-3">
              <button onClick={closeUndoArchiveModal} className="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition-colors">
                Cancel
              </button>
              <button onClick={confirmUndoArchive} className="px-5 py-2.5 text-sm font-medium text-white bg-brand-950 rounded-xl hover:text-brand-950 hover:bg-yellow-500 transition-colors">
                Un-archive
              </button>
            </div>
          </div>
        </Modal>

        {/* Add/Edit Modal */}
        <Modal isOpen={isOpen} onClose={handleCloseModal} 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 mb-6 lg:mb-7">
              <h4 className="text-xl lg:text-2xl font-semibold text-brand-950">
                {formData.id ? "Edit Team Member" : "Add New Member"}
              </h4>
            </div>
            <form onSubmit={handleSaveUser} className="px-2">
              <div className="grid grid-cols-1 gap-x-6 gap-y-5 lg:grid-cols-2">
                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">First Name</label>
                  <input
                    type="text"
                    value={formData.firstName || ""}
                    onChange={(e) => {
                      setFormData({ ...formData, firstName: e.target.value });
                      if (formErrors.firstName) setFormErrors({ ...formErrors, firstName: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.firstName ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="First Name"
                  />
                  {formErrors.firstName && <p className="mt-1.5 text-xs text-red-500">{formErrors.firstName}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Last Name</label>
                  <input
                    type="text"
                    value={formData.lastName || ""}
                    onChange={(e) => {
                      setFormData({ ...formData, lastName: e.target.value });
                      if (formErrors.lastName) setFormErrors({ ...formErrors, lastName: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.lastName ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="Last Name"
                  />
                  {formErrors.lastName && <p className="mt-1.5 text-xs text-red-500">{formErrors.lastName}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Email Address</label>
                  <input
                    type="email"
                    value={formData.email || ""}
                    onChange={(e) => {
                      setFormData({ ...formData, email: e.target.value });
                      if (formErrors.email) setFormErrors({ ...formErrors, email: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.email ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="Your Email Address"
                  />
                  {formErrors.email && <p className="mt-1.5 text-xs text-red-500">{formErrors.email}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Role</label>
                  <div className="relative">
                    <select
                      value={formData.role || ""}
                      onChange={(e) => {
                        setFormData({ ...formData, role: e.target.value });
                        if (formErrors.role) setFormErrors({ ...formErrors, role: "" });
                      }}
                      className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 pr-10 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.role ? 'border-red-500' : 'border-gray-300'}`}
                    >
                      <option value="" disabled>Select Role</option>
                      {roles.map(r => (
                        <option key={r.id} value={r.slug || r.name.toLowerCase().replace(/\s+/g, '-')}>
                          {r.name}
                        </option>
                      ))}
                    </select>
                    <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 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>
                  {formErrors.role && <p className="mt-1.5 text-xs text-red-500">{formErrors.role}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Phone Number</label>
                  <input
                    type="text"
                    value={formData.phone || ""}
                    onChange={(e) => {
                      const value = e.target.value.replace(/\D/g, '').slice(0, 10);
                      setFormData({ ...formData, phone: value });
                      if (formErrors.phone) setFormErrors({ ...formErrors, phone: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.phone ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="Your Phone Number"
                  />
                  {formErrors.phone && <p className="mt-1.5 text-xs text-red-500">{formErrors.phone}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Password</label>
                  <div className="relative block">
                    <input
                      type={showPassword ? "text" : "password"}
                      value={formData.password || ""}
                      onChange={(e) => {
                        setFormData({ ...formData, password: e.target.value });
                        if (formErrors.password) setFormErrors({ ...formErrors, password: "" });
                      }}
                      className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 pr-12 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.password ? 'border-red-500' : 'border-gray-300'}`}
                      placeholder={formData.id ? "Leave blank to keep current" : "Your Password"}
                    />
                    <button
                      type="button"
                      onClick={() => setShowPassword(!showPassword)}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
                    >
                      {showPassword ? (
                        <Eye size={18} />
                      ) : (
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                          <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
                          <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
                          <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
                          <line x1="2" y1="2" x2="22" y2="22"></line>
                        </svg>
                      )}
                    </button>
                  </div>
                  {formErrors.password && <p className="mt-1.5 text-xs text-red-500">{formErrors.password}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Availability</label>
                  <div className="relative">
                    <select
                      value={formData.availability || "Full-time"}
                      onChange={(e) => setFormData({ ...formData, availability: e.target.value })}
                      className="h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 border-gray-300 outline-none"
                    >
                      <option value="Full-time">Full-time</option>
                      <option value="Part-time">Part-time</option>
                      <option value="Contract">Contract</option>
                    </select>
                    <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 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>
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Status</label>
                  <div className="relative">
                    <select
                      value={formData.status || "active"}
                      onChange={(e) => setFormData({ ...formData, status: e.target.value as User["status"] })}
                      className="h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 border-gray-300 outline-none"
                    >
                      <option value="active">Active</option>
                      <option value="inactive">Inactive</option>
                    </select>
                    <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 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>
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Designation</label>
                  <input
                    type="text"
                    value={formData.designation || ""}
                    onChange={(e) => {
                      setFormData({ ...formData, designation: e.target.value });
                      if (formErrors.designation) setFormErrors({ ...formErrors, designation: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.designation ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="e.g. Backend Developer"
                  />
                  {formErrors.designation && <p className="mt-1.5 text-xs text-red-500">{formErrors.designation}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Experience Years</label>
                  <input
                    type="number"
                    value={formData.experienceYears === undefined ? "" : formData.experienceYears}
                    onChange={(e) => {
                      setFormData({ ...formData, experienceYears: e.target.value ? Number(e.target.value) : undefined });
                      if (formErrors.experienceYears) setFormErrors({ ...formErrors, experienceYears: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.experienceYears ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="0"
                  />
                  {formErrors.experienceYears && <p className="mt-1.5 text-xs text-red-500">{formErrors.experienceYears}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Working Hours / Day</label>
                  <input
                    type="number"
                    value={formData.workingHoursPerDay === undefined ? "" : formData.workingHoursPerDay}
                    onChange={(e) => {
                      setFormData({ ...formData, workingHoursPerDay: e.target.value ? Number(e.target.value) : undefined });
                      if (formErrors.workingHoursPerDay) setFormErrors({ ...formErrors, workingHoursPerDay: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.workingHoursPerDay ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="8"
                  />
                  {formErrors.workingHoursPerDay && <p className="mt-1.5 text-xs text-red-500">{formErrors.workingHoursPerDay}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Available Hours / Day</label>
                  <input
                    type="number"
                    value={formData.availableHoursPerDay === undefined ? "" : formData.availableHoursPerDay}
                    onChange={(e) => {
                      setFormData({ ...formData, availableHoursPerDay: e.target.value ? Number(e.target.value) : undefined });
                      if (formErrors.availableHoursPerDay) setFormErrors({ ...formErrors, availableHoursPerDay: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.availableHoursPerDay ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="8"
                  />
                  {formErrors.availableHoursPerDay && <p className="mt-1.5 text-xs text-red-500">{formErrors.availableHoursPerDay}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Cost Per Hour</label>
                  <input
                    type="number"
                    value={formData.costPerHour === undefined ? "" : formData.costPerHour}
                    onChange={(e) => {
                      setFormData({ ...formData, costPerHour: e.target.value ? Number(e.target.value) : undefined });
                      if (formErrors.costPerHour) setFormErrors({ ...formErrors, costPerHour: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.costPerHour ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="20"
                  />
                  {formErrors.costPerHour && <p className="mt-1.5 text-xs text-red-500">{formErrors.costPerHour}</p>}
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Billing Rate Per Hour</label>
                  <input
                    type="number"
                    value={formData.billingRatePerHour === undefined ? "" : formData.billingRatePerHour}
                    onChange={(e) => {
                      setFormData({ ...formData, billingRatePerHour: e.target.value ? Number(e.target.value) : undefined });
                      if (formErrors.billingRatePerHour) setFormErrors({ ...formErrors, billingRatePerHour: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.billingRatePerHour ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="35"
                  />
                  {formErrors.billingRatePerHour && <p className="mt-1.5 text-xs text-red-500">{formErrors.billingRatePerHour}</p>}
                </div>

                <div className="relative col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Joining Date</label>
                  <input
                    type="date"
                    value={formData.joiningDate ? formData.joiningDate.split('T')[0] : ""}
                    onClick={(e) => e.currentTarget.showPicker?.()}
                    onChange={(e) => {
                      setFormData({ ...formData, joiningDate: e.target.value });
                      if (formErrors.joiningDate) setFormErrors({ ...formErrors, joiningDate: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 pr-10 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.joiningDate ? 'border-red-500' : 'border-gray-300'}`}
                  />
                  {formErrors.joiningDate && <p className="mt-1.5 text-xs text-red-500">{formErrors.joiningDate}</p>}

                  <CalendarDaysIcon
                    className="absolute right-3 top-[38px] h-5 w-5 text-gray-400 cursor-pointer"
                    onClick={(e) => {
                      const input = e.currentTarget.parentElement?.querySelector(
                        "input"
                      ) as HTMLInputElement;
                      input?.showPicker?.();
                      input?.focus();
                    }}
                  />
                </div>

                <div className="col-span-2 lg:col-span-1">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Currency</label>
                  <div className="relative">
                    <select
                      value={formData.currency || "₹"}
                      onChange={(e) => {
                        setFormData({ ...formData, currency: e.target.value });
                        if (formErrors.currency) setFormErrors({ ...formErrors, currency: "" });
                      }}
                      className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.currency ? 'border-red-500' : 'border-gray-300'}`}
                    >
                      {symbols && symbols.length > 0 ? (
                        symbols.map(s => (
                          <option key={s.id} value={s.code}>{s.code}</option>
                        ))
                      ) : (
                        <>
                          <option value="₹">₹</option>
                          <option value="$">$</option>
                          <option value="€">€</option>
                          <option value="£">£</option>
                        </>
                      )}
                    </select>
                  </div>
                  {formErrors.currency && <p className="mt-1.5 text-xs text-red-500">{formErrors.currency}</p>}
                </div>

                <div className="col-span-2">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Skills (comma separated)</label>
                  <input
                    type="text"
                    value={formData.skills?.join(", ") || ""}
                    onChange={(e) => {
                      setFormData({ ...formData, skills: e.target.value.split(",").map(s => s.trim()).filter(s => s) });
                      if (formErrors.skills) setFormErrors({ ...formErrors, skills: "" });
                    }}
                    className={`h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none ${formErrors.skills ? 'border-red-500' : 'border-gray-300'}`}
                    placeholder="Node.js, React, MongoDB"
                  />
                  {formErrors.skills && <p className="mt-1.5 text-xs text-red-500">{formErrors.skills}</p>}
                </div>

                <div className="col-span-2">
                  <label className="mb-1.5 block text-sm font-medium text-gray-700">Notes</label>
                  <textarea
                    value={formData.notes || ""}
                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                    className="h-24 w-full rounded-lg border px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 bg-transparent text-gray-800 outline-none border-gray-300 resize-none"
                    placeholder="Additional notes..."
                  ></textarea>
                </div>
              </div>

              <div className="flex items-center gap-3 mt-6 lg:justify-end">
                <button
                  type="button"
                  onClick={handleCloseModal}
                  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"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  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 disabled:bg-yellow-500 disabled:opacity-50"
                >
                  {formData.id ? "Save Changes" : "Add Member"}
                </button>
              </div>
            </form>
          </div>
        </Modal>

        {/* Developer Profile Modal */}
        {selectedMember && (
          <Modal isOpen={isProfileModalOpen} onClose={closeProfileModal} className="max-w-[800px] m-4">
            <div className="no-scrollbar relative w-full max-w-[800px] rounded-3xl bg-white p-4 lg:p-8 max-h-[90vh] overflow-y-auto">
              <div className="px-2 pr-14 border-b border-gray-100 pb-4 mb-6">
                <h4 className="mb-1 text-2xl lg:text-3xl font-semibold text-brand-950">
                  {selectedMember.firstName} {selectedMember.lastName}
                </h4>
                <p className="text-sm font-medium text-gray-500">
                  {selectedMember.designation || selectedMember.role}
                </p>
              </div>

              <div className="px-2 space-y-8">
                {/* Status & Availability Grid */}
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  <div className="bg-gray-50 p-4 rounded-xl border border-gray-100">
                    <p className="mb-1.5 block text-xs font-medium text-gray-500 uppercase tracking-wider">Status</p>
                    <p className={`font-semibold capitalize ${selectedMember.status === "active" ? "text-[#22C55E]" :
                      selectedMember.status === "inactive" ? "text-[#fb2c36]" :
                        selectedMember.status === "onleave" ? "text-[#EAB308]" :
                          "text-gray-600"
                      }`}>
                      {selectedMember.status}
                    </p>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-xl border border-gray-100">
                    <p className="mb-1.5 block text-xs font-medium text-gray-500 uppercase tracking-wider">Availability</p>
                    <p className="font-semibold text-gray-800 capitalize">{selectedMember.availability}</p>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-xl border border-gray-100">
                    <p className="mb-1.5 block text-xs font-medium text-gray-500 uppercase tracking-wider">Experience</p>
                    <p className="font-semibold text-gray-800">{selectedMember.experienceYears} Years</p>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-xl border border-gray-100">
                    <p className="mb-1.5 block text-xs font-medium text-gray-500 uppercase tracking-wider">Joining Date</p>
                    <p className="font-semibold text-gray-800">
                      {selectedMember.joiningDate ? new Date(selectedMember.joiningDate).toLocaleDateString() : 'N/A'}
                    </p>
                  </div>
                </div>

                {/* Main Content Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                  {/* Left Column */}
                  <div className="space-y-6">
                    <div>
                      <h5 className="mb-3 text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2">Contact Information</h5>
                      <div className="space-y-3">
                        <div className="flex items-center gap-3">
                          <div className="w-9 h-9 rounded-full bg-brand-950/10 flex items-center justify-center text-brand-950">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                          </div>
                          <div>
                            <p className="text-xs text-gray-500 font-medium">Email Address</p>
                            <p className="text-sm font-medium text-gray-800">{selectedMember.email}</p>
                          </div>
                        </div>
                        <div className="flex items-center gap-3">
                          <div className="w-9 h-9 rounded-full bg-brand-950/10 flex items-center justify-center text-brand-950">
                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                          </div>
                          <div>
                            <p className="text-xs text-gray-500 font-medium">Phone Number</p>
                            <p className="text-sm font-medium text-gray-800">{selectedMember.phone || 'N/A'}</p>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div>
                      <h5 className="mb-3 text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2">Skills</h5>
                      <div className="flex flex-wrap gap-2">
                        {selectedMember.skills && selectedMember.skills.length > 0 ? (
                          selectedMember.skills.map((skill: string, idx: number) => (
                            <span key={idx} className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">
                              {skill}
                            </span>
                          ))
                        ) : (
                          <span className="text-sm text-gray-500 italic">No skills listed</span>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Right Column */}
                  <div className="space-y-6">
                    <div>
                      <h5 className="mb-3 text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2">Working Hours</h5>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <p className="text-xs text-gray-500 font-medium">Daily Working Hours</p>
                          <p className="text-sm font-medium text-gray-800">{selectedMember.workingHoursPerDay} hrs</p>
                        </div>
                        <div>
                          <p className="text-xs text-gray-500 font-medium">Available Hours</p>
                          <p className="text-sm font-medium text-gray-800">{selectedMember.availableHoursPerDay} hrs</p>
                        </div>
                      </div>
                    </div>

                    <div>
                      <h5 className="mb-3 text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2">Financials</h5>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <p className="text-xs text-gray-500 font-medium">Cost Per Hour</p>
                          <p className="text-sm font-medium text-gray-800">{selectedMember.currency}{selectedMember.costPerHour}</p>
                        </div>
                        <div>
                          <p className="text-xs text-gray-500 font-medium">Billing Rate</p>
                          <p className="text-sm font-medium text-gray-800">{selectedMember.currency}{selectedMember.billingRatePerHour}</p>
                        </div>
                      </div>
                    </div>

                    {selectedMember.notes && (
                      <div>
                        <h5 className="mb-3 text-sm font-semibold text-gray-900 border-b border-gray-100 pb-2">Notes</h5>
                        <p className="text-sm text-gray-700 bg-yellow-50/50 p-3 rounded-lg border border-yellow-100/50 whitespace-pre-wrap">
                          {selectedMember.notes}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </Modal>
        )}

      </div>
    </div>
  );
}