'use client';

import React from 'react';
import { Button } from './Button';
import { CoinAmount } from './CoinAmount';

export function ContestCard({
  contest,
  onJoin,
  busy,
  canJoin,
}: {
  contest: any;
  onJoin?: () => void;
  busy?: boolean;
  canJoin?: boolean;
}) {
  const filled = contest.filledSlots || 0;
  const max = contest.maxSlots || 1;
  const pct = Math.min(100, Math.round((filled / max) * 100));
  const spotsLeft = Math.max(0, max - filled);
  const isMega = (contest.prizePool || 0) >= 10000 || contest.contestType === 'MEGA';
  const isOpen = contest.status === 'OPEN';

  return (
    <div className="d11-card overflow-hidden">
      {/* Title + prize — one compact row */}
      <div className="flex items-center justify-between gap-3 px-3 pt-2.5">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-1">
            {isMega && (
              <span className="rounded bg-amber-100 px-1.5 py-px text-[9px] font-extrabold uppercase tracking-wide text-amber-800">
                Mega
              </span>
            )}
            <span
              className={`rounded px-1.5 py-px text-[9px] font-extrabold uppercase tracking-wide ${
                isOpen ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500'
              }`}
            >
              {contest.status}
            </span>
          </div>
          <h3 className="mt-0.5 truncate text-[13px] font-extrabold leading-snug text-d11-ink">
            {contest.title}
          </h3>
        </div>
        <div className="shrink-0 text-right">
          <div className="text-[9px] font-bold uppercase tracking-wide text-d11-muted">Prize</div>
          <div className="justify-end text-[15px] font-extrabold text-d11-ink">
            <CoinAmount amount={contest.prizePool || 0} iconClassName="h-3.5 w-3.5" />
          </div>
        </div>
      </div>

      {/* Entry / spots + progress */}
      <div className="space-y-1.5 px-3 py-2">
        <div className="flex items-center justify-between gap-2 text-[11px]">
          <span className="inline-flex items-center gap-1 font-semibold text-d11-muted">
            Entry
            <CoinAmount amount={contest.entryFee} className="font-extrabold text-d11-ink" iconClassName="h-3 w-3" />
          </span>
          <span className="font-semibold tabular-nums text-d11-muted">
            <span className={spotsLeft <= 5 && isOpen ? 'font-extrabold text-d11-red' : ''}>
              {spotsLeft}
            </span>{' '}
            left · {filled}/{max}
          </span>
        </div>
        <div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-100" aria-hidden>
          <span
            className="block h-full rounded-full bg-gradient-to-r from-d11-red to-[#ff5a63] transition-[width] duration-500"
            style={{ width: `${pct}%` }}
          />
        </div>
      </div>

      {canJoin && onJoin && (
        <div className="border-t border-gray-100 px-3 py-2">
          <Button size="sm" className="h-9 min-h-0 w-full gap-1.5 rounded-lg text-xs" loading={busy} onClick={onJoin}>
            Join contest
            <CoinAmount amount={contest.entryFee} iconClassName="h-3 w-3 text-amber-200" />
          </Button>
        </div>
      )}
    </div>
  );
}