"use client";

import React, { useState, useEffect } from "react";
import DataTable from "react-data-table-component";
import { Search, Eye, CheckCircle, XCircle } from "lucide-react";
import AddLeaveModal from "@/components/leaves/AddLeaveModal";
import ActionLeaveModal from "@/components/leaves/ActionLeaveModal";
import ViewLeaveModal from "@/components/leaves/ViewLeaveModal";
import { useAppSelector, useAppDispatch } from "@/store/hooks";
import { fetchLeaves, createLeave, updateLeaveStatus, Leave } from "@/store/slices/leaveSlice";
import { toast } from "react-toastify";

export default function LeavesPage() {
  const dispatch = useAppDispatch();
  const user = useAppSelector((state) => state.auth.user);
  const leaves = useAppSelector((state: any) => state.leaves.leaves);
  const meta = useAppSelector((state: any) => state.leaves.meta);

  // Check if user is Admin or Project Manager
  const canActionLeaves = user?.role?.toLowerCase() === "admin" || user?.role?.toLowerCase() === "project manager" || false;

  const [isOpen, setIsOpen] = useState(false);
  const [isActionModalOpen, setIsActionModalOpen] = useState(false);
  const [isViewModalOpen, setIsViewModalOpen] = useState(false);
  const [selectedActionType, setSelectedActionType] = useState<"Approve" | "Reject" | null>(null);
  const [selectedLeaveId, setSelectedLeaveId] = useState<string | null>(null);
  const [searchText, setSearchText] = useState("");
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);
  const [resetPaginationToggle, setResetPaginationToggle] = useState(false);

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

  const handleOpenModal = () => setIsOpen(true);
  const handleCloseModal = () => setIsOpen(false);

  const handleSaveLeave = (leaveData: any) => {
    dispatch(createLeave(leaveData)).then((res: any) => {
      if (res.meta.requestStatus === 'fulfilled') {
        toast.success("Leave requested successfully");
        dispatch(fetchLeaves({ page: currentPage, limit: rowsPerPage, search: searchText }));
      } else {
        toast.error(res.payload || "Failed to request leave");
      }
    });
  };

  const handleOpenActionModal = (leaveId: string, type: "Approve" | "Reject") => {
    setSelectedLeaveId(leaveId);
    setSelectedActionType(type);
    setIsActionModalOpen(true);
  };

  const handleCloseActionModal = () => {
    setIsActionModalOpen(false);
    setSelectedLeaveId(null);
    setSelectedActionType(null);
  };

  const handleOpenViewModal = (leaveId: string) => {
    setSelectedLeaveId(leaveId);
    setIsViewModalOpen(true);
  };

  const handleCloseViewModal = () => {
    setIsViewModalOpen(false);
    setSelectedLeaveId(null);
  };

  const handleSaveAction = (actionType: "Approved" | "Rejected", comment: string) => {
    if (selectedLeaveId) {
      dispatch(updateLeaveStatus({ id: selectedLeaveId, status: actionType.toUpperCase(), comment })).then((res: any) => {
        if (res.meta.requestStatus === 'fulfilled') {
          toast.success(`Leave ${actionType.toLowerCase()} successfully`);
          dispatch(fetchLeaves({ page: currentPage, limit: rowsPerPage, search: searchText }));
        } else {
          toast.error(res.payload || `Failed to ${actionType.toLowerCase()} leave`);
        }
      });
    }
  };

  const getStatusBadge = (status: Leave["status"]) => {
    switch (status) {
      case "PENDING":
      case "Pending":
        return <span className="bg-[#F59E0B]/10 text-[#F59E0B] rounded-md px-3 py-1.5 text-sm leading-[18px] font-normal w-fit">Pending</span>;
      case "APPROVED":
      case "Approved":
        return <span className="bg-[#22C55E]/10 text-[#22C55E] rounded-md px-3 py-1.5 text-sm leading-[18px] font-normal w-fit">Approved</span>;
      case "REJECTED":
      case "Rejected":
        return <span className="bg-red-500/20 text-red-500 rounded-md px-3 py-1.5 text-sm leading-[18px] font-normal w-fit">Rejected</span>;
      default:
        return null;
    }
  };

  const columns = [
    {
      name: "S.No",
      selector: (row: Leave, index?: number) => (index !== undefined ? index + 1 : 0),
      sortable: false,
      width: "80px",
      cell: (row: Leave, index?: number) => <div data-th="S.No" className="mobile-cell"><span className="text-gray-900">{(currentPage - 1) * rowsPerPage + (index !== undefined ? index : 0) + 1}</span></div>
    },
    ...(canActionLeaves ? [{
      name: "Employee",
      selector: (row: Leave) => row.user ? `${row.user.firstName} ${row.user.lastName}` : "Unknown",
      sortable: true,
      minWidth: "150px",
      cell: (row: Leave) => (
        <div data-th="Employee" className="mobile-cell">
          <span className="text-sm md:font-medium text-gray-600 md:text-gray-900">{row.user ? `${row.user.firstName} ${row.user.lastName}` : "Unknown"}</span>
        </div>
      )
    }] : []),
    {
      name: "Leave Date",
      selector: (row: Leave) => row.fromDate || row.leaveDate || "",
      sortable: true,
      minWidth: "200px",
      cell: (row: Leave) => {
        let displayDate = row.leaveDate;
        if (!displayDate) {
          const isSameDay = row.fromDate === row.toDate;
          displayDate = isSameDay
            ? `${row.fromDate ? new Date(row.fromDate).toLocaleDateString() : ''} (${row.leaveType})`
            : `${row.fromDate ? new Date(row.fromDate).toLocaleDateString() : ''}\n${row.toDate ? new Date(row.toDate).toLocaleDateString() : ''}`;
        }
        return (
          <div data-th="Leave Date" className="mobile-cell whitespace-pre-wrap text-sm text-gray-700">
            <div className="flex flex-col gap-1">
              {displayDate?.split("\n").map((date, idx) => (
                <div key={idx} className=" text-gray-600">
                  {date}
                </div>
              ))}
            </div>
          </div>
        )
      }
    },
    {
      name: "Reason",
      selector: (row: Leave) => row.reason,
      sortable: true,
      minWidth: "300px",
      cell: (row: Leave) => <div data-th="Reason" className="mobile-cell"><span className="text-sm text-gray-600">{row.reason}</span></div>
    },
    {
      name: "Leave Status",
      selector: (row: Leave) => row.status,
      sortable: true,
      minWidth: "150px",
      cell: (row: Leave) => (
        <div data-th="Leave Status" className="mobile-cell">
          <div className="flex flex-col gap-1">
            {getStatusBadge(row.status)}
            {(row.approvedBy || row.approver) && (
              <span className="text-xs text-gray-500">
                {row.status.toUpperCase() === "APPROVED" ? "Approved" : "Rejected"} By {row.approver ? `${row.approver.firstName} ${row.approver.lastName}` : row.approvedBy}
              </span>
            )}
            {row.comment && (
              <span className="text-xs text-gray-400 italic break-words">"{row.comment}"</span>
            )}
          </div>
        </div>
      )
    },
    {
      name: "Action",
      center: true,
      minWidth: "150px",
      cell: (row: Leave) => (
        <div data-th="Action" className="mobile-cell w-full sm:w-auto">
          <div className="flex justify-start sm:justify-center gap-2">
            <span
              onClick={() => handleOpenViewModal(row.id)}
              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/20 transition-colors" title="View Details">
              <Eye size={18} />
            </span>
            {canActionLeaves && (row.status === "Pending" || row.status === "PENDING") && (
              <>
                <span
                  onClick={() => handleOpenActionModal(row.id, "Approve")}
                  className="cursor-pointer w-8 h-8 rounded-md bg-green-500/20 flex items-center justify-center text-green-600 hover:bg-green-500/30 transition-colors" title="Approve Leave">
                  <CheckCircle size={18} />
                </span>
                <span
                  onClick={() => handleOpenActionModal(row.id, "Reject")}
                  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/30 transition-colors" title="Reject Leave">
                  <XCircle size={18} />
                </span>
              </>
            )}
          </div>
        </div>
      )
    }
  ];


  return (
    <div className="min-h-screen">
      <div className="mx-auto max-w-[1500px] space-y-6">

        {/* Header */}
        <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
          <h1 className="text-xl lg:text-2xl font-medium text-brand-950">Leaves List</h1>
          <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">Create Leave</span>
          </button>
        </div>

        {/* Leaves Table */}
        <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 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-600">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-400 -translate-y-1/2 pointer-events-none right-1.5 top-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24">
                      <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 9l6 6 6-6"></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"
                    value={searchText}
                    placeholder="Search leaves..."
                    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={leaves || []}
                pagination
                paginationResetDefaultPage={resetPaginationToggle}
                paginationServer
                paginationTotalRows={meta?.total || 0}
                paginationPerPage={rowsPerPage}
                paginationComponentOptions={{ noRowsPerPage: true }}
                onChangePage={(page) => setCurrentPage(page)}
                onChangeRowsPerPage={(newPerPage, page) => {
                  setRowsPerPage(newPerPage);
                  setCurrentPage(page);
                }}
                highlightOnHover
                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>

        <AddLeaveModal
          isOpen={isOpen}
          onClose={handleCloseModal}
          onSave={handleSaveLeave}
        />

        <ActionLeaveModal
          isOpen={isActionModalOpen}
          onClose={handleCloseActionModal}
          onSave={handleSaveAction}
          actionType={selectedActionType}
        />

        <ViewLeaveModal
          isOpen={isViewModalOpen}
          onClose={handleCloseViewModal}
          leave={leaves.find((l: any) => l.id === selectedLeaveId) || null}
        />
      </div>
    </div>
  );
}