import ResolveMarketDialog, {
  ResolveMarketDialogHandle,
} from '@/components/admin/market-management/resolve-market-dialog';
import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { createRequest } from '@/data/request/create-request';
import { useTableData } from '@/data/useTableData';
import QueryBuilder from '@/lib/query-builder';
import { TMarket, TMarketOutcome } from '@/types/market.types';
import { CheckCircleIcon, 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';

/** Human-friendly time left before a proposed market auto-finalises. */
function finalisesIn(market: TMarket, t: (k: string) => string): string {
  if (!market.proposed_at) return '—';
  const finaliseAt = dayjs(market.proposed_at).add(
    market.dispute_window_minutes ?? 0,
    'minute',
  );
  const mins = finaliseAt.diff(dayjs(), 'minute');
  if (mins <= 0) return t('Due now');
  if (mins < 60) return `${mins}m`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ${mins % 60}m`;
  return `${Math.floor(hrs / 24)}d ${hrs % 24}h`;
}

const PendingResolution = () => {
  const builder = QueryBuilder();
  builder.filter('status', 'proposed');
  builder.sort('proposed_at', 'asc');

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

  const confirm = (m: TMarket) =>
    toast.promise(
      createRequest({
        url: `/api/admin/markets/${m.id}/confirm-proposed`,
      }).then((res) => {
        if (res !== undefined) refresh();
      }),
      {
        loading: t('Confirming…'),
        success: t('Proposed outcome confirmed.'),
        error: t('Action failed.'),
      },
    );

  return (
    <div>
      <PageHeading
        title={t('Pending Resolution')}
        description={t(
          'Markets an oracle has proposed an outcome for, awaiting confirmation before auto-finalising.',
        )}
      />

      <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>
            ),
          },
          {
            id: 'proposed_outcome',
            header: t('Proposed Outcome'),
            cell: ({ row }) => {
              const outcome = row.original.outcomes?.find(
                (o: TMarketOutcome) =>
                  o.id === row.original.proposed_outcome_id,
              );
              return outcome ? (
                <Badge
                  variant="successOutline"
                  style={
                    outcome.color
                      ? { borderColor: outcome.color, color: outcome.color }
                      : undefined
                  }
                >
                  {outcome.title}
                </Badge>
              ) : (
                <span className="text-black/40">—</span>
              );
            },
          },
          {
            accessorKey: 'oracle_type',
            header: t('Source'),
            cell: ({ row }) => (
              <Badge variant="outline">{row.original.oracle_type}</Badge>
            ),
          },
          {
            id: 'finalises_in',
            header: t('Finalises In'),
            cell: ({ row }) => (
              <span className="text-sm font-medium">
                {finalisesIn(row.original, t)}
              </span>
            ),
          },
          {
            id: 'actions',
            header: t('Actions'),
            cell: ({ row }) => (
              <div className="flex items-center gap-1.5">
                <Button
                  variant="successSubtle"
                  size="sm"
                  onClick={() => confirm(row.original)}
                >
                  <CheckCircleIcon weight="bold" className="mr-1 size-4" />
                  {t('Confirm')}
                </Button>
                <Button
                  variant="ghostPrimary"
                  size="sm"
                  onClick={() => resolveRef.current?.open(row.original)}
                >
                  <TrophyIcon weight="bold" className="mr-1 size-4" />
                  {t('Override')}
                </Button>
              </div>
            ),
          },
        ]}
      />

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

PendingResolution.title = 'Pending Resolution';

export default PendingResolution;