import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import {
  BookOpen,
  ChevronDown,
  ShieldAlert,
  HeartPulse,
  ListChecks,
  CalendarClock,
  PhoneCall,
  CalendarCheck,
  Sparkles,
} from "lucide-react";
import { AppShell } from "@/components/AppShell";
import {
  MOLD_ISSUES,
  MOLD_SPECIES,
  HEALTH_RISKS,
  HEALTH_DISCLAIMER,
  PREVENTION_CHECKLIST,
  MAINTENANCE_REMINDERS,
  CALL_PROFESSIONAL,
  riskTone,
} from "@/lib/mold-education";
import blackMold from "@/assets/mold-black.jpg";
import whiteMold from "@/assets/mold-white.jpg";
import condensationMold from "@/assets/mold-condensation.jpg";
import greenMold from "@/assets/mold-green.jpg";

export const Route = createFileRoute("/learn")({
  head: () => ({
    meta: [
      { title: "Mold Education & Prevention Center | Emma Mold Inspection" },
      {
        name: "description",
        content:
          "Learn to identify black, white, condensation and green mold, understand health risks, and follow a practical prevention and maintenance checklist.",
      },
      { property: "og:title", content: "Mold Education & Prevention Center" },
      {
        property: "og:description",
        content: "A professional mold reference guide: species library, health risks, prevention checklist and when to call a professional.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: LearnPage,
});

const GALLERY: Record<string, string> = {
  "black-mold": blackMold,
  "white-mold": whiteMold,
  "condensation-mold": condensationMold,
  "green-mold": greenMold,
};

function LearnPage() {
  const [openIssue, setOpenIssue] = useState<string | null>("black-mold");
  const [openSpecies, setOpenSpecies] = useState<string | null>(null);
  const [checked, setChecked] = useState<string[]>([]);

  const toggle = (item: string) =>
    setChecked((c) => (c.includes(item) ? c.filter((i) => i !== item) : [...c, item]));

  return (
    <AppShell>
      <section className="rounded-3xl bg-soft p-5 shadow-card">
        <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-primary">
          <BookOpen className="h-4 w-4" /> Knowledge center
        </p>
        <h1 className="mt-2 text-2xl font-bold leading-tight">Mold Education &amp; Prevention Center</h1>
        <p className="mt-2 text-sm text-muted-foreground">
          A professional reference for customers, landlords, property managers and tenants — how to identify mold,
          understand the health risks, and stop it coming back.
        </p>
      </section>

      <section className="mt-6" aria-labelledby="common-issues">
        <h2 id="common-issues" className="text-base font-semibold">Common mold issues</h2>
        <p className="mt-1 text-xs text-muted-foreground">Tap a card to expand the full reference.</p>
        <div className="mt-3 space-y-3">
          {MOLD_ISSUES.map((m) => {
            const open = openIssue === m.id;
            return (
              <article key={m.id} className="overflow-hidden rounded-2xl border border-border/60 bg-card shadow-card">
                <img
                  src={GALLERY[m.id]}
                  alt={`${m.name} illustration`}
                  width={768}
                  height={512}
                  loading="lazy"
                  className="h-32 w-full object-cover"
                />
                <button
                  onClick={() => setOpenIssue(open ? null : m.id)}
                  aria-expanded={open}
                  className="flex w-full items-center justify-between gap-3 p-4 text-left"
                >
                  <span>
                    <span className="block text-sm font-semibold">{m.name}</span>
                    {m.scientific ? <span className="block text-[11px] italic text-muted-foreground">{m.scientific}</span> : null}
                  </span>
                  <span className="flex items-center gap-2">
                    <span className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${riskTone(m.risk)}`}>{m.risk}</span>
                    <ChevronDown className={`h-4 w-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
                  </span>
                </button>
                {open ? (
                  <dl className="space-y-2 border-t border-border/60 p-4 text-xs">
                    <Detail label="Appearance" value={m.appearance} />
                    <Detail label="Typical color" value={m.color} />
                    <Detail label="Common locations" value={m.locations} />
                    <Detail label="Moisture conditions" value={m.moisture} />
                    <Detail label="Health risks" value={m.healthRisks} />
                    <Detail label="Recommended treatment" value={m.treatment} />
                  </dl>
                ) : null}
              </article>
            );
          })}
        </div>
      </section>

      <section className="mt-8" aria-labelledby="species">
        <h2 id="species" className="text-base font-semibold">Common indoor molds</h2>
        <p className="mt-1 text-xs text-muted-foreground">Species reference library.</p>
        <div className="mt-3 space-y-2">
          {MOLD_SPECIES.map((s) => {
            const open = openSpecies === s.id;
            return (
              <article key={s.id} className="rounded-2xl border border-border/60 bg-card shadow-card">
                <button
                  onClick={() => setOpenSpecies(open ? null : s.id)}
                  aria-expanded={open}
                  className="flex w-full items-center justify-between gap-3 p-4 text-left"
                >
                  <span className="text-sm font-semibold italic">{s.name}</span>
                  <span className="flex items-center gap-2">
                    <span className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${riskTone(s.risk)}`}>{s.risk}</span>
                    <ChevronDown className={`h-4 w-4 shrink-0 transition-transform ${open ? "rotate-180" : ""}`} />
                  </span>
                </button>
                {open ? (
                  <dl className="space-y-2 border-t border-border/60 p-4 text-xs">
                    <Detail label="Color and appearance" value={s.appearance} />
                    <Detail label="Common growth locations" value={s.locations} />
                    <Detail label="Moisture source" value={s.moistureSource} />
                    <Detail label="Health effects" value={s.healthEffects} />
                    <Detail label="Risk level" value={s.risk} />
                    <Detail label="Professional treatment" value={s.treatment} />
                  </dl>
                ) : null}
              </article>
            );
          })}
        </div>
      </section>

      <section className="mt-8" aria-labelledby="health">
        <h2 id="health" className="flex items-center gap-2 text-base font-semibold">
          <HeartPulse className="h-4 w-4 text-primary" /> Health risks
        </h2>
        <div className="mt-3 grid gap-3 sm:grid-cols-2">
          {HEALTH_RISKS.map((group) => (
            <div key={group.id} className="rounded-2xl border border-border/60 bg-card p-4 shadow-card">
              <h3 className="text-sm font-semibold">{group.title}</h3>
              <ul className="mt-2 space-y-1 text-xs text-muted-foreground">
                {group.items.map((i) => (
                  <li key={i}>• {i}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p className="mt-3 rounded-2xl bg-muted p-3 text-[11px] leading-relaxed text-muted-foreground">{HEALTH_DISCLAIMER}</p>
      </section>

      <section className="mt-8" aria-labelledby="prevention">
        <h2 id="prevention" className="flex items-center gap-2 text-base font-semibold">
          <ListChecks className="h-4 w-4 text-primary" /> Prevention checklist
        </h2>
        <ul className="mt-3 space-y-2">
          {PREVENTION_CHECKLIST.map((item) => {
            const done = checked.includes(item);
            return (
              <li key={item}>
                <button
                  onClick={() => toggle(item)}
                  aria-pressed={done}
                  className={`flex w-full items-start gap-3 rounded-2xl border p-3 text-left text-xs transition-colors ${
                    done ? "border-primary/40 bg-primary/5 text-foreground" : "border-border/60 bg-card text-muted-foreground"
                  }`}
                >
                  <span
                    className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${
                      done ? "border-primary bg-primary text-primary-foreground" : "border-border"
                    }`}
                    aria-hidden
                  >
                    {done ? "✓" : ""}
                  </span>
                  {item}
                </button>
              </li>
            );
          })}
        </ul>
      </section>

      <section className="mt-8" aria-labelledby="maintenance">
        <h2 id="maintenance" className="flex items-center gap-2 text-base font-semibold">
          <CalendarClock className="h-4 w-4 text-primary" /> Maintenance reminders
        </h2>
        <div className="mt-3 space-y-2">
          {MAINTENANCE_REMINDERS.map((r) => (
            <div key={r.every} className="rounded-2xl border border-border/60 bg-card p-3 shadow-card">
              <span className="text-[11px] font-semibold uppercase tracking-widest text-primary">{r.every}</span>
              <p className="mt-1 text-xs text-muted-foreground">{r.task}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mt-8" aria-labelledby="pro">
        <h2 id="pro" className="flex items-center gap-2 text-base font-semibold">
          <ShieldAlert className="h-4 w-4 text-destructive" /> When to call a professional
        </h2>
        <ul className="mt-3 space-y-1 rounded-2xl border border-border/60 bg-card p-4 text-xs text-muted-foreground shadow-card">
          {CALL_PROFESSIONAL.map((c) => (
            <li key={c}>• {c}</li>
          ))}
        </ul>
      </section>

      <div className="mt-6 grid gap-3 sm:grid-cols-2">
        <Link
          to="/book"
          search={{ service: "mold-inspection", company: undefined }}
          className="flex items-center justify-center gap-2 rounded-2xl bg-brand py-3.5 text-sm font-semibold text-primary-foreground shadow-float"
        >
          <CalendarCheck className="h-4 w-4" /> Book Inspection
        </Link>
        <Link
          to="/book"
          search={{ service: "mold-treatment", company: undefined }}
          className="flex items-center justify-center gap-2 rounded-2xl border border-border/60 bg-card py-3.5 text-sm font-semibold shadow-card"
        >
          <Sparkles className="h-4 w-4 text-primary" /> Book Mold Treatment
        </Link>
      </div>

      <p className="mt-4 flex items-center justify-center gap-2 text-[11px] text-muted-foreground">
        <PhoneCall className="h-3.5 w-3.5" /> Emma Mold Inspection Services — Inspect. Treat. Protect.
      </p>
    </AppShell>
  );
}

function Detail({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <dt className="text-[11px] font-semibold uppercase tracking-wide text-primary">{label}</dt>
      <dd className="mt-0.5 text-muted-foreground">{value}</dd>
    </div>
  );
}