import { notFound } from "next/navigation";
import Link from "next/link";
import { format, formatDistanceToNowStrict } from "date-fns";
import { fr } from "date-fns/locale";
import { ChevronDown, ChevronLeft } from "lucide-react";
import { MatchMarkets } from "@/components/match-markets";
import { SportGlyph } from "@/components/sport-glyph";
import { localizeSelectionName, localizeTeamName } from "@/lib/sports-localization";
import { getEventDetails } from "@/server/queries/lobby";

export const dynamic = "force-dynamic";

const extraMarketNames = ["Double chance", "Total buts", "Les deux équipes marquent", "Handicap", "Score exact", "Buteurs"];

export default async function EventDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const event = await getEventDetails(id);

  if (!event) {
    notFound();
  }

  const homeName = localizeTeamName(event.homeName);
  const awayName = localizeTeamName(event.awayName);
  const eventName = `${homeName} vs ${awayName}`;
  const lockedMarketNames = extraMarketNames.filter((name) => !event.markets.some((market) => isEquivalentMarketName(name, market.name)));
  const markets = event.markets.map((market) => ({
    id: market.id,
    key: market.key,
      name: market.name,
      selections: market.selections.map((selection) => ({
        id: selection.id,
        key: selection.key,
        name: localizeSelectionName(selection.name),
        odds: selection.odds.toString(),
        oddsVersion: selection.oddsVersion
    }))
  }));

  return (
    <div className="-mx-5 space-y-3 sm:mx-0">
      <header className="flex items-center gap-3 px-5 sm:px-0">
        <Link href="/sports" className="grid h-11 w-11 shrink-0 place-items-center rounded-lg bg-[#202631] text-white transition hover:bg-white/10" aria-label="Retour aux sports">
          <ChevronLeft className="h-5 w-5" />
        </Link>
        <button type="button" className="flex h-11 min-w-0 max-w-[260px] items-center gap-2 rounded-lg bg-[#202631] px-4 text-left text-[14px] font-extrabold text-felt">
          <span className="truncate">{eventName}</span>
          <ChevronDown className="h-4 w-4 shrink-0 text-slate-300" />
        </button>
      </header>

      <section className="relative overflow-hidden bg-[linear-gradient(135deg,rgba(15,191,143,.22),rgba(76,45,160,.72)_48%,rgba(8,10,16,.98))] px-5 py-4 sm:rounded-lg sm:border sm:border-white/10 sm:px-4">
        <div className="absolute inset-0 opacity-55 [background-image:radial-gradient(circle_at_18%_20%,rgba(255,255,255,.12),transparent_22%),linear-gradient(115deg,transparent_0,rgba(255,255,255,.08)_45%,transparent_46%)]" />
        <div className="relative overflow-hidden rounded-lg border border-white/10 bg-[#10141b] shadow-panel">
          <div className="flex items-center justify-between gap-3 px-3 py-3">
            <div className="flex min-w-0 items-center gap-2 text-[12px] font-semibold text-felt">
              <span className="truncate">{formatKickoffLine(event.startsAt)}</span>
              <span className="grid h-4 w-4 shrink-0 place-items-center rounded-full bg-felt text-[8px] text-ink-950">◐</span>
              <span className="truncate">{formatKickoffDistance(event.startsAt)}</span>
            </div>
            <SportGlyph slug={event.sport.slug} label={event.sport.name} className="h-5 w-5 shrink-0 text-felt" />
          </div>

          <div className="relative px-3 pb-3">
            <div className="absolute left-1/2 top-8 hidden -translate-x-1/2 rounded border border-white/10 bg-black/35 px-2 py-0.5 text-[10px] font-semibold uppercase text-slate-300 sm:block">
              {format(event.startsAt, "dd MMM | HH:mm", { locale: fr })}
            </div>
            <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2">
              <TeamBlock name={homeName} sport={event.sport} align="left" />
              <span className="text-[11px] font-semibold text-slate-500">vs</span>
              <TeamBlock name={awayName} sport={event.sport} align="right" />
            </div>
          </div>
        </div>
      </section>

      <MatchMarkets
        lockedMarketNames={lockedMarketNames}
        event={{
          id: event.id,
          eventName,
          homeName,
          awayName,
          sport: {
            slug: event.sport.slug,
            name: event.sport.name
          },
          markets
        }}
      />
    </div>
  );
}

function TeamBlock({ name, sport, align }: { name: string; sport: { slug: string; name: string }; align: "left" | "right" }) {
  return (
    <div className={align === "left" ? "flex min-w-0 items-center gap-2" : "flex min-w-0 flex-row-reverse items-center gap-2"}>
      <span className="grid h-6 w-8 shrink-0 place-items-center overflow-hidden text-felt leading-none">
        <SportGlyph slug={sport.slug} label={sport.name} className="h-5 w-5" />
      </span>
      <span className="min-w-0 truncate text-[15px] font-extrabold text-white">{name}</span>
    </div>
  );
}

function isEquivalentMarketName(expected: string, actual: string) {
  const expectedKey = marketNameKey(expected);
  const actualKey = marketNameKey(actual);

  if (expectedKey === actualKey) return true;
  if (expectedKey === "totalbuts" && actualKey.startsWith("total")) return true;
  return false;
}

function marketNameKey(value: string) {
  return value
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .toLowerCase()
    .replace(/[^a-z0-9]/g, "");
}

function formatKickoffLine(value: Date) {
  return format(value, "dd MMM, HH:mm", { locale: fr });
}

function formatKickoffDistance(value: Date) {
  return `Dans ${formatDistanceToNowStrict(value, { locale: fr, addSuffix: false })}`;
}