import React from "react";
import { Scale, Target, BarChart, Layers, Hash, BookOpen } from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import SamplingVisualizerWidget from "../../../components/lessons/SamplingVisualizerWidget";
import ConfidenceIntervalWidget from "../../../components/lessons/ConfidenceIntervalWidget";
import {
  SAMPLE_STATS_EASY,
  SAMPLE_STATS_MEDIUM,
} from "../../../data/math/sample-statistics-moe";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Random Sampling", icon: Scale },
  { title: "Sampling Methods", icon: Layers },
  { title: "Confidence Intervals", icon: Target },
  { title: "Margin of Error", icon: BarChart },
  { title: "Sample Size Effects", icon: Hash },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function SampleStatsLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Inference from Sample Statistics & Margin of Error"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Random Sampling
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            To generalize from a sample to a population, the sample must be{" "}
            <strong>random and representative</strong>. Convenience samples
            introduce bias and cannot support valid generalizations.
          </p>
          <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
              <p className="font-bold text-amber-800 mb-1">Population</p>
              <p className="text-sm text-slate-700">
                The entire group you want to study
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
              <p className="font-bold text-amber-800 mb-1">Sample</p>
              <p className="text-sm text-slate-700">
                The subset actually studied
              </p>
            </div>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <SamplingVisualizerWidget />
        </div>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Sampling Methods
        </h2>
        <ConceptCard color="amber">
          <div className="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 text-left font-bold">
                    Method
                  </th>
                  <th className="border border-amber-300 px-3 py-2 text-left font-bold">
                    Description
                  </th>
                  <th className="border border-amber-300 px-3 py-2 text-left font-bold">
                    Bias Risk
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Simple Random
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Every individual has equal chance
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-emerald-700 font-semibold">
                    Very Low
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Stratified
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Divide into subgroups, sample each
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-emerald-700 font-semibold">
                    Very Low
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Cluster
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Randomly select entire subgroups
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-amber-700 font-semibold">
                    Low–Med
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Systematic
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Every kth individual from a list
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-amber-700 font-semibold">
                    Low–Med
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Convenience
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Whoever is easiest to reach
                  </td>
                  <td className="border border-slate-200 px-3 py-2 text-rose-700 font-semibold">
                    High
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <TipCard type="tip">
          <p className="text-slate-700">
            The SAT tests whether you can identify bias. A voluntary response
            survey or convenience sample <strong>cannot</strong> generalize to
            the whole population.
          </p>
        </TipCard>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Confidence Intervals
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A <strong>confidence interval</strong> gives a range where the true
            population parameter likely falls.
          </p>
          <FormulaBox>
            Confidence Interval = Sample Statistic ± Margin of Error
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>Survey: 62% support a policy, margin of error ±4%</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              True support likely between 58% and 66%
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ConfidenceIntervalWidget />
        </div>
        <div className="mt-4">
          <div className="grid md:grid-cols-2 gap-3">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">
                Intervals Don't Overlap
              </p>
              <p className="text-xs text-slate-600">
                Significant difference between groups
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
              <p className="font-bold text-amber-800 text-sm">
                Intervals Overlap
              </p>
              <p className="text-xs text-slate-600">
                Cannot claim a significant difference
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Margin of Error
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            The margin of error tells you how much the sample statistic might
            differ from the population parameter. It depends on sample size and
            confidence level.
          </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 text-sm">
              <p className="font-bold text-amber-800 mb-1">Larger Sample</p>
              <p className="text-slate-600">
                → Smaller margin of error (more precise)
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-amber-100 text-sm">
              <p className="font-bold text-amber-800 mb-1">Higher Confidence</p>
              <p className="text-slate-600">
                → Larger margin of error (wider interval)
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Sample Size Matters" color="amber">
          <p>Poll of 500 people: 45% ± 3%</p>
          <p className="text-slate-500">Poll of 2000 people: 45% ± 1.5%</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              Larger sample = more precise estimate
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Sample Size Effects
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Increasing sample size decreases variability and margin of error,
            but <strong>does NOT fix bias</strong>. A biased sample stays biased
            no matter how large!
          </p>
          <div className="grid grid-cols-2 gap-3 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3 text-center">
              <p className="font-bold text-emerald-700 text-sm">Large Random</p>
              <p className="text-xs text-slate-500">
                Best: generalizable + precise
              </p>
            </div>
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700 text-sm">Small Random</p>
              <p className="text-xs text-slate-500">OK but more variability</p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3 text-center">
              <p className="font-bold text-rose-700 text-sm">Large Biased</p>
              <p className="text-xs text-slate-500">Still biased!</p>
            </div>
            <div className="bg-red-50 border border-red-200 rounded-xl p-3 text-center">
              <p className="font-bold text-red-700 text-sm">Small Biased</p>
              <p className="text-xs text-slate-500">Worst of both worlds</p>
            </div>
          </div>
        </ConceptCard>
        <TipCard type="warning">
          <p className="text-slate-700">
            The SAT loves asking "what is wrong with this study?" Look for:
            non-random sample, voluntary response, leading questions, or
            too-small sample size.
          </p>
        </TipCard>
      </div>

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