"use client";
import React, { useState, useEffect } from "react";
import { Eye, Trash2, Pencil, Search, Plus, X } from "lucide-react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { fetchSymbols, createSymbol, updateSymbol, deleteSymbol, Symbol } from "@/store/slices/symbolSlice";
import DataTable from "react-data-table-component";
import { useModal } from "@/hooks/useModal";
import { Modal } from "@/components/common/modal";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";

export default function SymbolsManagementPage() {
  const dispatch = useAppDispatch();
  const { symbols, isLoading } = useAppSelector((state) => state.symbols);

  const { isOpen, openModal, closeModal } = useModal();
  const { register, handleSubmit, reset, setValue, formState: { errors } } = useForm<Partial<Symbol>>();

  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [symbolToDelete, setSymbolToDelete] = useState<Symbol | null>(null);

  const [searchText, setSearchText] = useState("");
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);
  const [resetPaginationToggle, setResetPaginationToggle] = useState(false);

  const [editingSymbol, setEditingSymbol] = useState<Symbol | null>(null);

  useEffect(() => {
    const timer = setTimeout(() => {
      dispatch(fetchSymbols({ search: searchText }));
    }, 500);
    return () => clearTimeout(timer);
  }, [dispatch, searchText]);

  const handleOpenModal = (symbol?: Symbol) => {
    if (symbol) {
      setEditingSymbol(symbol);
      reset({ ...symbol });
    } else {
      setEditingSymbol(null);
      reset({ name: "", code: "", description: "", isActive: true });
    }
    openModal();
  };

  const handleCloseModal = () => {
    reset();
    setEditingSymbol(null);
    closeModal();
  };

  const onSubmit = (data: Partial<Symbol>) => {
    if (editingSymbol) {
      dispatch(updateSymbol({ id: editingSymbol.id, data })).then((res) => {
        if (updateSymbol.fulfilled.match(res)) {
          toast.success("Symbol updated successfully");
          handleCloseModal();
        } else {
          toast.error((res.payload as string) || "Failed to update symbol");
        }
      });
    } else {
      dispatch(createSymbol(data)).then((res) => {
        if (createSymbol.fulfilled.match(res)) {
          toast.success("Symbol created successfully");
          handleCloseModal();
        } else {
          toast.error((res.payload as string) || "Failed to create symbol");
        }
      });
    }
  };

  const handleDeleteClick = (symbol: Symbol) => {
    setSymbolToDelete(symbol);
    setIsDeleteModalOpen(true);
  };

  const confirmDelete = () => {
    if (symbolToDelete) {
      dispatch(deleteSymbol(symbolToDelete.id)).then((res) => {
        if (deleteSymbol.fulfilled.match(res)) {
          toast.success("Symbol deleted successfully");
        } else {
          toast.error("Failed to delete symbol");
        }
        setIsDeleteModalOpen(false);
        setSymbolToDelete(null);
      });
    }
  };

  const columns = [
    {
      name: 'S.No',
      selector: (row: Symbol, index?: number) => (index || 0) + 1 + (currentPage - 1) * rowsPerPage,
      sortable: false,
      width: '70px',
    },
    {
      name: 'Name',
      selector: (row: Symbol) => row.name,
      sortable: true,
    },
    {
      name: 'Code/Symbol',
      selector: (row: Symbol) => row.code,
      sortable: true,
      cell: (row: Symbol) => (
        <span className="px-2 py-1 bg-gray-100 rounded-md font-mono text-sm border border-gray-200">{row.code}</span>
      )
    },
    {
      name: 'Description',
      selector: (row: Symbol) => row.description || "-",
      sortable: false,
    },
    {
      name: 'Status',
      selector: (row: Symbol) => row.isActive,
      sortable: true,
      cell: (row: Symbol) => (
        <span className={`px-2 py-1 rounded-full text-xs ${row.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
          {row.isActive ? "Active" : "Inactive"}
        </span>
      )
    },
    {
      name: 'Action',
      center: true,
      cell: (row: Symbol) => (
        <div className="flex gap-2">
          <button
            onClick={() => handleOpenModal(row)}
            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"
          >
            <Pencil size={14} />
          </button>
          <button
            onClick={() => handleDeleteClick(row)}
            className="w-8 h-8 rounded-md bg-red-500/10 flex items-center justify-center text-red-600 hover:bg-red-500/20 transition-colors"
          >
            <Trash2 size={14} />
          </button>
        </div>
      )
    }
  ];

  const filteredSymbols = symbols;

  return (
    <div className="min-h-screen p-6">
      <div className="mx-auto max-w-[1500px] space-y-6">
        <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
          <div>
            <h1 className="text-xl lg:text-2xl font-medium text-brand-950">Symbols Management</h1>
            <p className="text-sm text-gray-500 mt-1">Manage symbols and codes across the system</p>
          </div>
          <button
            onClick={() => handleOpenModal()}
            className="inline-flex items-center justify-center font-medium gap-2 rounded-lg transition px-4 py-2.5 text-sm bg-brand-950 text-white shadow-theme-xs hover:bg-yellow-500 hover:text-brand-950"
          >
            <Plus size={16} />
            <span>Create Symbol</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 symbols..."
                    value={searchText}
                    onChange={(e) => {
                      setSearchText(e.target.value);
                      setCurrentPage(1);
                    }}
                    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={filteredSymbols.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage)}
                progressPending={isLoading}
                pagination
                paginationServer
                paginationTotalRows={filteredSymbols.length}
                paginationResetDefaultPage={resetPaginationToggle}
                paginationPerPage={rowsPerPage}
                onChangeRowsPerPage={(currentRowsPerPage) => {
                  setRowsPerPage(currentRowsPerPage);
                  setCurrentPage(1);
                }}
                onChangePage={(page) => setCurrentPage(page)}
                paginationComponentOptions={{ noRowsPerPage: true }}
                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>

        {/* Add/Edit Modal */}
        <Modal isOpen={isOpen} onClose={handleCloseModal} className="max-w-[500px] m-4">
          <div className="bg-white rounded-3xl p-6 relative">
            <h4 className="text-xl font-semibold text-brand-950 mb-6">
              {editingSymbol ? "Edit Symbol" : "Create Symbol"}
            </h4>
            <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">Name</label>
                <input
                  type="text"
                  {...register("name", { required: "Name is required" })}
                  className="w-full rounded-lg border px-4 py-2 text-sm outline-none focus:border-brand-950"
                  placeholder="e.g., US Dollar"
                />
                {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message as string}</p>}
              </div>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">Code / Symbol</label>
                <input
                  type="text"
                  {...register("code", { required: "Code is required" })}
                  className="w-full rounded-lg border px-4 py-2 text-sm outline-none focus:border-brand-950"
                  placeholder="e.g., $, USD, !!"
                />
                {errors.code && <p className="text-red-500 text-xs mt-1">{errors.code.message as string}</p>}
              </div>

              <div>
                <label className="mb-1.5 block text-sm font-medium text-gray-700">Description</label>
                <textarea
                  {...register("description")}
                  className="w-full rounded-lg border px-4 py-2 text-sm outline-none focus:border-brand-950 min-h-[100px]"
                  placeholder="Optional description..."
                />
              </div>

              <div className="flex items-center gap-2">
                <input
                  type="checkbox"
                  id="isActive"
                  {...register("isActive")}
                  className="w-4 h-4 text-brand-950 rounded border-gray-300 focus:ring-brand-950"
                />
                <label htmlFor="isActive" className="text-sm font-medium text-gray-700">Is Active?</label>
              </div>

              <div className="flex justify-end gap-3 mt-6">
                <button type="button" onClick={handleCloseModal} className="px-4 py-2 text-gray-600 bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-medium">Cancel</button>
                <button type="submit" className="px-4 py-2 text-white bg-brand-950 rounded-lg hover:bg-yellow-500 hover:text-brand-950 text-sm font-medium">
                  {editingSymbol ? "Update" : "Save"}
                </button>
              </div>
            </form>
          </div>
        </Modal>

        {/* Delete 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-1 text-gray-800">{symbolToDelete?.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>
    </div>
  );
}