"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { formatCurrency, formatDate, cn } from "@/lib/utils";

interface Tournament {
  id: string;
  name: string;
  description: string | null;
  type: string;
  status: string;
  startDate: string;
  endDate: string | null;
  maxPlayers: number | null;
  entryFee: number | string;
  settings: {
    tournamentFormat?: string;
    category?: string | null;
  } | null;
  site: {
    id: string;
    name: string;
  };
  _count: {
    inscriptions: number;
    matches: number;
  };
}

interface TournamentCardProps {
  tournament: Tournament;
  onClick?: () => void;
}

const statusConfig: Record<string, { label: string; className: string }> = {
  DRAFT: {
    label: "Borrador",
    className: "bg-gray-100 text-gray-700 border-gray-300",
  },
  REGISTRATION_OPEN: {
    label: "Inscripciones Abiertas",
    className: "bg-green-100 text-green-700 border-green-300",
  },
  REGISTRATION_CLOSED: {
    label: "Inscripciones Cerradas",
    className: "bg-yellow-100 text-yellow-700 border-yellow-300",
  },
  IN_PROGRESS: {
    label: "En Progreso",
    className: "bg-blue-100 text-blue-700 border-blue-300",
  },
  COMPLETED: {
    label: "Finalizado",
    className: "bg-purple-100 text-purple-700 border-purple-300",
  },
  CANCELLED: {
    label: "Cancelado",
    className: "bg-red-100 text-red-700 border-red-300",
  },
};

const typeLabels: Record<string, string> = {
  BRACKET: "Eliminacion Directa",
  AMERICANO: "Americano",
  MEXICANO: "Mexicano",
  ROUND_ROBIN: "Round Robin",
  LEAGUE: "Liga",
};

export function TournamentCard({ tournament, onClick }: TournamentCardProps) {
  const status = statusConfig[tournament.status] || statusConfig.DRAFT;
  const typeLabel = typeLabels[tournament.type] || tournament.type;
  const category = tournament.settings?.category;
  const entryFee = typeof tournament.entryFee === 'string'
    ? parseFloat(tournament.entryFee)
    : tournament.entryFee;

  return (
    <Card
      className={cn(
        "cursor-pointer transition-all hover:shadow-lg hover:border-primary-400",
        "relative overflow-hidden"
      )}
      onClick={onClick}
    >
      <CardHeader className="pb-2">
        <div className="flex items-start justify-between gap-2">
          <CardTitle className="text-lg line-clamp-2">{tournament.name}</CardTitle>
          <span
            className={cn(
              "px-2 py-1 text-xs font-medium rounded-full border shrink-0",
              status.className
            )}
          >
            {status.label}
          </span>
        </div>
        {tournament.description && (
          <p className="text-sm text-primary-500 line-clamp-2 mt-1">
            {tournament.description}
          </p>
        )}
      </CardHeader>
      <CardContent className="space-y-3">
        {/* Type and Category */}
        <div className="flex flex-wrap gap-2">
          <span className="px-2 py-1 text-xs bg-primary-100 text-primary-700 rounded">
            {typeLabel}
          </span>
          {category && (
            <span className="px-2 py-1 text-xs bg-accent-100 text-accent-700 rounded">
              {category}
            </span>
          )}
        </div>

        {/* Date */}
        <div className="flex items-center gap-2 text-sm text-primary-600">
          <svg
            className="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
            />
          </svg>
          <span>{formatDate(tournament.startDate)}</span>
          {tournament.endDate && (
            <>
              <span>-</span>
              <span>{formatDate(tournament.endDate)}</span>
            </>
          )}
        </div>

        {/* Inscriptions and Price */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 text-sm">
            <svg
              className="w-4 h-4 text-primary-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
              />
            </svg>
            <span className="text-primary-700">
              {tournament._count.inscriptions}
              {tournament.maxPlayers && ` / ${tournament.maxPlayers}`}
              {" equipos"}
            </span>
          </div>
          <span className="font-semibold text-primary-800">
            {entryFee > 0 ? formatCurrency(entryFee) : "Gratis"}
          </span>
        </div>

        {/* Site name */}
        <div className="pt-2 border-t border-primary-100">
          <span className="text-xs text-primary-500">{tournament.site.name}</span>
        </div>
      </CardContent>
    </Card>
  );
}