import { DownloadCsvButton } from '@/components/admin/download-csv-button';
import AddUser from '@/components/admin/user-management/add-user';
import NotifyUser from '@/components/admin/user-management/notify-user';
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 { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import { toggleStatus } from '@/data/request/toggle-status';
import { useTableData } from '@/data/useTableData';
import { useCurrency } from '@/hooks/use-currency';
import QueryBuilder from '@/lib/query-builder';
import { TRole } from '@/types/admin/staff-type';
import { router } from '@inertiajs/react';
import { CaretRightIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const Users = () => {
  const builder = QueryBuilder();
  builder.sort('created_at', 'desc');
  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/users${builder.build()}`,
  );
  const { data: roles, isLoading: rolesLoading } =
    useTableData<TRole[]>('/admin/roles');

  const { format } = useCurrency();
  const { t } = useTranslation();

  const handleStatusChange = (id: number) => {
    toast.promise(toggleStatus(`/api/admin/users/${id}/toggle-status`), {
      loading: t('Updating status...'),
      success: (res) => {
        if (!res.message) throw new Error(res.message);
        refresh();
        return res.message;
      },
      error: t('Failed to update status.'),
    });
  };

  return (
    <>
      <PageHeading
        title={t('Manage Users')}
        description={t('View and manage all user accounts on the platform.')}
      />
      <TableBar
        dateFilter={false}
        addButton={<AddUser roles={roles!} refresh={refresh} />}
        builder={builder}
        searchFields={['first_name', 'last_name', 'email']}
        downloadCsvButton={<DownloadCsvButton resource="users" />}
      />
      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading || rolesLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'id',
            header: t('ID'),
            cell: ({ row }) => String(row.original.id).padStart(2, '0'),
          },
          {
            accessorKey: 'first_name',
            header: t('User'),
            cell: ({ row }) => {
              return <AdminTableUser user={row.original} link />;
            },
          },
          {
            accessorKey: 'profile.main_balance',
            header: t('Main Balance'),
            cell: ({ row }) => format(row.original?.profile?.main_balance),
          },
          {
            accessorKey: 'profile.interest_balance',
            header: t('Interest Balance'),
            cell: ({ row }) => format(row.original?.profile?.interest_balance),
          },
          {
            accessorKey: 'email_verified_at',
            header: t('Email Status'),
            cell: ({ row }) => (
              <Badge
                variant={
                  row.original?.email_verified_at ? 'success' : 'destructive'
                }
              >
                {row.original?.email_verified_at
                  ? t('Verified')
                  : t('Unverified')}
              </Badge>
            ),
          },
          {
            accessorKey: 'is_kyc_verified',
            header: t('KYC Status'),
            cell: ({ row }) => (
              <Badge
                variant={
                  row.original?.is_kyc_verified ? 'success' : 'destructive'
                }
              >
                {row.original?.is_kyc_verified
                  ? t('Verified')
                  : t('Unverified')}
              </Badge>
            ),
          },
          {
            accessorKey: 'is_active',
            header: t('Active'),
            cell: ({ row }) => (
              <Switch
                id={row.original?.id}
                defaultChecked={row.original?.is_active as boolean}
                onCheckedChange={() => handleStatusChange(row.original.id)}
              />
            ),
          },
          {
            accessorKey: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex space-x-2">
                <NotifyUser userId={row.original?.id} />
                <Button
                  variant="ghostPrimary"
                  onClick={() =>
                    router.visit(`/admin/users/${row.original?.id}`)
                  }
                >
                  {t('Details')}
                  <CaretRightIcon weight="bold" className="size-4" />
                </Button>
                <ConfirmDeleteButton
                  url={`/api/admin/users/${row.original?.id}`}
                  onSuccess={refresh}
                  description={t('This will permanently delete this user.')}
                />
              </div>
            ),
          },
        ]}
      />
    </>
  );
};

Users.title = 'Users';

export default Users;