import { Dispatch, SetStateAction } from 'react'
import {
  Checkbox,
  Dropdown,
  DropdownDivider,
  DropdownItem,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import { HiOutlineDotsHorizontal } from 'react-icons/hi'
import { FiEdit, FiTrash } from 'react-icons/fi'
import Image from 'next/image'

import tableTheme from '@/lib/themes/table'
import { Bank } from '../types'
import { useTable } from '@/lib/hooks/useTable'
import { useAuth } from '@/lib/context/AuthContext'

interface DataTableProps {
  banks: Bank[]
  isLoading?: boolean
  setSelectedBank: Dispatch<SetStateAction<Bank | null>>
  setModal: (modal: ModalState) => void
}

export default function DataTable({
  banks,
  isLoading = false,
  setSelectedBank,
  setModal,
}: DataTableProps) {
  const { user } = useAuth()

  const { selectAllRows, selectedRows, toggleRowSelection, isRowSelected } =
    useTable<Bank>()

  function handleEdit(bank: Bank) {
    setSelectedBank(bank)
    setModal({ type: 'edit', isOpened: true })
  }

  function handleDelete(bank: Bank) {
    setSelectedBank(bank)
    setModal({ type: 'delete', isOpened: true })
  }

  return (
    <div className="overflow-x-auto mt-10 min-h-48">
      <Table theme={tableTheme.table} hoverable>
        <TableHead>
          <TableRow>
            <TableHeadCell className="text-center p-4">
              <Checkbox
                color="blue"
                checked={selectedRows.length === banks?.length}
                onChange={() => {
                  selectAllRows(banks)
                }}
              />
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">Logo</TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">Bank Name</TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Short Name
            </TableHeadCell>
            {user?.role === 'super_admin' && (
              <TableHeadCell className="text-nowrap p-4 sticky right-0 w-20 text-right">
                Action
              </TableHeadCell>
            )}
          </TableRow>
        </TableHead>

        <TableBody className="divide-y divide-gray-200">
          {isLoading ? (
            Array.from({ length: 6 }).map((_, idx) => (
              <TableRow key={`sk-${idx}`} className="bg-white animate-pulse">
                <TableCell className="text-center p-4">
                  <div className="w-4 h-4 bg-slate-200 rounded mx-auto" />
                </TableCell>
                <TableCell className="p-4">
                  <div className="w-12 h-12 bg-slate-200 rounded" />
                </TableCell>
                {Array.from({
                  length: user?.role === 'super_admin' ? 3 : 2,
                }).map((_, cellIdx) => (
                  <TableCell key={cellIdx} className="p-4">
                    <div className="h-4 bg-slate-200 rounded w-full" />
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : banks.length > 0 ? (
            banks.map((bank) => (
              <TableRow key={bank.id} className="bg-white">
                <TableCell className="text-center p-4">
                  <Checkbox
                    color="blue"
                    checked={isRowSelected(bank)}
                    onChange={() => toggleRowSelection(bank)}
                  />
                </TableCell>

                {/* Bank Logo */}
                <TableCell className="p-4">
                  {bank.logo_url ? (
                    <Image
                      src={bank.logo_url}
                      alt={bank.bank_name}
                      width={48}
                      height={48}
                      className="w-12 h-12 object-contain rounded"
                    />
                  ) : (
                    <div className="w-12 h-12 bg-gray-200 rounded flex items-center justify-center">
                      <span className="text-gray-400 text-xs">No logo</span>
                    </div>
                  )}
                </TableCell>

                {/* Bank Name */}
                <TableCell className="text-nowrap p-4 text-black font-medium">
                  {bank.bank_name}
                </TableCell>

                {/* Short Name */}
                <TableCell className="text-nowrap p-4">
                  {bank.short_name}
                </TableCell>

                {/* Action */}
                {user?.role === 'super_admin' && (
                  <TableCell className="text-nowrap sticky right-0 gap-2 p-4 bg-gray-100 w-fit ml-auto !border-b-0">
                    <Dropdown
                      label={<HiOutlineDotsHorizontal />}
                      placement="left-start"
                      arrowIcon={false}
                      color="alternative"
                      theme={tableTheme.dropdown}
                    >
                      <DropdownItem
                        icon={FiEdit}
                        onClick={() => handleEdit(bank)}
                      >
                        Edit
                      </DropdownItem>
                      <DropdownDivider />
                      <DropdownItem
                        icon={FiTrash}
                        onClick={() => handleDelete(bank)}
                      >
                        Delete
                      </DropdownItem>
                    </Dropdown>
                  </TableCell>
                )}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={5} className="text-center p-8">
                No data available
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  )
}