first commit

components/cards/CardContent.tsx

@@ -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;
+  }
+}

components/cards/HistoricalAccuracy.tsx

@@ -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>
+  );
+}

components/cards/InternationalRatings.tsx

@@ -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>
+  );
+}

components/cards/ProductionFacts.tsx

@@ -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>
+  );
+}

components/cards/RatingExplained.tsx

@@ -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>
+  );
+}

components/cards/SensitivityGuide.tsx

@@ -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>
+  );
+}

components/cards/SkipGuide.tsx

@@ -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>
+  );
+}