import Link from "next/link";
import { notFound } from "next/navigation";
import { getShowBySlug, getShowSlugs, getPricing } from "@/data/shows";
import { getVenueById } from "@/data/venues";

type Props = {
  params: { slug: string };
};

export function generateStaticParams() {
  return getShowSlugs().map((slug) => ({ slug }));
}

export default function ArtistDetailPage({ params }: Props) {
  const show = getShowBySlug(params.slug);

  if (!show) {
    notFound();
  }

  const venue = getVenueById(show.venueId);

  return (
    <main className="mx-auto w-full max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
      <div className="space-y-6">
        <header className="space-y-4 rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
          <div className="space-y-3">
            <p className="text-sm uppercase tracking-[0.3em] text-slate-500">Détail du spectacle</p>
            <h1 className="text-4xl font-semibold text-slate-950">{show.name}</h1>
            <p className="text-slate-600">{show.date} à {show.time} · {venue?.name} · {show.stage}</p>
          </div>
          <div>
            <p className="text-sm text-slate-700">
              Plongez dans le détail du spectacle, découvrez l’ambiance, la scène et préparez votre visite.
            </p>
          </div>
        </header>

        <section className="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm">
          <div className="space-y-6">
            <div>
              <h2 className="text-2xl font-semibold text-slate-950">Infos pratiques</h2>
              <p className="mt-3 text-slate-600">
                Lieu : <span className="font-semibold text-slate-900">{venue?.name}</span><br />
                Adresse : <span className="font-semibold text-slate-900">{venue?.address}</span><br />
                Commune : <span className="font-semibold text-slate-900">{venue?.city}</span><br />
                Scène : <span className="font-semibold text-slate-900">{show.stage}</span><br />
                Date & heure : <span className="font-semibold text-slate-900">{show.date} à {show.time}</span>
              </p>
            </div>

            <div>
              <h3 className="text-xl font-semibold text-slate-950">Description</h3>
              <p className="mt-3 text-slate-600">
                Ce spectacle offre une expérience unique sur la scène {show.stage}. Entre musique, ambiance et décoration,
                c’est un moment à ne pas manquer du festival.
              </p>
            </div>

            <div className="rounded-3xl border border-slate-100 bg-slate-50 p-6">
              {show.isSoldOut ? (
                <>
                  <p className="text-sm font-semibold text-red-700">Complet</p>
                  <p className="mt-2 text-slate-600">Malheureusement, ce spectacle est complet et plus aucune place n'est disponible.</p>
                </>
              ) : (
                <>
                  <p className="text-sm font-semibold text-slate-900">Privilégiez un accès anticipé.</p>
                  <p className="mt-2 text-slate-600">Les places sont limitées, pensez à vérifier les itinéraires et la billetterie.</p>
                </>
              )}
            </div>

            <div>
              <h3 className="text-xl font-semibold text-slate-950">Tarifs</h3>
              {show.isSoldOut ? (
                <p className="mt-3 text-slate-600">Ce spectacle est complet. Aucun billet n'est disponible.</p>
              ) : (
                <div className="mt-4 overflow-hidden rounded-2xl border border-slate-200 bg-white">
                  <table className="w-full text-left">
                    <thead className="bg-slate-50">
                      <tr>
                        <th className="px-6 py-3 text-sm font-semibold text-slate-700">Type de tarif</th>
                        <th className="px-6 py-3 text-sm font-semibold text-slate-700">Prix</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-slate-200">
                      <tr>
                        <td className="px-6 py-3 text-sm text-slate-900">
                          {show.category === "tout-public" ? "Tarif plein" : "Tarif plein jeune public"}
                        </td>
                        <td className="px-6 py-3 text-sm font-semibold text-slate-950">
                          {getPricing(show.category).full} €
                        </td>
                      </tr>
                      <tr>
                        <td className="px-6 py-3 text-sm text-slate-900">
                          {show.category === "tout-public" ? "Tarif réduit" : "Tarif réduit jeune public"}
                        </td>
                        <td className="px-6 py-3 text-sm font-semibold text-slate-950">
                          {getPricing(show.category).reduced} €
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              )}
            </div>
          </div>
        </section>

        <div className="flex items-center justify-between gap-4 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
          <Link href="/line-up" className="rounded-full bg-slate-950 px-5 py-3 text-sm font-semibold text-white transition hover:bg-slate-800">
            Retour à la programmation
          </Link>
          {show.isSoldOut ? (
            <span className="text-sm font-semibold text-slate-400 cursor-not-allowed">Complet</span>
          ) : (
            <Link href="/tickets" className="text-sm font-semibold text-slate-950 hover:text-slate-700">
              Voir les billets →
            </Link>
          )}
        </div>
      </div>
    </main>
  );
}