import Link from "next/link";
import { notFound } from "next/navigation";
import { ClassOfferDetailClient } from "@/components/class-offer-detail-client";
import { getClassOfferDetail } from "@/lib/classes";

export const dynamic = "force-dynamic";

function normalizeOptionalSearchParam(value: string | string[] | undefined) {
  return typeof value === "string" && value.length > 0 ? value : null;
}

function formatDateTime(value: string) {
  return new Intl.DateTimeFormat("es-AR", {
    dateStyle: "full",
    timeStyle: "short",
  }).format(new Date(value));
}

function formatMoney(value: number | null, currency: string | null) {
  if (value === null || !currency) return "A confirmar";

  return new Intl.NumberFormat("es-AR", {
    style: "currency",
    currency,
    maximumFractionDigits: 0,
  }).format(value / 100);
}

export default async function ClassOfferDetailPage({
  params,
  searchParams,
}: {
  params: Promise<{ offerId: string }>;
  searchParams: Promise<{
    slotStart?: string;
    slotDurationMinutes?: string;
    slotPriceMinor?: string;
    slotCurrency?: string;
    slotSportclubId?: string;
    slotCourtId?: string;
    slotCourtName?: string;
  }>;
}) {
  const { offerId } = await params;
  const query = await searchParams;
  const offer = await getClassOfferDetail(offerId);

  if (!offer) {
    notFound();
  }

  const initialSelectedSlot = query.slotStart && query.slotDurationMinutes
    ? {
        start: query.slotStart,
        durationMinutes: Number(query.slotDurationMinutes),
        priceMinor: query.slotPriceMinor ? Number(query.slotPriceMinor) : null,
        currency: normalizeOptionalSearchParam(query.slotCurrency),
        sportclubId: normalizeOptionalSearchParam(query.slotSportclubId),
        courtId: normalizeOptionalSearchParam(query.slotCourtId),
        courtName: normalizeOptionalSearchParam(query.slotCourtName),
      }
    : null;

  return (
    <main className="mx-auto max-w-6xl px-6 py-10 sm:py-14">
      <Link href="/classes" className="text-sm text-white/60 transition hover:text-[#c4d600]">
        Volver a classes
      </Link>

      <section className="mt-5 rounded-[2rem] border border-white/10 bg-[linear-gradient(180deg,#141813,#0c0f0b)] p-8 shadow-[0_30px_90px_-45px_rgba(196,214,0,0.22)]">
        <div className="flex flex-wrap items-center gap-2 text-xs uppercase tracking-[0.18em] text-white/45">
          <span>{offer.venue.clubName}</span>
          <span className="rounded-full border border-[#c4d600]/25 bg-[#c4d600]/12 px-3 py-1 text-[#c4d600]">{offer.coach.name}</span>
        </div>
        <h1 className="mt-4 text-4xl font-semibold tracking-tight text-white">{offer.title}</h1>
        <p className="mt-4 max-w-3xl text-sm leading-7 text-white/65 sm:text-base">{offer.description ?? "Clase Ballbox lista para recibir solicitudes."}</p>

        <div className="mt-8 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
          <div className="rounded-[1.5rem] border border-white/8 bg-black/20 p-4">
            <p className="text-xs uppercase tracking-[0.16em] text-white/45">Empieza</p>
            <p className="mt-2 text-sm font-medium text-white">{formatDateTime(offer.startsAt)}</p>
          </div>
          <div className="rounded-[1.5rem] border border-white/8 bg-black/20 p-4">
            <p className="text-xs uppercase tracking-[0.16em] text-white/45">Venue</p>
            <p className="mt-2 text-sm font-medium text-white">{offer.venue.name}</p>
          </div>
          <div className="rounded-[1.5rem] border border-white/8 bg-black/20 p-4">
            <p className="text-xs uppercase tracking-[0.16em] text-white/45">Duracion</p>
            <p className="mt-2 text-sm font-medium text-white">{offer.durationMinutes ? `${offer.durationMinutes} min` : "A confirmar"}</p>
          </div>
          <div className="rounded-[1.5rem] border border-white/8 bg-black/20 p-4">
            <p className="text-xs uppercase tracking-[0.16em] text-white/45">Precio</p>
            <p className="mt-2 text-sm font-medium text-white">{formatMoney(offer.priceMinor, offer.currency)}</p>
          </div>
        </div>
      </section>

      <ClassOfferDetailClient
        initialOffer={offer}
        initialSportclubId={normalizeOptionalSearchParam(query.slotSportclubId)}
        initialSelectedSlot={initialSelectedSlot}
      />
    </main>
  );
}