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