import { Link } from "@tanstack/react-router";
import { BookOpen, ArrowRight } from "lucide-react";
import type { Assessment } from "@/lib/report-types";
import { educationForAssessment, PREVENTION_CHECKLIST, riskTone } from "@/lib/mold-education";

export function MoldEducationPanel({ assessment }: { assessment: Assessment }) {
  const { issue, species, reason } = educationForAssessment(assessment);

  return (
    <section className="mt-5 rounded-2xl border border-border/60 bg-soft p-4">
      <h3 className="flex items-center gap-2 text-sm font-semibold">
        <BookOpen className="h-4 w-4 text-primary" /> Mold education for this result
      </h3>
      <p className="mt-1 text-[11px] text-muted-foreground">{reason}</p>

      <div className="mt-3 rounded-2xl bg-card p-3">
        <div className="flex items-center justify-between gap-2">
          <span className="text-sm font-semibold">Most likely: {issue.name}</span>
          <span className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${riskTone(issue.risk)}`}>{issue.risk}</span>
        </div>
        <p className="mt-2 text-xs text-muted-foreground">{issue.appearance}</p>
        <p className="mt-2 text-xs text-muted-foreground">
          <span className="font-semibold text-foreground">Health considerations: </span>
          {issue.healthRisks}
        </p>
        <p className="mt-2 text-xs text-muted-foreground">
          <span className="font-semibold text-foreground">Treatment: </span>
          {issue.treatment}
        </p>
        <p className="mt-2 text-xs text-muted-foreground">
          <span className="font-semibold text-foreground">Species to consider: </span>
          {species.map((s) => s.name).join(", ")}
        </p>
      </div>

      <h4 className="mt-3 text-xs font-semibold">Prevention steps that apply now</h4>
      <ul className="mt-1 space-y-1 text-xs text-muted-foreground">
        {PREVENTION_CHECKLIST.slice(0, 4).map((p) => (
          <li key={p}>• {p}</li>
        ))}
      </ul>

      <Link to="/learn" className="mt-3 flex items-center gap-1 text-xs font-semibold text-primary">
        Open the Mold Education Center <ArrowRight className="h-3 w-3" />
      </Link>
    </section>
  );
}