import type { Prisma } from "@prisma/client";
import { format, formatDistanceToNowStrict } from "date-fns";
import { fr } from "date-fns/locale";
import { Radio } from "lucide-react";
import Link from "next/link";
import { OddsButton } from "@/components/odds-button";
import { SportGlyph } from "@/components/sport-glyph";
import { localizeCompetitionName, localizeSelectionName, localizeTeamName } from "@/lib/sports-localization";

type EventWithMarkets = Prisma.EventGetPayload<{
  include: {
    sport: true;
    competition: true;
    markets: { include: { selections: true } };
  };
}>;

export function EventCard({ event }: { event: EventWithMarkets }) {
  const markets = event.markets.slice(0, 3);
  const primaryMarket = markets.find((market) => market.key === "1x2" || market.key === "match_winner") ?? markets[0];
  const primarySelections = primaryMarket ? sortSelections(primaryMarket.selections) : [];
  const homeName = localizeTeamName(event.homeName);
  const awayName = localizeTeamName(event.awayName);
  const eventName = `${homeName} vs ${awayName}`;
  const eventHref = `/events/${event.id}`;
  const eventClock = event.isLive
    ? event.scoreHome == null || event.scoreAway == null
      ? "Live"
      : `${event.minute ?? 0}' ${event.scoreHome}-${event.scoreAway}`
    : formatEventClock(event.startsAt);
  const marketLabel = primaryMarket ? (isWinnerMarket(primaryMarket) ? "1x2" : primaryMarket.name) : "Cotes";

  return (
    <article className="overflow-hidden rounded-lg border border-white/10 bg-[#151a22] shadow-panel">
      <Link href={eventHref} className="flex min-w-0 items-center gap-2 border-b border-white/10 px-3 py-2.5">
        <SportGlyph slug={event.sport.slug} label={event.sport.name} className="h-5 w-5" />
        <span className="truncate text-[13px] font-semibold text-slate-200">{localizeCompetitionName(event.competition.country)}</span>
        <span className="text-slate-600">/</span>
        <span className="truncate text-[13px] font-semibold text-felt">{localizeCompetitionName(event.competition.name)}</span>
      </Link>

      <div className="border-b border-white/[0.06] bg-black/10 px-3 py-2 text-center text-[11px] font-semibold text-slate-400">{marketLabel}</div>

      <div className="bg-[#202631] px-3 py-3">
        <div className="mb-2 flex items-center gap-2 text-[12px] font-semibold text-felt">
          {event.isLive ? <Radio className="h-3.5 w-3.5 shrink-0 text-ember" /> : null}
          <span className="truncate">{eventClock}</span>
        </div>

        <Link href={eventHref} className="grid gap-1.5">
          <div className="flex min-w-0 items-center gap-2">
            <TeamMark sport={event.sport} />
            <span className="truncate text-[13px] font-bold text-white">{homeName}</span>
          </div>
          <div className="flex min-w-0 items-center gap-2">
            <TeamMark sport={event.sport} />
            <span className="truncate text-[13px] font-bold text-white">{awayName}</span>
          </div>
        </Link>

        {primaryMarket ? (
          <div className={`mt-3 grid gap-2 ${primarySelections.length >= 3 ? "grid-cols-3" : "grid-cols-2"}`}>
            {primarySelections.slice(0, 3).map((selection) => (
              <OddsButton
                key={selection.id}
                compact
                selection={{
                  selectionId: selection.id,
                  eventId: event.id,
                  marketId: primaryMarket.id,
                  eventName,
                  marketName: primaryMarket.name,
                  selectionName: displaySelectionName(selection, primaryMarket, { homeName, awayName }),
                  odds: selection.odds.toString(),
                  oddsVersion: selection.oddsVersion
                }}
              />
            ))}
          </div>
        ) : null}
      </div>
    </article>
  );
}

function displaySelectionName<T extends { key: string; name: string }>(selection: T, market: { key: string; name: string }, event: { homeName: string; awayName: string }) {
  if (!isWinnerMarket(market)) return localizeSelectionName(selection.name);
  const rank = selectionRank(selection);
  if (rank === 1) return event.homeName;
  if (rank === 2) return "Match nul";
  if (rank === 3) return event.awayName;
  return localizeSelectionName(selection.name);
}

function isWinnerMarket(market: { key: string; name: string }) {
  const value = `${market.key} ${market.name}`.toLowerCase().replaceAll(" ", "");
  return value.includes("1x2") || value.includes("matchwinner") || value.includes("vainqueur");
}

function formatEventClock(startsAt: Date) {
  const base = format(startsAt, "d MMM, HH:mm", { locale: fr });
  if (startsAt.getTime() <= Date.now()) return base;
  return `${base} - ${formatDistanceToNowStrict(startsAt, { locale: fr, addSuffix: true })}`;
}

function sortSelections<T extends { key: string; name: string }>(selections: T[]) {
  return [...selections].sort((left, right) => selectionRank(left) - selectionRank(right) || left.name.localeCompare(right.name));
}

function selectionRank(selection: { key: string; name: string }) {
  const key = selection.key.toLowerCase();
  const name = selection.name.toLowerCase();

  if (key === "home" || name === "1") return 1;
  if (key === "draw" || name === "x") return 2;
  if (key === "away" || name === "2") return 3;
  if (key === "over") return 4;
  if (key === "under") return 5;
  return 10;
}

function TeamMark({ sport }: { sport: { slug: string; name: string } }) {
  return (
    <span className="grid h-5 w-7 shrink-0 place-items-center overflow-hidden text-felt/90 leading-none" aria-hidden="true">
      <SportGlyph slug={sport.slug} label={sport.name} className="h-[18px] w-[18px]" />
    </span>
  );
}