import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { useCurrency } from '@/hooks/use-currency';
import { TMarket } from '@/types/market.types';
import { Link } from '@inertiajs/react';
import { ChartLineUpIcon, ClockIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { useTranslation } from 'react-i18next';
import OutcomeProbability from './outcome-probability';

dayjs.extend(relativeTime);

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

interface MarketCardProps {
  market: TMarket;
}

export default function MarketCard({ market }: MarketCardProps) {
  const { t } = useTranslation();
  const { format } = useCurrency();
  const statusVariant = STATUS_VARIANT[market.status];

  return (
    <Card className="flex h-full flex-col justify-between gap-4 p-4">
      <div className="flex-1">
        <div className="mb-2 flex items-start justify-between gap-2">
          <div className="flex flex-wrap gap-1.5">
            {market.category && (
              <Badge variant="secondary" className="text-xs">
                {market.category.name}
              </Badge>
            )}
            {statusVariant && (
              <Badge variant={statusVariant} className="text-xs capitalize">
                {market.status}
              </Badge>
            )}
          </div>
          {market.is_featured && (
            <Badge variant="warning" className="shrink-0 text-xs">
              {t('Featured')}
            </Badge>
          )}
        </div>

        <h3 className="mb-3 line-clamp-2 text-sm leading-snug font-medium text-black dark:text-white">
          {market.title}
        </h3>

        <OutcomeProbability outcomes={market.outcomes ?? []} size="sm" />
      </div>

      <div>
        <div className="mb-3 flex items-center justify-between text-xs text-black/40 dark:text-white/40">
          <span className="flex items-center gap-1">
            <ChartLineUpIcon weight="bold" className="size-3.5" />
            {format(market.total_volume)} {t('Vol.')}
          </span>
          <span className="flex items-center gap-1">
            <ClockIcon weight="bold" className="size-3.5" />
            {dayjs(market.closes_at).fromNow(true)} {t('left')}
          </span>
        </div>

        <Link href={`/markets/${market.slug}`}>
          <Button
            variant="secondary"
            size="sm"
            className="w-full justify-center rounded-full"
            disabled={market.status !== 'open'}
          >
            {market.status === 'open' ? t('Trade') : t('View')}
          </Button>
        </Link>
      </div>
    </Card>
  );
}