import AdminTableUser from '@/components/common/admin-table-user';
import ConfirmDeleteButton from '@/components/common/confirm-delete-button';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { TableBar } from '@/components/common/table-bar';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { updateKycStatus } from '@/data/admin/kyc/update-kyc-status';
import { useTableData } from '@/data/useTableData';
import { KycStatus } from '@/types';
import { replaceDashesWithSpaces } from '@/utils/strHelpers';
import { router } from '@inertiajs/react';
import { CaretDownIcon, CaretRightIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const Kyc = ({ status }: { status: string }) => {
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, refresh, meta } = useTableData(
    '/admin/kycs?status=' + status,
  );
  const { t } = useTranslation();

  const handleVariant = (status: string) => {
    switch (status) {
      case 'approved':
        return 'outlineSuccess';
      case 'rejected':
        return 'outlineDestructive';
      case 'hard_rejected':
        return 'outlineDestructive';
      case 'pending':
        return 'outlineWarning';
      default:
        return 'outline';
    }
  };

  const handleStatusChange = (id: number, status: string) => {
    toast.promise(
      updateKycStatus({
        id,
        status: status as KycStatus,
      }),
      {
        loading: t('Updating...'),
        success: (res) => {
          if (!res.message) throw new Error(res.message);
          refresh();
          return res.message;
        },
        error: t('Failed to update'),
      },
    );
  };

  return (
    <>
      <PageHeading
        title={t('KYC')}
        description={t(
          'Manage user KYC submissions and their verification status.',
        )}
      />
      <TableBar dateFilter={false} />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'user',
            header: t('User'),
            cell: ({ row }) => <AdminTableUser user={row.original.user} />,
          },
          {
            accessorKey: 'type',
            header: t('Type'),
          },
          {
            accessorKey: 'created_at',
            header: t('Date'),
            cell: ({ row }) => {
              const date = dayjs(row.original.created_at).format(
                'MMM D, YYYY h:mm A',
              );
              return (
                <div>
                  <p className="mb-1">{date}</p>
                  <p className="text-sm text-black/50">
                    {dayjs(row.original.created_at).fromNow()}
                  </p>
                </div>
              );
            },
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant={handleVariant(row.original.status)}
                      className="w-32 justify-between capitalize"
                    >
                      {row.original.status}
                      <CaretDownIcon weight="bold" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent>
                    {['pending', 'approved', 'rejected', 'hard_rejected'].map(
                      (opt) => (
                        <DropdownMenuItem
                          key={opt}
                          onClick={() =>
                            handleStatusChange(row.original.id, opt)
                          }
                        >
                          {replaceDashesWithSpaces(opt, true)}
                        </DropdownMenuItem>
                      ),
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(
                      `/admin/users/${row.original?.user_id}?tab=kyc`,
                    )
                  }
                >
                  {t('Details')}
                  <CaretRightIcon weight="bold" className="size-4" />
                </Button>
                <ConfirmDeleteButton
                  url={`/api/admin/transactions/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t(
                    'This will permanently delete this transaction.',
                  )}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Kyc.title = 'KYC';

export default Kyc;