'use client'

import {
  Badge,
  Checkbox,
  Dropdown,
  DropdownItem,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeadCell,
  TableRow,
} from 'flowbite-react'
import { isSameDay } from 'date-fns'
import { HiOutlineDotsHorizontal } from 'react-icons/hi'
import { FiDownload, FiEye } from 'react-icons/fi'

import tableTheme from '@/lib/themes/table'
import { useTable } from '@/lib/hooks/useTable'
import { cn } from '@/lib/utils/tw-merge'
import {
  formatToMYT,
  getKualaLumpurDate,
  parseKualaLumpurDate,
} from '@/lib/utils/date'
import { formatIDR } from '@/lib/utils/currency'
import badgeTheme from '@/lib/themes/badge'
import { capitalizeWords } from '@/lib/utils/string'
import { PartnerCategory } from '@/lib/types/enums/partner'
import { Partner } from '@/lib/types/partner'
import { Withdrawal } from '../types'

interface DataTableProps {
  withdrawals: Withdrawal[]
  isLoading?: boolean
  onViewTransferProof: (withdrawal: Withdrawal) => void
}

function getPartnerName(partner?: Partner | null): string {
  if (!partner) return 'N/A'

  if (
    partner.partner_category === PartnerCategory.HotelVilla ||
    partner.partner_category === PartnerCategory.Restaurant
  ) {
    return partner.business?.business_name || 'N/A'
  }

  if (partner.partner_category === PartnerCategory.Driver) {
    return partner.driver?.name || 'N/A'
  }

  return 'N/A'
}

export default function DataTable({
  withdrawals,
  isLoading = false,
  onViewTransferProof,
}: DataTableProps) {
  const { selectAllRows, selectedRows, toggleRowSelection, isRowSelected } =
    useTable<Withdrawal>()

  const columnCount = 11

  const statusColor: Record<string, string> = {
    pending: 'yellow',
    processing: 'blue',
    completed: 'green',
    rejected: 'red',
    cancelled: 'gray',
  }

  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 === withdrawals?.length}
                onChange={() => {
                  selectAllRows(withdrawals)
                }}
              />
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">Code</TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Partner Name
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Requested At
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Requested Amount
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Withdrawal Fee
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Net Amount
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">Status</TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Processed At
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Updated At
            </TableHeadCell>
            <TableHeadCell className="text-nowrap p-4">
              Processed 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: columnCount }).map((_, cellIdx) => (
                  <TableCell key={cellIdx} className="p-4">
                    <div className="h-4 bg-slate-200 rounded w-full" />
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : withdrawals.length > 0 ? (
            withdrawals.map((withdrawal) => (
              <TableRow
                key={withdrawal.id}
                className={cn('bg-white', {
                  'bg-blue-50': isRowSelected(withdrawal),
                })}
              >
                <TableCell className="text-center p-4">
                  <Checkbox
                    color="blue"
                    checked={isRowSelected(withdrawal)}
                    onChange={() => toggleRowSelection(withdrawal)}
                  />
                </TableCell>

                {/* Code */}
                <TableCell className="text-nowrap p-4 text-black font-medium">
                  {withdrawal.code}
                </TableCell>

                {/* Partner Name */}
                <TableCell className="text-nowrap p-4">
                  {getPartnerName(withdrawal.partner)}
                </TableCell>

                {/* Requested At */}
                <TableCell
                  className={`p-4 text-nowrap ${withdrawal?.created_at && isSameDay(getKualaLumpurDate(new Date(), true), parseKualaLumpurDate(withdrawal.created_at)) ? 'text-green-600 font-medium' : ''}`}
                >
                  {formatToMYT(withdrawal?.created_at)}
                </TableCell>

                {/* Requested Amount */}
                <TableCell className="text-nowrap p-4">
                  {formatIDR(withdrawal.requested_amount)}
                </TableCell>

                {/* Withdrawal Fee */}
                <TableCell className="text-nowrap p-4">
                  {formatIDR(withdrawal.withdrawal_fee)}
                </TableCell>

                {/* Net Amount  */}
                <TableCell className="text-nowrap p-4">
                  {formatIDR(withdrawal.net_amount)}
                </TableCell>

                {/* Status */}
                <TableCell className="text-nowrap p-4">
                  <Badge
                    theme={badgeTheme.badge}
                    color={statusColor[withdrawal.status || 'pending']}
                  >
                    {capitalizeWords(withdrawal.status)}
                  </Badge>
                </TableCell>

                {/* Processed At */}
                <TableCell
                  className={`p-4 text-nowrap ${withdrawal?.processed_at && isSameDay(getKualaLumpurDate(new Date(), true), parseKualaLumpurDate(withdrawal.processed_at)) ? 'text-green-600 font-medium' : ''}`}
                >
                  {withdrawal?.processed_at
                    ? formatToMYT(withdrawal.processed_at)
                    : 'N/A'}
                </TableCell>

                {/* Updated At */}
                <TableCell
                  className={`p-4 text-nowrap ${withdrawal?.updated_at && isSameDay(getKualaLumpurDate(new Date(), true), parseKualaLumpurDate(withdrawal.updated_at)) ? 'text-green-600 font-medium' : ''}`}
                >
                  {withdrawal?.updated_at
                    ? formatToMYT(withdrawal.updated_at)
                    : 'N/A'}
                </TableCell>

                {/* Processed By */}
                <TableCell className="p-4 text-nowrap">
                  {withdrawal.processed_by
                    ? withdrawal.processed_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}
                  >
                    {withdrawal.status === 'completed' &&
                      withdrawal.transfer_proof && (
                        <DropdownItem
                          icon={FiDownload}
                          onClick={() => onViewTransferProof(withdrawal)}
                        >
                          Transfer Proof
                        </DropdownItem>
                      )}

                    <DropdownItem
                      icon={FiEye}
                      as="a"
                      href={`/withdrawals/${withdrawal.id}`}
                    >
                      View Details
                    </DropdownItem>
                  </Dropdown>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columnCount + 1} className="text-center p-8">
                No data available
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  )
}