import {
  Search,
  GitBranch,
  AlertTriangle,
  Scale,
  Layers,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import StudyDesignWidget from "../../../components/lessons/StudyDesignWidget";
import {
  EVAL_STATS_EASY,
  EVAL_STATS_MEDIUM,
} from "../../../data/math/evaluating-statistical-claims";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Observational vs Experimental", icon: Search },
  { title: "Random Assignment", icon: GitBranch },
  { title: "Confounding Variables", icon: AlertTriangle },
  { title: "Causation vs Correlation", icon: Scale },
  { title: "Identifying Bias", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function EvalStatisticalClaimsLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Evaluating Statistical Claims"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Observational vs Experimental Studies
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            The type of study determines what conclusions you can draw.
          </p>
          <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
              <p className="font-bold text-blue-800 mb-1">
                Observational Study
              </p>
              <p className="text-sm text-slate-700">
                Researcher <strong>observes</strong> without intervening. Can
                show <strong>association</strong> only.
              </p>
            </div>
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
              <p className="font-bold text-emerald-800 mb-1">Experiment</p>
              <p className="text-sm text-slate-700">
                Researcher <strong>assigns treatments</strong>. Can show{" "}
                <strong>causation</strong>.
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Spot the Difference" color="amber">
          <p>
            Observational: "Students who eat breakfast tend to have higher
            GPAs."
          </p>
          <p className="text-slate-500">
            Experiment: "Randomly assign half the students to eat breakfast for
            a month, compare GPAs."
          </p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              Only the experiment can claim breakfast causes higher GPAs.
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Random Assignment
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Random sampling</strong> determines generalizability.{" "}
            <strong>Random assignment</strong> determines causation. These are
            different concepts!
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-amber-100 text-amber-900">
                  <th className="border border-amber-300 px-3 py-2"></th>
                  <th className="border border-amber-300 px-3 py-2 text-center font-bold">
                    Random Assignment YES
                  </th>
                  <th className="border border-amber-300 px-3 py-2 text-center font-bold">
                    Random Assignment NO
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
                    Random Sampling YES
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-center bg-emerald-50 font-semibold text-emerald-800">
                    Generalize + Cause & Effect
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-center bg-blue-50 font-semibold text-blue-800">
                    Generalize only
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
                    Random Sampling NO
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-center bg-purple-50 font-semibold text-purple-800">
                    Cause & Effect (this group only)
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-center bg-rose-50 font-semibold text-rose-800">
                    Neither
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <StudyDesignWidget />
        </div>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              Random <strong>sampling</strong> → can generalize to population.
              Random <strong>assignment</strong> → can claim cause-and-effect.
              These are independent concepts.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Confounding Variables
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A <strong>confounding variable</strong> is related to BOTH the
            explanatory and response variables, making it impossible to
            determine the true cause of an observed relationship.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Ice Cream & Drowning" color="amber">
          <p>Ice cream sales and drowning rates both increase in summer.</p>
          <p className="text-slate-500">
            Confounding variable:{" "}
            <strong className="text-amber-700">temperature / season</strong>
          </p>
          <p className="text-slate-500">
            Hot weather causes both — ice cream doesn't cause drowning!
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Coffee & Exercise" color="amber">
            <p>Study: coffee drinkers exercise more.</p>
            <p className="text-slate-500">
              Confounding: Maybe more energetic people both drink coffee AND
              exercise.
            </p>
            <p className="text-slate-500">
              <strong className="text-amber-700">
                Can't conclude coffee causes more exercise.
              </strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Causation vs Correlation
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Correlation</strong> means two variables move together.{" "}
            <strong>Causation</strong> means one actually causes the other.
            Correlation alone does NOT prove causation.
          </p>
          <div className="mt-4 bg-amber-50 border border-amber-200 rounded-xl p-4">
            <p className="font-bold text-amber-900 text-sm mb-2">
              Three Requirements for Causation
            </p>
            <div className="space-y-1 text-sm text-slate-700">
              <p>1. Random assignment to treatment/control groups</p>
              <p>2. Controlled experiment (same conditions except treatment)</p>
              <p>3. Confounding variables ruled out</p>
            </div>
          </div>
        </ConceptCard>
        <TipCard type="warning">
          <p className="text-slate-700">
            The SAT will try to trick you with answer choices that claim
            causation from observational studies. Always check: was there random
            assignment?
          </p>
        </TipCard>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Identifying Bias
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Bias systematically distorts results. Know these types:
          </p>
          <div className="grid md:grid-cols-2 gap-3 mt-4">
            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
              <p className="font-bold text-amber-800 text-sm mb-1">
                Selection Bias
              </p>
              <p className="text-xs text-slate-600">
                Non-random sample excludes or over-represents groups
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
              <p className="font-bold text-amber-800 text-sm mb-1">
                Response Bias
              </p>
              <p className="text-xs text-slate-600">
                Leading questions or social desirability affects answers
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
              <p className="font-bold text-amber-800 text-sm mb-1">
                Nonresponse Bias
              </p>
              <p className="text-xs text-slate-600">
                People who don't respond differ from those who do
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-amber-100">
              <p className="font-bold text-amber-800 text-sm mb-1">
                Voluntary Response
              </p>
              <p className="text-xs text-slate-600">
                Only people with strong opinions participate
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Leading Question" color="amber">
          <p>"Do you agree that the new park is a waste of money?"</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              Response bias — the question pushes toward "agree"
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 6 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Practice & Quiz
        </h2>
        {EVAL_STATS_EASY.slice(0, 2).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="amber" />
        ))}
        {EVAL_STATS_MEDIUM.slice(0, 1).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="amber" />
        ))}
      </div>
    </LessonShell>
  );
}