import {getFestival} from "@/lib/festivals";
import {notFound} from "next/navigation";
import {useTranslations} from "next-intl";
import {format} from "date-fns";

function YouTubeEmbed({url}:{url:string}) {
  const m = /(?:v=|youtu\.be\/)([\w-]{6,})/.exec(url);
  const id = m?.[1];
  if (!id) return null;
  return (
    <div className="aspect-video w-full overflow-hidden rounded-2xl border border-slate-200">
      <iframe className="h-full w-full"
        src={`https://www.youtube.com/embed/${id}`}
        title="YouTube video"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
      />
    </div>
  );
}

export default function FestivalPage({params}:{params:{locale:string; slug:string}}) {
  const t = useTranslations();
  const f = getFestival(params.slug, params.locale);
  if (!f) notFound();

  const range = f.startDate === f.endDate
    ? format(new Date(f.startDate), "PPP")
    : `${format(new Date(f.startDate), "PPP")} → ${format(new Date(f.endDate), "PPP")}`;

  return (
    <article className="space-y-8">
      <header className="space-y-4">
        <div className="h-72 rounded-3xl border border-slate-200 overflow-hidden bg-slate-100"
          style={f.cover ? {backgroundImage:`url(${f.cover})`, backgroundSize:"cover", backgroundPosition:"center"} : undefined}
        />
        <div>
          <h1 className="text-3xl font-semibold tracking-tight">{f.title}</h1>
          <div className="mt-2 text-slate-700">{f.city}, {f.country}</div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="rounded-2xl border border-slate-200 p-5">
            <div className="text-xs text-slate-600">{t("festival.when")}</div>
            <div className="mt-1 font-medium">{range}</div>
          </div>
          <div className="rounded-2xl border border-slate-200 p-5">
            <div className="text-xs text-slate-600">{t("festival.where")}</div>
            <div className="mt-1 font-medium">{f.city}, {f.country}</div>
          </div>
        </div>
        <p className="text-slate-800 text-lg leading-relaxed">{f.summary}</p>
      </header>

      {f.photos.length > 0 && (
        <section className="space-y-3">
          <h2 className="text-2xl font-semibold">{t("festival.photos")}</h2>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
            {f.photos.map((p, idx) => (
              <div key={idx} className="h-40 rounded-2xl border border-slate-200 bg-slate-100"
                style={{backgroundImage:`url(${p})`, backgroundSize:"cover", backgroundPosition:"center"}} />
            ))}
          </div>
        </section>
      )}

      {f.videos.length > 0 && (
        <section className="space-y-3">
          <h2 className="text-2xl font-semibold">{t("festival.videos")}</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {f.videos.map((v, idx) => <YouTubeEmbed key={idx} url={v} />)}
          </div>
        </section>
      )}

      <section className="space-y-3">
        <h2 className="text-2xl font-semibold">{t("festival.about")}</h2>
        <div className="max-w-none text-slate-800 leading-relaxed space-y-4">
          {f.content.split(/\n\n+/).map((para, i) => <p key={i}>{para.replace(/^#+\s*/g, "")}</p>)}
        </div>
      </section>
    </article>
  );
}