import React from "react";
import {
  BarChart,
  Box,
  Calculator,
  Ruler,
  TrendingUp,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import HistogramBuilderWidget from "../../../components/lessons/HistogramBuilderWidget";
import BoxPlotAnatomyWidget from "../../../components/lessons/BoxPlotAnatomyWidget";
import FrequencyMeanWidget from "../../../components/lessons/FrequencyMeanWidget";
import {
  ONE_VAR_DATA_EASY,
  ONE_VAR_DATA_MEDIUM,
} from "../../../data/math/one-variable-data";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Histograms & Dot Plots", icon: BarChart },
  { title: "Box Plots", icon: Box },
  { title: "Mean, Median, Mode", icon: Calculator },
  { title: "Range, IQR & Spread", icon: Ruler },
  { title: "Standard Deviation & Outliers", icon: TrendingUp },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function OneVariableDataLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="One-Variable Data: Distributions & Measures"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Histograms & Dot Plots
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Histograms</strong> group data into bins/intervals and show
            frequency with bar heights. <strong>Dot plots</strong> show
            individual values as stacked dots. Both reveal the{" "}
            <strong>shape</strong> of the distribution.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700 text-sm">Symmetric</p>
              <p className="text-xs text-slate-500">Mirror image</p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700 text-sm">Skewed Left</p>
              <p className="text-xs text-slate-500">Tail to the left</p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700 text-sm">Skewed Right</p>
              <p className="text-xs text-slate-500">Tail to the right</p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700 text-sm">Bimodal</p>
              <p className="text-xs text-slate-500">Two peaks</p>
            </div>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <HistogramBuilderWidget />
        </div>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Box Plots (Box-and-Whisker)
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A box plot displays the <strong>five-number summary</strong>:
            minimum, Q1, median, Q3, maximum.
          </p>
          <div className="mt-4 bg-white/60 rounded-xl border border-amber-200 p-4">
            <div className="flex items-center justify-between text-sm font-mono text-slate-700">
              <span>Min</span>
              <span>Q1</span>
              <span>Median</span>
              <span>Q3</span>
              <span>Max</span>
            </div>
            <div className="mt-2 text-xs text-slate-500 text-center">
              ← 25% →|← 25% →|← 25% →|← 25% →
            </div>
          </div>
          <p className="text-sm text-slate-700 mt-3">
            <strong>IQR</strong> = Q3 − Q1 (the "box" width, containing the
            middle 50%)
          </p>
        </ConceptCard>
        <div className="mt-6">
          <BoxPlotAnatomyWidget />
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              Outliers are typically defined as values below Q1 − 1.5 × IQR or
              above Q3 + 1.5 × IQR.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Mean, Median, Mode
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Three measures of center:
          </p>
          <div className="grid md:grid-cols-3 gap-3 mt-4">
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
              <p className="font-bold text-amber-800 text-sm">Mean</p>
              <p className="text-xs text-slate-600">
                Sum ÷ count. Affected by outliers.
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
              <p className="font-bold text-amber-800 text-sm">Median</p>
              <p className="text-xs text-slate-600">
                Middle value. Resistant to outliers.
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3">
              <p className="font-bold text-amber-800 text-sm">Mode</p>
              <p className="text-xs text-slate-600">
                Most frequent value. Can have none or many.
              </p>
            </div>
          </div>
          <FormulaBox>Mean = Σx ÷ n</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>Data: 3, 5, 5, 7, 10</p>
          <p className="text-slate-500">Mean = (3 + 5 + 5 + 7 + 10) ÷ 5 = 6</p>
          <p className="text-slate-500">Median = 5 (middle value)</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">Mode = 5 (appears most)</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <FrequencyMeanWidget />
        </div>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              For skewed distributions, use <strong>median</strong> (resistant
              to outliers). For symmetric distributions, mean ≈ median.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Range, IQR & Spread
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Measures of spread tell you how spread out the data is.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>Range = Maximum − Minimum</FormulaBox>
            <FormulaBox>IQR = Q3 − Q1 (middle 50% of data)</FormulaBox>
          </div>
          <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">Range</p>
              <p className="text-slate-600">
                Uses only two values. Very sensitive to outliers.
              </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">IQR</p>
              <p className="text-slate-600">
                Resistant to outliers. Better measure of typical spread.
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>Data: 2, 4, 6, 8, 10, 12, 14</p>
          <p className="text-slate-500">Range = 14 − 2 = 12</p>
          <p className="text-slate-500">
            Q1 = 4, Q3 = 12 →{" "}
            <strong className="text-amber-700">IQR = 8</strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Standard Deviation & Outliers
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Standard deviation</strong> (SD) measures the average
            distance from the mean. You won't calculate it on the SAT, but you
            need to understand it.
          </p>
          <div className="grid md:grid-cols-2 gap-3 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">Small SD</p>
              <p className="text-xs text-slate-600">
                Data clustered near the mean
              </p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
              <p className="font-bold text-rose-800 text-sm">Large SD</p>
              <p className="text-xs text-slate-600">
                Data spread far from the mean
              </p>
            </div>
          </div>
          <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">
              Effects of Outliers
            </p>
            <p className="text-sm text-slate-700">
              Outliers <strong>pull the mean</strong> toward them,{" "}
              <strong>increase</strong> the SD and range, but have{" "}
              <strong>little effect</strong> on the median and IQR.
            </p>
          </div>
        </ConceptCard>
        <TipCard type="tip">
          <p className="text-slate-700">
            Adding a constant to all values shifts the mean but{" "}
            <strong>doesn't change</strong> the SD. Multiplying all values by a
            constant multiplies <strong>both</strong> the mean and SD by that
            constant.
          </p>
        </TipCard>
      </div>

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