import type { Metadata } from "next";
import BrushStroke from "@/components/ui/BrushStroke";
import ScrollReveal from "@/components/ui/ScrollReveal";
import { store, type VideoItem } from "@/lib/store";

export const metadata: Metadata = {
  title: "Lehrfilme — Shotokan Karate",
  description:
    "Videos und Demonstrationen zu Shotokan-Karate und JKA — Katas, Kihon und Kumite in Bewegung.",
};

export const dynamic = "force-dynamic";

function ExternalLinkIcon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      className="inline-block h-4 w-4 ml-1 align-middle"
      aria-hidden="true"
    >
      <path d="M11 3h6m0 0v6m0-6L10 10M6 5H4a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-2" />
    </svg>
  );
}

function VideoCard({ item }: { item: VideoItem }) {
  if (item.type === "embed") {
    return (
      <div
        className={`h-full bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-base flex flex-col ${item.compact ? "" : "min-h-[26rem]"}`}
      >
        <div className="aspect-video w-full">
          <iframe
            src={`https://www.youtube.com/embed/${item.videoId}`}
            title={item.title}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            className="w-full h-full"
          />
        </div>
        <div className="p-5 flex flex-col flex-1">
          <h2 className="font-display text-lg text-secondary leading-snug mb-2">
            {item.title}
          </h2>
          <p className="text-sm leading-relaxed text-gray-700 flex-1">
            {item.description}
          </p>
        </div>
      </div>
    );
  }

  if (item.type === "local") {
    return (
      <div
        className={`h-full bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-base flex flex-col ${item.compact ? "" : "min-h-[26rem]"}`}
      >
        <div className="aspect-video w-full bg-black">
          <video src={item.src} controls className="w-full h-full" />
        </div>
        <div className="p-5 flex flex-col flex-1">
          <h2 className="font-display text-lg text-secondary leading-snug mb-2">
            {item.title}
          </h2>
          <p className="text-sm leading-relaxed text-gray-700 flex-1">
            {item.description}
          </p>
        </div>
      </div>
    );
  }

  if (!item.url) return null;

  return (
    <a
      href={item.url}
      target="_blank"
      rel="noopener noreferrer"
      className="h-full min-h-[26rem] bg-white rounded-lg border border-gray-200 p-6 shadow-sm hover:shadow-md hover:border-primary/40 transition-all duration-base flex flex-col group"
    >
      <div className="flex items-start justify-between gap-3 mb-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-7 w-7 text-primary flex-shrink-0"
          aria-hidden="true"
        >
          <rect x="2" y="4" width="20" height="16" rx="2" />
          <path d="M7 4v16M17 4v16M2 9h5M2 15h5M17 9h5M17 15h5" />
        </svg>
        <span className="text-xs font-medium text-gray-400 bg-gray-100 rounded px-2 py-0.5 whitespace-nowrap">
          Externer Link
        </span>
      </div>
      <h2 className="font-display text-lg text-secondary leading-snug mb-2 group-hover:text-primary transition-colors duration-fast">
        {item.title}
      </h2>
      <p className="text-sm leading-relaxed text-gray-700 flex-1 mb-5">
        {item.description}
      </p>
      <span className="inline-flex items-center justify-center rounded bg-primary px-5 py-2.5 text-sm font-semibold text-cream transition-colors duration-fast group-hover:bg-primary-light">
        {item.label}
        <ExternalLinkIcon />
      </span>
    </a>
  );
}

export default async function FilmePage() {
  const videos = (await store.videos.read()).sort((a, b) => a.order - b.order);

  return (
    <div className="mx-auto max-w-content px-6 py-section">
      <h1 className="font-display text-section-title leading-tight text-secondary">
        Lehrfilme
      </h1>
      <p className="mt-2 font-accent text-xl italic text-gray-700">
        Shotokan in Bewegung
      </p>
      <BrushStroke />

      <p className="max-w-2xl text-base leading-relaxed text-gray-700">
        Bewegung lässt sich am besten in Bewegung verstehen. Hier findest du Videos zu
        Shotokan-Karate und JKA — ergänzend zum Training, nicht als Ersatz dafür.
      </p>

      <div className="mt-10 grid gap-6 sm:grid-cols-2 max-w-4xl">
        {videos.map((item, i) => (
          <ScrollReveal key={item.id} delayMs={i * 60}>
            <VideoCard item={item} />
          </ScrollReveal>
        ))}
      </div>

      <p className="mt-10 max-w-2xl text-xs text-gray-400 border-t border-gray-200 pt-6">
        Hinweis: Diese Links führen zu externen Websites und YouTube-Inhalten. Der Shotokan
        Karate Club Arbon ist nicht verantwortlich für deren Inhalte. YouTube-Links können sich
        ändern oder nicht mehr verfügbar sein.
      </p>
    </div>
  );
}