import React from "react";
import { Target, Hash, GitBranch, Layers, Table, BookOpen } from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import ProbabilityTableWidget from "../../../components/lessons/ProbabilityTableWidget";
import ProbabilityTreeWidget from "../../../components/lessons/ProbabilityTreeWidget";
import {
  PROBABILITY_EASY,
  PROBABILITY_MEDIUM,
} from "../../../data/math/probability";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Basic Probability", icon: Target },
  { title: "Two-Way Tables", icon: Table },
  { title: "Conditional Probability", icon: GitBranch },
  { title: "Independent Events", icon: Layers },
  { title: "Counting & Tree Diagrams", icon: Hash },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function ProbabilityLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Probability & Conditional Probability"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Basic Probability
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Probability measures how likely an event is. Always between 0
            (impossible) and 1 (certain).
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>P(A) = favorable outcomes ÷ total outcomes</FormulaBox>
            <FormulaBox>P(not A) = 1 − P(A)</FormulaBox>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>Bag: 3 red, 5 blue, 2 green marbles (10 total)</p>
          <p className="text-slate-500">
            P(blue) = 5 ÷ 10 ={" "}
            <strong className="text-amber-700">
              <Frac n="1" d="2" />
            </strong>
          </p>
          <p className="text-slate-500">
            P(not blue) = 1 − <Frac n="1" d="2" /> ={" "}
            <strong className="text-amber-700">
              <Frac n="1" d="2" />
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Two-Way Tables
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Two-way tables organize data by two categories. Row and column
            totals help calculate probabilities.{" "}
            <strong>Very common on the SAT!</strong>
          </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">
                    Cats
                  </th>
                  <th className="border border-amber-300 px-3 py-2 text-center">
                    Dogs
                  </th>
                  <th className="border border-amber-300 px-3 py-2 text-center font-bold">
                    Total
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700 text-center">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-semibold text-left">
                    Male
                  </td>
                  <td className="border border-slate-200 px-3 py-2">50</td>
                  <td className="border border-slate-200 px-3 py-2">30</td>
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    80
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-semibold text-left">
                    Female
                  </td>
                  <td className="border border-slate-200 px-3 py-2">60</td>
                  <td className="border border-slate-200 px-3 py-2">60</td>
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    120
                  </td>
                </tr>
                <tr className="bg-amber-50">
                  <td className="border border-slate-200 px-3 py-2 font-bold text-left">
                    Total
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    110
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    90
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    200
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Joint Probability" color="amber">
          <p>
            P(male AND cats) = 50 ÷ 200 ={" "}
            <strong className="text-amber-700">
              <Frac n="1" d="4" />
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ProbabilityTableWidget />
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Conditional Probability
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            P(A | B) means "probability of A <strong>given</strong> that B has
            occurred." Restrict your denominator to just the "given" group.
          </p>
          <FormulaBox>P(A | B) = P(A and B) ÷ P(B)</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: From the Table" color="amber">
          <p>P(cats | male) = ?</p>
          <p className="text-slate-500">Restrict to males only (80 total)</p>
          <p className="text-slate-500">Males who prefer cats: 50</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              P(cats | male) = 50 ÷ 80 = <Frac n="5" d="8" />
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              "Given" = restrict your denominator to just that subgroup! Don't
              use the grand total.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Independent Events
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Events are <strong>independent</strong> if one doesn't affect the
            other. For independent events:
          </p>
          <FormulaBox>P(A and B) = P(A) × P(B)</FormulaBox>
          <p className="text-slate-700 mt-3">
            Test: Events are independent if P(A | B) = P(A).
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Independent Events" color="amber">
          <p>Coin flip and die roll:</p>
          <p className="text-slate-500">
            P(heads AND 6) = <Frac n="1" d="2" /> × <Frac n="1" d="6" /> ={" "}
            <strong className="text-amber-700">
              <Frac n="1" d="12" />
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              "With replacement" → independent. "Without replacement" → NOT
              independent (each draw changes the remaining pool).
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Counting & Tree Diagrams
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Multiplication principle:</strong> If event A has m outcomes
            and event B has n outcomes, the total number of combined outcomes is
            m × n.
          </p>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>
            3 shirts × 4 pants × 2 shoes ={" "}
            <strong className="text-amber-700">24 outfits</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ProbabilityTreeWidget />
        </div>
      </div>

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