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