import ResolveMarketDialog, {
  ResolveMarketDialogHandle,
} from '@/components/admin/market-management/resolve-market-dialog';
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 {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { createRequest } from '@/data/request/create-request';
import { useTableData } from '@/data/useTableData';
import { useCurrency } from '@/hooks/use-currency';
import QueryBuilder from '@/lib/query-builder';
import { TMarket } from '@/types/market.types';
import { router } from '@inertiajs/react';
import {
  ArrowSquareOutIcon,
  CaretDownIcon,
  CheckCircleIcon,
  LockSimpleIcon,
  LockSimpleOpenIcon,
  PencilSimpleIcon,
  PlusIcon,
  TrophyIcon,
} from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

type MarketStatus = TMarket['status'];

const STATUS_VARIANT: Record<
  MarketStatus,
  'secondary' | 'successSubtle' | 'warning' | 'destructive' | 'default'
> = {
  draft: 'secondary',
  open: 'successSubtle',
  closed: 'warning',
  proposed: 'warning',
  resolved: 'default',
  cancelled: 'destructive',
};

const Markets = () => {
  const builder = QueryBuilder();
  builder.sort('created_at', 'desc');

  const [sorting, setSorting] = useState<SortingState>([]);
  const { items, isLoading, meta, refresh } = useTableData(
    `/admin/markets${builder.build()}`,
  );
  const { t } = useTranslation();
  const { format } = useCurrency();

  const resolveRef = useRef<ResolveMarketDialogHandle>(null);

  const handleAction = (url: string, successMsg: string) =>
    toast.promise(
      createRequest({ url }).then((res) => {
        if (res !== undefined) refresh();
      }),
      {
        loading: t('Processing…'),
        success: successMsg,
        error: t('Action failed.'),
      },
    );

  return (
    <div>
      <PageHeading
        title={t('Markets')}
        description={t('Create and manage prediction markets.')}
      />

      <TableBar
        builder={builder}
        searchFields={['title']}
        addButton={
          <Button onClick={() => router.visit('/admin/markets/create')}>
            <PlusIcon weight="bold" className="mr-1.5 size-4" />
            {t('Create Market')}
          </Button>
        }
      />

      <DataTable
        data={items}
        sorting={sorting}
        setSorting={setSorting}
        isLoading={isLoading}
        pagination={meta}
        onPageChange={(p) => builder.page(p)}
        onLimitChange={(l) => builder.limit(l)}
        structure={[
          {
            accessorKey: 'title',
            header: t('Market'),
            cell: ({ row }) => (
              <div>
                <p className="line-clamp-2 max-w-xs font-medium">
                  {row.original.title}
                </p>
                {row.original.category && (
                  <p className="mt-0.5 text-xs text-black/40 dark:text-white/40">
                    {row.original.category.name}
                  </p>
                )}
              </div>
            ),
          },
          {
            accessorKey: 'type',
            header: t('Type'),
            cell: ({ row }) => (
              <Badge variant={'outline'} className="capitalize">
                {row.original.type}
              </Badge>
            ),
          },
          {
            accessorKey: 'status',
            header: t('Status'),
            cell: ({ row }) => {
              const m = row.original;
              const canOpen = m.status === 'draft' || m.status === 'closed';
              const canClose = m.status === 'open';
              const canResolve = m.status === 'open' || m.status === 'closed';
              const isProposed = m.status === 'proposed';
              const hasStatusAction =
                canOpen || canClose || canResolve || isProposed;

              if (!hasStatusAction) {
                return (
                  <Button
                    variant={STATUS_VARIANT[m.status as MarketStatus]}
                    size="sm"
                    className="capitalize"
                  >
                    {m.status}
                  </Button>
                );
              }

              return (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant={STATUS_VARIANT[m.status as MarketStatus]}
                      size="sm"
                      className="cursor-pointer gap-1 capitalize"
                    >
                      {m.status}
                      <div>
                        <CaretDownIcon weight="bold" className="size-3" />
                      </div>
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="start" className="w-40">
                    {canOpen && (
                      <DropdownMenuItem
                        className="h-6 text-emerald-600 focus:text-emerald-600"
                        onClick={() =>
                          handleAction(
                            `/api/admin/markets/${m.id}/open`,
                            t('Market opened.'),
                          )
                        }
                      >
                        <LockSimpleOpenIcon weight="bold" className="size-3" />
                        {t('Open')}
                      </DropdownMenuItem>
                    )}
                    {canClose && (
                      <DropdownMenuItem
                        className="h-6 text-yellow-600 focus:text-yellow-600"
                        onClick={() =>
                          handleAction(
                            `/api/admin/markets/${m.id}/close`,
                            t('Market closed.'),
                          )
                        }
                      >
                        <LockSimpleIcon weight="bold" className="size-3" />
                        {t('Close')}
                      </DropdownMenuItem>
                    )}
                    {canResolve && (
                      <DropdownMenuItem
                        onClick={() => resolveRef.current?.open(m)}
                      >
                        <TrophyIcon weight="bold" className="size-4" />
                        {t('Resolve')}
                      </DropdownMenuItem>
                    )}
                    {isProposed && (
                      <DropdownMenuItem
                        className="h-6 text-emerald-600 focus:text-emerald-600"
                        onClick={() =>
                          handleAction(
                            `/api/admin/markets/${m.id}/confirm-proposed`,
                            t('Proposed outcome confirmed.'),
                          )
                        }
                      >
                        <CheckCircleIcon weight="bold" className="size-3" />
                        {t('Confirm')}
                      </DropdownMenuItem>
                    )}
                    {isProposed && (
                      <DropdownMenuItem
                        onClick={() => resolveRef.current?.open(m)}
                      >
                        <TrophyIcon weight="bold" className="size-4" />
                        {t('Override')}
                      </DropdownMenuItem>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
              );
            },
          },
          {
            accessorKey: 'total_volume',
            header: t('Volume'),
            cell: ({ row }) => format(Number(row.original.total_volume)),
          },
          {
            accessorKey: 'closes_at',
            header: t('Closes'),
            cell: ({ row }) =>
              dayjs(row.original.closes_at).format('MMM D, YYYY hh:mm a'),
          },
          {
            id: 'actions',
            header: t('Actions'),
            cell: ({ row }) => {
              const m = row.original;
              return (
                <div className="flex items-center gap-1.5">
                  <Button
                    variant="ghostPrimary"
                    onClick={() => router.visit(`/admin/markets/${m.id}`)}
                  >
                    {t('View')}
                    <ArrowSquareOutIcon weight="bold" className="size-4" />
                  </Button>

                  {!m.status.match(/^(resolved|cancelled)$/) && (
                    <Button
                      variant="ghostPrimary"
                      onClick={() =>
                        router.visit(`/admin/markets/${m.id}/edit`)
                      }
                    >
                      {t('Edit')}
                      <PencilSimpleIcon weight="bold" className="size-4" />
                    </Button>
                  )}

                  {m.status === 'draft' && (
                    <ConfirmDeleteButton
                      url={`/api/admin/markets/${m.id}`}
                      onSuccess={refresh}
                      description={t(
                        'This will permanently delete this market.',
                      )}
                    />
                  )}
                </div>
              );
            },
          },
        ]}
      />

      <ResolveMarketDialog ref={resolveRef} onSuccess={refresh} />
    </div>
  );
};

Markets.title = 'Markets';

export default Markets;