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