import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import { Badge } from '@/components/ui/badge';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { TMarket, TMarketOutcome } from '@/types/market.types';
import { usePage } from '@inertiajs/react';
import { ChartLineUpIcon, ClockIcon, UsersIcon } from '@phosphor-icons/react';
import { SortingState } from '@tanstack/react-table';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';

type AdminPosition = {
  id: number;
  user: { id: number; first_name: string; last_name: string; email: string };
  outcome: TMarketOutcome;
  shares: number;
  avg_price: number;
  current_value: number;
};

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

const ORACLE_HIDDEN_KEYS = ['outcome_map', 'resolve_at'];

const MarketDetail = () => {
  const { t } = useTranslation();
  const { format } = useCurrency();
  const [sorting, setSorting] = useState<SortingState>([]);

  const marketId = usePage().url.split('?')[0].split('/')[3];

  const { data: market, isLoading } = useApiSWR<TMarket>(
    marketId ? `/admin/markets/${marketId}` : null,
  );
  const { data: positions, isLoading: positionsLoading } = useApiSWR<
    AdminPosition[]
  >(marketId ? `/admin/markets/${marketId}/positions` : null);

  if (isLoading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div
            key={i}
            className="h-12 animate-pulse rounded-xl bg-black/5 dark:bg-white/5"
          />
        ))}
      </div>
    );
  }

  if (!market) {
    return (
      <div className="py-20 text-center text-black/40 dark:text-white/40">
        {t('Market not found.')}
      </div>
    );
  }

  const totalShares = (positions ?? []).reduce((s, p) => s + p.shares, 0);

  const isOracle = !!market.oracle_type && market.oracle_type !== 'manual';
  const showResolution =
    isOracle || !!market.resolution_criteria || market.status === 'proposed';

  const outcomeTitle = (id: unknown) =>
    market.outcomes.find((o) => o.id === Number(id))?.title ?? String(id);

  const oracleConfig = (market.oracle_config ?? {}) as Record<string, unknown>;
  const outcomeMap = oracleConfig.outcome_map as
    | Record<string, unknown>
    | undefined;

  const proposedOutcome = market.proposed_outcome_id
    ? market.outcomes.find((o) => o.id === market.proposed_outcome_id)
    : null;
  const finalisesAt =
    market.status === 'proposed' && market.proposed_at
      ? dayjs(market.proposed_at).add(
          market.dispute_window_minutes ?? 0,
          'minute',
        )
      : null;

  return (
    <div className="space-y-6">
      <PageHeading
        title={market.title}
        description={market.description ?? undefined}
        backButton
      />

      {/* Meta row */}
      <div className="flex flex-wrap items-center gap-3">
        {market.category && (
          <Badge variant="secondary">{market.category.name}</Badge>
        )}
        <Badge variant={STATUS_VARIANT[market.status]} className="capitalize">
          {market.status}
        </Badge>
        <Badge variant="secondary" className="capitalize">
          {market.type}
        </Badge>
        <Badge variant="outline">
          {market.engine === 'clob' ? t('Order Book') : t('AMM')}
        </Badge>
        <span className="flex items-center gap-1 text-sm text-black/40 dark:text-white/40">
          <ChartLineUpIcon weight="bold" className="size-4" />
          {format(market.total_volume)} {t('volume')}
        </span>
        <span className="flex items-center gap-1 text-sm text-black/40 dark:text-white/40">
          <ClockIcon weight="bold" className="size-4" />
          {dayjs(market.closes_at).format('MMM D, YYYY HH:mm')}
        </span>
        <span className="flex items-center gap-1 text-sm text-black/40 dark:text-white/40">
          <UsersIcon weight="bold" className="size-4" />
          {(positions ?? []).length} {t('holders')}
        </span>
      </div>

      {/* Resolution */}
      {showResolution && (
        <div className="space-y-3 rounded-xl border border-black/5 p-4 dark:border-white/10">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-medium text-black/50 dark:text-white/50">
              {t('Resolution')}
            </h2>
            <Badge variant="outline">
              {isOracle ? market.oracle_type : t('Manual')}
            </Badge>
          </div>

          {market.status === 'proposed' && proposedOutcome && (
            <div className="rounded-lg bg-warning/10 px-3 py-2 text-sm">
              {t('Proposed outcome')}:{' '}
              <span
                className="font-medium"
                style={{ color: proposedOutcome.color ?? undefined }}
              >
                {proposedOutcome.title}
              </span>
              {finalisesAt && (
                <span className="text-black/50 dark:text-white/50">
                  {' '}
                  · {t('finalises')} {finalisesAt.format('MMM D, YYYY HH:mm')}
                </span>
              )}
            </div>
          )}

          {isOracle && (
            <dl className="grid grid-cols-2 gap-x-6 gap-y-2 text-sm">
              {Object.entries(oracleConfig)
                .filter(([k]) => !ORACLE_HIDDEN_KEYS.includes(k))
                .map(([k, v]) => (
                  <div key={k} className="flex justify-between gap-2">
                    <dt className="text-black/50 capitalize dark:text-white/50">
                      {k.replace(/_/g, ' ')}
                    </dt>
                    <dd className="font-medium">{String(v)}</dd>
                  </div>
                ))}
              {outcomeMap &&
                Object.entries(outcomeMap).map(([caseKey, outcomeId]) => (
                  <div key={caseKey} className="flex justify-between gap-2">
                    <dt className="text-black/50 capitalize dark:text-white/50">
                      {caseKey} →
                    </dt>
                    <dd className="font-medium">{outcomeTitle(outcomeId)}</dd>
                  </div>
                ))}
              <div className="flex justify-between gap-2">
                <dt className="text-black/50 dark:text-white/50">
                  {t('Dispute window')}
                </dt>
                <dd className="font-medium">
                  {market.dispute_window_minutes ?? 0} {t('min')}
                </dd>
              </div>
            </dl>
          )}

          {market.resolution_criteria && (
            <p className="border-t border-black/5 pt-3 text-sm text-black/60 dark:border-white/10 dark:text-white/60">
              {market.resolution_criteria}
            </p>
          )}
        </div>
      )}

      {/* Outcomes */}
      <div>
        <h2 className="mb-3 text-sm font-medium text-black/50 dark:text-white/50">
          {t('Outcomes')}
        </h2>
        <div className="space-y-2">
          {market.outcomes.map((o) => {
            const pct = Math.round((o.probability ?? 0) * 100);
            return (
              <div key={o.id}>
                <div className="mb-1 flex items-center justify-between text-sm">
                  <span
                    className="font-medium"
                    style={{ color: o.color ?? undefined }}
                  >
                    {o.title}
                    {o.is_winner && (
                      <span className="ml-2 text-xs text-success">
                        {t('Winner')}
                      </span>
                    )}
                  </span>
                  <span className="text-black/50 dark:text-white/50">
                    {pct}%
                  </span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-black/10 dark:bg-white/10">
                  <div
                    className="h-full rounded-full transition-all"
                    style={{
                      width: `${pct}%`,
                      backgroundColor: o.color ?? '#6366f1',
                    }}
                  />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Positions */}
      <div>
        <h2 className="mb-3 text-sm font-medium text-black/50 dark:text-white/50">
          {t('Positions')} {positions ? `(${positions.length})` : ''}
        </h2>
        <DataTable
          data={positions ?? []}
          sorting={sorting}
          setSorting={setSorting}
          isLoading={positionsLoading}
          structure={[
            {
              accessorKey: 'user',
              header: t('User'),
              cell: ({ row }) => {
                const u = row.original.user;
                return (
                  <div>
                    <p className="text-sm font-medium">
                      {u.first_name} {u.last_name}
                    </p>
                    <p className="text-xs text-black/40 dark:text-white/40">
                      {u.email}
                    </p>
                  </div>
                );
              },
            },
            {
              accessorKey: 'outcome',
              header: t('Outcome'),
              cell: ({ row }) => {
                const o = row.original.outcome;
                return (
                  <Badge
                    variant="secondary"
                    style={
                      o.color
                        ? { backgroundColor: o.color + '20', color: o.color }
                        : {}
                    }
                  >
                    {o.title}
                  </Badge>
                );
              },
            },
            {
              accessorKey: 'shares',
              header: t('Shares'),
              cell: ({ row }) => {
                const pct =
                  totalShares > 0
                    ? ((row.original.shares / totalShares) * 100).toFixed(1)
                    : '0';
                return (
                  <div>
                    <p className="text-sm">
                      {Number(row.original.shares).toFixed(4)}
                    </p>
                    <p className="text-xs text-black/40 dark:text-white/40">
                      {pct}% of pool
                    </p>
                  </div>
                );
              },
            },
            {
              accessorKey: 'avg_price',
              header: t('Avg Price'),
              cell: ({ row }) => format(row.original.avg_price),
            },
            {
              accessorKey: 'current_value',
              header: t('Value'),
              cell: ({ row }) => format(row.original.current_value),
            },
          ]}
        />
      </div>
    </div>
  );
};

MarketDetail.title = 'Market Detail';

export default MarketDetail;