first commit

2026-06-10 18:30:46 +02:00
parent 3e7b0ae2e0
commit cabd4803a4
39 changed files with 3635 additions and 81 deletions
@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { CardMeta } from "@/lib/cards";
+
+interface InfoCardProps {
+  meta: CardMeta;
+  selected: boolean;
+  onClick: () => void;
+}
+
+export function InfoCard({ meta, selected, onClick }: InfoCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "group rounded-2xl border p-5 text-left transition",
+        selected
+          ? "border-amber-400/40 bg-amber-400/10 shadow-lg shadow-amber-500/10"
+          : "border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]",
+      )}
+    >
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="font-medium text-white">{meta.title}</h3>
+        {meta.badge ? (
+          <span className="rounded-full bg-emerald-400/15 px-2 py-0.5 text-[11px] font-medium uppercase tracking-wide text-emerald-300">
+            {meta.badge}
+          </span>
+        ) : null}
+      </div>
+      <p className="text-sm text-slate-400">{meta.subtitle}</p>
+    </button>
+  );
+}
@@ -0,0 +1,76 @@
+import Image from "next/image";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { getPosterUrl, getUsCertification, type TmdbMovieDetails } from "@/lib/tmdb";
+
+export function MovieHeader({ movie }: { movie: TmdbMovieDetails }) {
+  const poster = getPosterUrl(movie.poster_path, "w500");
+  const year = movie.release_date?.slice(0, 4);
+  const certification = getUsCertification(movie);
+
+  return (
+    <div className="space-y-6">
+      <Link
+        href="/"
+        className="inline-flex w-fit items-center gap-2 text-sm text-slate-400 transition hover:text-amber-200"
+      >
+        <ArrowLeft className="h-4 w-4" />
+        Back to search
+      </Link>
+
+      <div className="flex flex-col gap-6 sm:flex-row sm:items-end">
+        <div className="relative mx-auto h-56 w-36 shrink-0 overflow-hidden rounded-2xl border border-white/10 bg-slate-900 shadow-2xl sm:mx-0">
+          {poster ? (
+            <Image
+              src={poster}
+              alt={movie.title}
+              fill
+              className="object-cover"
+              sizes="144px"
+              priority
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-slate-500">
+              No poster
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-3 text-center sm:text-left">
+          <div>
+            <h1 className="text-3xl font-semibold tracking-tight text-white md:text-4xl">
+              {movie.title}
+            </h1>
+            <p className="mt-1 text-slate-400">
+              {[year, movie.runtime ? `${movie.runtime} min` : null]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-2 sm:justify-start">
+            {certification ? (
+              <span className="rounded-full border border-amber-400/30 bg-amber-400/10 px-3 py-1 text-sm font-medium text-amber-200">
+                {certification}
+              </span>
+            ) : null}
+            {movie.genres.map((genre) => (
+              <span
+                key={genre.id}
+                className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-sm text-slate-300"
+              >
+                {genre.name}
+              </span>
+            ))}
+          </div>
+
+          {movie.overview ? (
+            <p className="max-w-3xl text-sm leading-relaxed text-slate-400 md:text-base">
+              {movie.overview}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import {
+  CARD_META,
+  CARD_TYPES,
+  shouldShowHistoricalAccuracy,
+  type CardType,
+} from "@/lib/cards";
+import { CardContent } from "./cards/CardContent";
+import { InfoCard } from "./InfoCard";
+
+export function MovieInsightPanel({
+  movieId,
+  genres,
+}: {
+  movieId: number;
+  genres: string[];
+}) {
+  const visibleCards = CARD_TYPES.filter((type) => {
+    if (type === "historical_accuracy") {
+      return shouldShowHistoricalAccuracy(genres);
+    }
+    return true;
+  });
+
+  const [selected, setSelected] = useState<CardType>(visibleCards[0]);
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {visibleCards.map((type) => (
+          <InfoCard
+            key={type}
+            meta={CARD_META[type]}
+            selected={selected === type}
+            onClick={() => setSelected(type)}
+          />
+        ))}
+      </div>
+
+      <CardContent
+        key={`${movieId}-${selected}`}
+        movieId={movieId}
+        cardType={selected}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,161 @@
+"use client";
+
+import { Search } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { getPosterUrl } from "@/lib/tmdb";
+import { cn } from "@/lib/utils";
+
+interface SearchResult {
+  id: number;
+  title: string;
+  release_date: string;
+  poster_path: string | null;
+  overview: string;
+}
+
+export function SearchBar({ autoFocus = false }: { autoFocus?: boolean }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!query.trim()) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeout = setTimeout(async () => {
+      setLoading(true);
+      try {
+        const response = await fetch(
+          `/api/search?q=${encodeURIComponent(query)}`,
+          { signal: controller.signal },
+        );
+        const data = (await response.json()) as { results: SearchResult[] };
+        setResults(data.results ?? []);
+        setOpen(true);
+      } catch (error) {
+        if ((error as Error).name !== "AbortError") {
+          setResults([]);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }, 300);
+
+    return () => {
+      clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [query]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (!containerRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+
+    if (open) {
+      document.addEventListener("click", handleClickOutside);
+    }
+
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [open]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("relative w-full max-w-2xl", open && "z-50")}
+    >
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-amber-200/50" />
+        <input
+          autoFocus={autoFocus}
+          type="search"
+          name="movie-search"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          data-1p-ignore
+          data-lpignore="true"
+          data-bwignore
+          data-form-type="other"
+          value={query}
+          onChange={(event) => {
+            const value = event.target.value;
+            setQuery(value);
+            if (!value.trim()) {
+              setResults([]);
+              setOpen(false);
+            }
+          }}
+          onFocus={() => query.trim() && setOpen(true)}
+          placeholder="Search for a movie..."
+          className="w-full rounded-2xl border border-white/10 bg-white/5 py-4 pl-12 pr-4 text-base text-white outline-none transition focus:border-amber-400/40 focus:bg-white/[0.07] focus:ring-2 focus:ring-amber-400/20"
+        />
+      </div>
+
+      {open && (
+        <ul
+          role="listbox"
+          className="absolute z-50 mt-2 w-full overflow-hidden rounded-2xl border border-white/10 bg-slate-950 shadow-2xl"
+        >
+          {loading && (
+            <li className="px-4 py-3 text-sm text-slate-400">Searching...</li>
+          )}
+          {!loading && results.length === 0 && (
+            <li className="px-4 py-3 text-sm text-slate-400">No results found</li>
+          )}
+          {!loading &&
+            results.map((result) => {
+              const poster = getPosterUrl(result.poster_path, "w185");
+              const year = result.release_date?.slice(0, 4);
+
+              return (
+                <li key={result.id} role="option" aria-selected={false}>
+                  <Link
+                    href={`/movie/${result.id}`}
+                    prefetch
+                    onClick={() => setOpen(false)}
+                    className="flex items-center gap-3 border-b border-white/5 px-4 py-3 transition hover:bg-white/5 last:border-b-0"
+                  >
+                    <div className="relative h-14 w-10 shrink-0 overflow-hidden rounded-md bg-slate-800">
+                      {poster ? (
+                        <img
+                          src={poster}
+                          alt=""
+                          className="absolute inset-0 h-full w-full object-cover"
+                        />
+                      ) : (
+                        <div className="flex h-full items-center justify-center text-[10px] text-slate-500">
+                          N/A
+                        </div>
+                      )}
+                    </div>
+                    <div className="min-w-0">
+                      <p className="truncate font-medium text-white">
+                        {result.title}
+                        {year ? (
+                          <span className="ml-2 font-normal text-slate-400">
+                            ({year})
+                          </span>
+                        ) : null}
+                      </p>
+                      <p className="line-clamp-1 text-sm text-slate-400">
+                        {result.overview || "No overview available"}
+                      </p>
+                    </div>
+                  </Link>
+                </li>
+              );
+            })}
+        </ul>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { CardType } from "@/lib/cards";
+import { HistoricalAccuracyView } from "./HistoricalAccuracy";
+import { InternationalRatingsView } from "./InternationalRatings";
+import { ProductionFactsView } from "./ProductionFacts";
+import { RatingExplainedView } from "./RatingExplained";
+import { SensitivityGuideView } from "./SensitivityGuide";
+import { SkipGuideView } from "./SkipGuide";
+
+interface CardContentProps {
+  movieId: number;
+  cardType: CardType;
+}
+
+export function CardContent({ movieId, cardType }: CardContentProps) {
+  const [data, setData] = useState<unknown>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [retryToken, setRetryToken] = useState(0);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let cancelled = false;
+
+    async function fetchCard() {
+      try {
+        const response = await fetch(
+          `/api/cards/${cardType}?movieId=${movieId}`,
+          { signal: controller.signal },
+        );
+        const payload = await response.json();
+
+        if (!response.ok) {
+          throw new Error(payload.error ?? "Something went wrong. Try again.");
+        }
+
+        if (!cancelled) {
+          setData(payload.data);
+          setError(null);
+        }
+      } catch (err) {
+        if ((err as Error).name === "AbortError" || cancelled) {
+          return;
+        }
+        setError(
+          err instanceof Error ? err.message : "Something went wrong. Try again.",
+        );
+        setData(null);
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void fetchCard();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [cardType, movieId, retryToken]);
+
+  if (loading) {
+    return (
+      <div className="space-y-3 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+        <div className="h-4 w-40 animate-pulse rounded bg-white/10" />
+        <div className="h-4 w-full animate-pulse rounded bg-white/10" />
+        <div className="h-4 w-5/6 animate-pulse rounded bg-white/10" />
+        <p className="text-sm text-slate-400">Generating insight...</p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-2xl border border-red-400/20 bg-red-400/5 p-6">
+        <p className="text-red-200">{error}</p>
+        <button
+          type="button"
+          onClick={() => {
+            setLoading(true);
+            setRetryToken((token) => token + 1);
+          }}
+          className="mt-4 rounded-lg border border-white/10 px-4 py-2 text-sm text-white transition hover:bg-white/5"
+        >
+          Try again
+        </button>
+      </div>
+    );
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  switch (cardType) {
+    case "rating_explained":
+      return <RatingExplainedView data={data} />;
+    case "skip_guide":
+      return <SkipGuideView data={data} />;
+    case "sensitivity_guide":
+      return <SensitivityGuideView data={data} />;
+    case "international_ratings":
+      return <InternationalRatingsView data={data} />;
+    case "production_facts":
+      return <ProductionFactsView data={data} />;
+    case "historical_accuracy":
+      return <HistoricalAccuracyView data={data} />;
+    default:
+      return null;
+  }
+}
@@ -0,0 +1,76 @@
+import {
+  historicalAccuracySchema,
+  type HistoricalAccuracy,
+} from "@/lib/schemas";
+
+export function HistoricalAccuracyView({ data }: { data: unknown }) {
+  const result = historicalAccuracySchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as HistoricalAccuracy;
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <div className="flex items-end gap-4">
+        <div>
+          <p className="text-xs uppercase tracking-wide text-slate-500">
+            Accuracy score
+          </p>
+          <p className="text-4xl font-semibold text-amber-200">
+            {parsed.accuracyScore}
+            <span className="text-lg text-slate-500">/100</span>
+          </p>
+        </div>
+        <p className="pb-1 text-sm capitalize text-slate-400">
+          Confidence: {parsed.confidence}
+        </p>
+      </div>
+
+      <p className="text-slate-300">{parsed.summary}</p>
+
+      {parsed.accurateElements.length > 0 && (
+        <div>
+          <p className="mb-2 text-sm font-medium text-white">What holds up</p>
+          <ul className="space-y-2">
+            {parsed.accurateElements.map((item) => (
+              <li
+                key={item}
+                className="rounded-lg border border-emerald-400/20 bg-emerald-400/5 px-3 py-2 text-sm text-slate-300"
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {parsed.inventions.length > 0 && (
+        <div>
+          <p className="mb-2 text-sm font-medium text-white">
+            Dramatizations & inventions
+          </p>
+          <div className="space-y-3">
+            {parsed.inventions.map((item, index) => (
+              <div
+                key={`${item.claim}-${index}`}
+                className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
+              >
+                <p className="text-sm text-slate-300">
+                  <span className="text-slate-500">Film claim:</span> {item.claim}
+                </p>
+                <p className="mt-2 text-sm text-slate-300">
+                  <span className="text-slate-500">Reality:</span> {item.reality}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,57 @@
+import {
+  internationalRatingsSchema,
+  type InternationalRatings,
+} from "@/lib/schemas";
+
+export function InternationalRatingsView({ data }: { data: unknown }) {
+  const result = internationalRatingsSchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as InternationalRatings;
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <div className="grid gap-3 sm:grid-cols-2">
+        {parsed.ratings.map((rating) => (
+          <div
+            key={rating.countryCode}
+            className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
+          >
+            <p className="text-xs uppercase tracking-wide text-slate-500">
+              {rating.country} ({rating.countryCode})
+            </p>
+            <p className="mt-1 text-xl font-semibold text-amber-200">
+              {rating.rating}
+            </p>
+            {rating.descriptors?.length ? (
+              <p className="mt-2 text-sm text-slate-400">
+                {rating.descriptors.join(" · ")}
+              </p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+
+      <div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
+        <p className="text-sm leading-relaxed text-slate-300">
+          {parsed.discrepancyNote}
+        </p>
+        {(parsed.strictestCountry || parsed.mostLenientCountry) && (
+          <div className="mt-3 flex flex-wrap gap-4 text-sm text-slate-400">
+            {parsed.strictestCountry ? (
+              <span>Strictest: {parsed.strictestCountry}</span>
+            ) : null}
+            {parsed.mostLenientCountry ? (
+              <span>Most lenient: {parsed.mostLenientCountry}</span>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,70 @@
+import {
+  productionFactsSchema,
+  type ProductionFacts,
+} from "@/lib/schemas";
+
+export function ProductionFactsView({ data }: { data: unknown }) {
+  const result = productionFactsSchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as ProductionFacts;
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      {(parsed.budget || parsed.boxOffice) && (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {parsed.budget ? <Stat label="Budget" value={parsed.budget} /> : null}
+          {parsed.boxOffice ? (
+            <Stat label="Box office" value={parsed.boxOffice} />
+          ) : null}
+        </div>
+      )}
+
+      {parsed.filmingLocations?.length ? (
+        <div>
+          <p className="mb-2 text-sm text-slate-400">Filming locations</p>
+          <div className="flex flex-wrap gap-2">
+            {parsed.filmingLocations.map((location) => (
+              <span
+                key={location}
+                className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-sm text-slate-300"
+              >
+                {location}
+              </span>
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="space-y-3">
+        {parsed.facts.map((item, index) => (
+          <div
+            key={`${item.category}-${index}`}
+            className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
+          >
+            <p className="text-xs uppercase tracking-wide text-amber-200/80">
+              {item.category}
+            </p>
+            <p className="mt-2 text-sm leading-relaxed text-slate-300">
+              {item.fact}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
+      <p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
+      <p className="mt-1 text-lg font-medium text-white">{value}</p>
+    </div>
+  );
+}
@@ -0,0 +1,74 @@
+import {
+  ratingExplainedSchema,
+  type RatingExplained,
+} from "@/lib/schemas";
+import { cn } from "@/lib/utils";
+
+const intensityColors = {
+  mild: "text-emerald-300 bg-emerald-400/10 border-emerald-400/20",
+  moderate: "text-amber-300 bg-amber-400/10 border-amber-400/20",
+  strong: "text-red-300 bg-red-400/10 border-red-400/20",
+};
+
+export function RatingExplainedView({ data }: { data: unknown }) {
+  const result = ratingExplainedSchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as RatingExplained;
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <div>
+        <p className="text-sm uppercase tracking-wide text-slate-500">
+          {parsed.region} rating
+        </p>
+        <h3 className="mt-1 text-2xl font-semibold text-amber-200">
+          {parsed.officialRating}
+        </h3>
+        <p className="mt-3 text-slate-300">{parsed.summary}</p>
+      </div>
+
+      <div className="space-y-3">
+        {parsed.factors.map((factor, index) => (
+          <div
+            key={`${factor.category}-${index}`}
+            className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
+          >
+            <div className="mb-2 flex flex-wrap items-center gap-2">
+              <span className="text-sm font-medium capitalize text-white">
+                {factor.category}
+              </span>
+              <span
+                className={cn(
+                  "rounded-full border px-2 py-0.5 text-xs capitalize",
+                  intensityColors[factor.intensity],
+                )}
+              >
+                {factor.intensity}
+              </span>
+              {factor.approximateTiming ? (
+                <span className="text-xs text-slate-500">
+                  ~{factor.approximateTiming}
+                </span>
+              ) : null}
+            </div>
+            <p className="text-sm leading-relaxed text-slate-300">
+              {factor.description}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      {parsed.borderlineNote ? (
+        <p className="rounded-xl border border-amber-400/20 bg-amber-400/5 p-4 text-sm text-amber-100/90">
+          {parsed.borderlineNote}
+        </p>
+      ) : null}
+    </div>
+  );
+}
@@ -0,0 +1,56 @@
+import {
+  sensitivityGuideSchema,
+  type SensitivityGuide,
+} from "@/lib/schemas";
+import { cn } from "@/lib/utils";
+
+const severityColors = {
+  mild: "border-emerald-400/20 bg-emerald-400/5",
+  moderate: "border-amber-400/20 bg-amber-400/5",
+  strong: "border-red-400/20 bg-red-400/5",
+};
+
+export function SensitivityGuideView({ data }: { data: unknown }) {
+  const result = sensitivityGuideSchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as SensitivityGuide;
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <p className="text-slate-300">{parsed.summary}</p>
+
+      <div className="space-y-3">
+        {parsed.themes.map((theme, index) => (
+          <div
+            key={`${theme.theme}-${index}`}
+            className={cn(
+              "rounded-xl border p-4",
+              severityColors[theme.severity],
+            )}
+          >
+            <div className="mb-2 flex flex-wrap items-center gap-2">
+              <h4 className="font-medium text-white">{theme.theme}</h4>
+              <span className="text-xs capitalize text-slate-400">
+                {theme.severity}
+              </span>
+              {theme.approximateTiming ? (
+                <span className="text-xs text-slate-500">
+                  ~{theme.approximateTiming}
+                </span>
+              ) : null}
+            </div>
+            <p className="text-sm leading-relaxed text-slate-300">
+              {theme.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,124 @@
+import { skipGuideSchema, type SkipGuide } from "@/lib/schemas";
+import { cn } from "@/lib/utils";
+
+const recommendationStyles = {
+  recommended: "bg-red-400/15 text-red-200 border-red-400/25",
+  optional: "bg-amber-400/15 text-amber-200 border-amber-400/25",
+  do_not_skip: "bg-slate-400/15 text-slate-200 border-slate-400/25",
+};
+
+const recommendationLabels = {
+  recommended: "Recommended skip",
+  optional: "Optional skip",
+  do_not_skip: "Do not skip",
+};
+
+function parseTimestamp(value: string): number {
+  const hours = value.match(/(\d+)\s*h/i);
+  const minutes = value.match(/(\d+)\s*m/i);
+  return (hours ? Number(hours[1]) * 60 : 0) + (minutes ? Number(minutes[1]) : 0);
+}
+
+export function SkipGuideView({ data }: { data: unknown }) {
+  const result = skipGuideSchema.safeParse(data);
+  if (!result.success) {
+    return (
+      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 text-sm text-slate-400">
+        Could not display this insight (data format issue). Try another card or refresh later.
+      </div>
+    );
+  }
+  const parsed = result.data as SkipGuide;
+  const maxMinutes = Math.max(
+    ...parsed.segments.map((segment) => parseTimestamp(segment.end)),
+    120,
+  );
+
+  return (
+    <div className="space-y-5 rounded-2xl border border-white/10 bg-white/[0.03] p-6">
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Stat label="Original rating" value={parsed.originalRating} />
+        <Stat
+          label="Suggested age after skips"
+          value={`${parsed.suggestedAudienceAge}+`}
+        />
+        <Stat
+          label="Skippable runtime"
+          value={`${parsed.totalSkippedMinutes} min`}
+        />
+      </div>
+
+      <div>
+        <p className="mb-2 text-sm text-slate-400">Content timeline</p>
+        <div className="relative h-4 overflow-hidden rounded-full bg-emerald-400/20">
+          {parsed.segments.map((segment, index) => {
+            const start = parseTimestamp(segment.start);
+            const end = parseTimestamp(segment.end);
+            const left = (start / maxMinutes) * 100;
+            const width = Math.max(((end - start) / maxMinutes) * 100, 1.5);
+
+            return (
+              <div
+                key={`${segment.start}-${index}`}
+                className={cn(
+                  "absolute top-0 h-full rounded-full",
+                  segment.skipRecommendation === "do_not_skip"
+                    ? "bg-slate-500/70"
+                    : "bg-red-500/80",
+                )}
+                style={{ left: `${left}%`, width: `${width}%` }}
+                title={`${segment.start} – ${segment.end}`}
+              />
+            );
+          })}
+        </div>
+        <div className="mt-2 flex justify-between text-xs text-slate-500">
+          <span>0:00</span>
+          <span>{Math.floor(maxMinutes / 60)}h {maxMinutes % 60}m</span>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {parsed.segments.map((segment, index) => (
+          <div
+            key={`${segment.start}-${segment.end}-${index}`}
+            className="rounded-xl border border-white/10 bg-slate-950/40 p-4"
+          >
+            <div className="mb-2 flex flex-wrap items-center gap-2">
+              <span className="font-medium text-white">
+                {segment.start} – {segment.end}
+              </span>
+              <span
+                className={cn(
+                  "rounded-full border px-2 py-0.5 text-xs",
+                  recommendationStyles[segment.skipRecommendation],
+                )}
+              >
+                {recommendationLabels[segment.skipRecommendation]}
+              </span>
+              <span className="text-xs capitalize text-slate-500">
+                Plot impact: {segment.plotImpact.replace("_", " ")}
+              </span>
+            </div>
+            <p className="text-sm text-slate-300">{segment.reason}</p>
+            <p className="mt-2 text-sm text-slate-400">
+              <span className="text-slate-500">Resume hint:</span>{" "}
+              {segment.resumeHint}
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <p className="text-xs text-slate-500">{parsed.disclaimer}</p>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-white/10 bg-slate-950/40 p-4">
+      <p className="text-xs uppercase tracking-wide text-slate-500">{label}</p>
+      <p className="mt-1 text-lg font-medium text-white">{value}</p>
+    </div>
+  );
+}