import Link from "next/link";
import { Registration } from "@/types/registration";
import { StatusBadge } from "@/components/shared/StatusBadge";
import { Card, CardContent } from "@/components/ui/card";

const STEPS = ["submitted", "form_submitted", "payment_pending", "payment_confirmed", "video_submitted", "accepted"];

interface Props {
  registration: Registration;
}

export function RegistrationCard({ registration: r }: Props) {
  const date = r.championship_event_date
    ? new Date(r.championship_event_date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })
    : null;

  const stepIndex = STEPS.indexOf(r.status);

  return (
    <Link href={`/championships/${r.championship_id}`}>
      <Card className="hover:shadow-md transition-shadow cursor-pointer">
        <CardContent className="p-4 space-y-3">
          <div className="flex items-start justify-between gap-2">
            <div>
              <p className="font-semibold text-gray-900">{r.championship_title ?? "Championship"}</p>
              {r.championship_location && <p className="text-sm text-gray-500">📍 {r.championship_location}</p>}
              {date && <p className="text-sm text-gray-500">📅 {date}</p>}
            </div>
            <StatusBadge status={r.status} type="registration" />
          </div>

          {/* Progress dots */}
          <div className="flex gap-1.5">
            {STEPS.map((_, i) => (
              <div
                key={i}
                className={`h-2 flex-1 rounded-full ${
                  i <= stepIndex ? "bg-violet-500" : "bg-gray-200"
                }`}
              />
            ))}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}