import React, { Dispatch, SetStateAction } from 'react'
import {
  Badge,
  Checkbox,
  Dropdown,
  DropdownDivider,
  DropdownItem,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import { isSameDay } from 'date-fns'
import { HiOutlineDotsHorizontal } from 'react-icons/hi'
import { FiEdit, FiEye, FiFileText, FiLink2, FiTrash } from 'react-icons/fi'
import { useRouter } from 'next/navigation'

import tableTheme from '@/lib/themes/table'
import { useTable } from '@/lib/hooks/useTable'
import { cn } from '@/lib/utils/tw-merge'
import { formatToMYT } from '@/lib/utils/date'
import { capitalizeWords } from '@/lib/utils/string'
import { TravelPartner } from '@/lib/types/partner'
import { PartnerCategory } from '@/lib/types/enums/partner'

interface DataTableProps {
  travelPartners: TravelPartner[]
  isLoading?: boolean
  setModal: Dispatch<SetStateAction<ModalState<TravelPartner>>>
  setTravelPartner: Dispatch<SetStateAction<TravelPartner | null>>
}

export default function DataTable({
  travelPartners,
  isLoading = false,
  setModal,
  setTravelPartner,
}: DataTableProps) {
  const router = useRouter()
  const { selectAllRows, selectedRows, toggleRowSelection, isRowSelected } =
    useTable<TravelPartner>()

  function handleDelete(travelPartner: TravelPartner) {
    setModal({ type: 'delete', isOpened: true })
    setTravelPartner(travelPartner)
  }

  function handleEdit(travelPartner: TravelPartner) {
    router.push(`/travel-partners/${travelPartner.id}/edit`)
  }

  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 === travelPartners?.length}
                onChange={() => {
                  selectAllRows(travelPartners)
                }}
              />
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Partner Name
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Partner Email
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">Category</TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Guest Market
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Referral Code
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Total Referral Links
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Merchant Codes
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Created At
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Updated At
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Created By
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Updated By
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4 sticky right-0 w-20">
              Action
            </TableHeadCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {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>

                {Array.from({ length: 12 }).map((_, cellIdx) => (
                  <TableCell key={cellIdx} className="p-4">
                    <div className="h-4 bg-slate-200 rounded w-full" />
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : travelPartners?.length > 0 ? (
            travelPartners.map((travelPartner) => (
              <TableRow
                key={travelPartner.id}
                className={cn('bg-white', {
                  'bg-blue-50': isRowSelected(travelPartner),
                })}
              >
                <TableCell className="text-center p-4">
                  <Checkbox
                    color="blue"
                    checked={isRowSelected(travelPartner)}
                    onChange={() => toggleRowSelection(travelPartner)}
                  />
                </TableCell>

                {/* Partner Name */}
                <TableCell className="text-nowrap p-4 text-black">
                  {travelPartner.partner_category === PartnerCategory.Driver
                    ? travelPartner.driver?.name
                    : travelPartner.business?.business_name}
                </TableCell>

                {/* Partner Email */}
                <TableCell className="p-4 text-nowrap">
                  {travelPartner.partner_category === PartnerCategory.Driver
                    ? travelPartner.driver?.email
                    : travelPartner.business?.business_email}
                </TableCell>

                {/* Category */}
                <TableCell className="p-4 text-nowrap">
                  <Badge
                    color={
                      travelPartner.partner_category === PartnerCategory.Driver
                        ? 'blue'
                        : 'green'
                    }
                    size="xs"
                    className="w-fit"
                  >
                    {travelPartner.partner_category ===
                    PartnerCategory.HotelVilla
                      ? 'Hotel/Villa'
                      : capitalizeWords(travelPartner.partner_category)}
                  </Badge>
                </TableCell>

                {/* Guest Market */}
                <TableCell className="p-4 text-nowrap">
                  {travelPartner.guest_market}
                </TableCell>

                {/* Referral Code */}
                <TableCell className="p-4 text-nowrap font-mono">
                  {travelPartner.referral_code}
                </TableCell>

                {/* Total Referral Links */}
                <TableCell className="p-4 text-nowrap">
                  <Badge
                    color={
                      travelPartner.referral_links.length > 0 ? 'blue' : 'gray'
                    }
                    size="xs"
                    className="w-fit px-2"
                    icon={FiLink2}
                  >
                    {travelPartner.referral_links.length || 0}{' '}
                    {travelPartner.referral_links.length <= 1
                      ? 'Link'
                      : 'Links'}
                  </Badge>
                </TableCell>

                {/* Merchant Codes */}
                <TableCell className="p-4">
                  <div className="flex flex-wrap gap-1">
                    {travelPartner.merchant_codes?.length > 0
                      ? travelPartner.merchant_codes.map((code) => (
                          <Badge
                            key={code}
                            color="light"
                            size="xs"
                            className="w-fit px-2 mr-1 mb-1"
                          >
                            {code}
                          </Badge>
                        ))
                      : 'N/A'}
                  </div>
                </TableCell>

                {/* Created At */}
                <TableCell
                  className={`p-4 text-nowrap ${isSameDay(new Date(), new Date(travelPartner?.created_at as string)) ? 'text-green-600 font-medium' : ''}`}
                >
                  {formatToMYT(travelPartner?.created_at)}
                </TableCell>

                {/* Updated At */}
                <TableCell
                  className={`p-4 text-nowrap ${isSameDay(new Date(), new Date(travelPartner?.updated_at as string)) ? 'text-green-600 font-medium' : ''}`}
                >
                  {formatToMYT(travelPartner?.updated_at)}
                </TableCell>

                {/* Created By */}
                <TableCell className="p-4 text-nowrap">
                  {travelPartner.created_by?.name || 'N/A'}
                </TableCell>

                {/* Updated By */}
                <TableCell className="p-4 text-nowrap">
                  {travelPartner.updated_by?.name || 'N/A'}
                </TableCell>

                <TableCell className="text-nowrap sticky right-0 gap-2 p-4 bg-gray-100 z-2 w-fit ml-auto">
                  <Dropdown
                    label={<HiOutlineDotsHorizontal />}
                    placement="left-start"
                    arrowIcon={false}
                    color="alternative"
                    theme={tableTheme.dropdown}
                  >
                    <DropdownItem
                      icon={FiTrash}
                      onClick={() => {
                        handleDelete(travelPartner)
                      }}
                    >
                      Delete
                    </DropdownItem>
                    <DropdownDivider />
                    <DropdownItem
                      icon={FiEdit}
                      onClick={() => handleEdit(travelPartner)}
                    >
                      Edit
                    </DropdownItem>
                    <DropdownDivider />
                    <DropdownItem
                      icon={FiEye}
                      onClick={() =>
                        router.push(`/travel-partners/${travelPartner.id}`)
                      }
                    >
                      View Details
                    </DropdownItem>
                    {travelPartner.agreement_document_url && (
                      <React.Fragment>
                        <DropdownDivider />
                        <DropdownItem
                          icon={FiFileText}
                          as="a"
                          href={travelPartner.agreement_document_url}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          View Agreement
                        </DropdownItem>
                      </React.Fragment>
                    )}
                  </Dropdown>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={13} className="text-center p-8">
                No data available
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  )
}