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-stone-200 bg-white p-6 text-sm text-stone-700">
        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-stone-200 bg-white 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-stone-600">Filming locations</p>
          <div className="flex flex-wrap gap-2">
            {parsed.filmingLocations.map((location) => (
              <span
                key={location}
                className="rounded-full border border-stone-200 bg-stone-100 px-3 py-1 text-sm text-stone-700"
              >
                {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-stone-200 bg-stone-100 p-4"
          >
            <p className="text-xs uppercase tracking-wide text-amber-700">
              {item.category}
            </p>
            <p className="mt-2 text-sm leading-relaxed text-stone-700">
              {item.fact}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-xl border border-stone-200 bg-stone-100 p-4">
      <p className="text-xs uppercase tracking-wide text-stone-500">{label}</p>
      <p className="mt-1 text-lg font-medium text-stone-950">{value}</p>
    </div>
  );
}