import {
  ArrowRight,
  Layers,
  Grid3X3,
  Hash,
  Sigma,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import FactoringWidget from "../../../components/lessons/FactoringWidget";
import RadicalWidget from "../../../components/lessons/RadicalWidget";
import {
  EQUIV_EXPR_EASY,
  EQUIV_EXPR_MEDIUM,
} from "../../../data/math/equivalent-expressions";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Distributive Property", icon: ArrowRight },
  { title: "Combining Like Terms", icon: Layers },
  { title: "Factoring Techniques", icon: Grid3X3 },
  { title: "Special Products", icon: Hash },
  { title: "Exponents & Radicals", icon: Sigma },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function EquivalentExpressionsLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Equivalent Expressions"
      sections={SECTIONS}
      color="violet"
      onFinish={onFinish}
    >
      {/* Section 1: Distributive Property */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Distributive Property
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            The distributive property lets you multiply a factor across terms
            inside parentheses. It also works in reverse — factoring out a
            common factor.
          </p>
          <FormulaBox>a(b + c) = ab + ac</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Distribute" color="violet">
          <p>3(2x − 5) = 6x − 15</p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Distribute a Negative" color="violet">
            <p>−2(x² − 4x + 1)</p>
            <p className="text-slate-500">= −2x² + 8x − 2</p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              Watch for distributing negatives — a very common source of SAT
              errors. Remember: −(a − b) = −a + b, not −a − b.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 2: Combining Like Terms */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Combining Like Terms
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            <strong>Like terms</strong> have the same variable raised to the
            same power. Only the coefficients can differ. You can add or
            subtract like terms by combining their coefficients.
          </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 mb-1">
                Like Terms ✓
              </p>
              <p className="text-sm text-slate-700">
                3x² and −5x², 7xy and 2xy
              </p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
              <p className="font-bold text-rose-800 text-sm mb-1">
                Unlike Terms ✗
              </p>
              <p className="text-sm text-slate-700">3x² and 3x, 2xy and 2x</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="violet">
          <p>3x² + 5x − 2x² + x − 7</p>
          <p className="text-slate-500">= (3x² − 2x²) + (5x + x) − 7</p>
          <p className="text-slate-500">
            = <strong className="text-violet-700">x² + 6x − 7</strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 3: Factoring Techniques */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Factoring Techniques
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            Factoring is the reverse of distributing. For trinomials x² + bx +
            c, find two numbers that <strong>add to b</strong> and{" "}
            <strong>multiply to c</strong>.
          </p>
          <FormulaBox>
            x² + bx + c = (x + p)(x + q) where p + q = b and p × q = c
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Simple Trinomial" color="violet">
          <p>Factor: x² + 7x + 12</p>
          <p className="text-slate-500">Need: p + q = 7 and p × q = 12</p>
          <p className="text-slate-500">
            p = 3, q = 4 →{" "}
            <strong className="text-violet-700">(x + 3)(x + 4)</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Leading Coefficient ≠ 1" color="violet">
            <p>Factor: 2x² + 5x − 3</p>
            <p className="text-slate-500">Product: 2 × (−3) = −6. Sum: 5</p>
            <p className="text-slate-500">
              Numbers: 6 and −1. Split: 2x² + 6x − x − 3
            </p>
            <p className="text-slate-500">
              Group: 2x(x + 3) − 1(x + 3) ={" "}
              <strong className="text-violet-700">(2x − 1)(x + 3)</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <FactoringWidget />
        </div>
      </div>

      {/* Section 4: Special Products */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Special Products
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            These patterns appear constantly on the SAT. Memorize them!
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>a² − b² = (a + b)(a − b)</FormulaBox>
            <FormulaBox>a² + 2ab + b² = (a + b)²</FormulaBox>
            <FormulaBox>a² − 2ab + b² = (a − b)²</FormulaBox>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Difference of Squares" color="violet">
          <p>Factor: 4x² − 25</p>
          <p className="text-slate-500">
            = (2x)² − 5² ={" "}
            <strong className="text-violet-700">(2x + 5)(2x − 5)</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Perfect Square Trinomial" color="violet">
            <p>Factor: x² + 10x + 25</p>
            <p className="text-slate-500">
              = x² + 2(5)(x) + 5² ={" "}
              <strong className="text-violet-700">(x + 5)²</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 5: Exponents & Radicals */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Rational Exponents & Radicals
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            Radicals and rational exponents are two ways to express the same
            thing.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>
              x<sup>1/n</sup> = ⁿ√x &nbsp;&nbsp;and&nbsp;&nbsp; x<sup>m/n</sup>{" "}
              = ⁿ√(x<sup>m</sup>)
            </FormulaBox>
          </div>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-violet-100 text-violet-900">
                  <th className="border border-violet-300 px-3 py-2 text-left font-bold">
                    Rule
                  </th>
                  <th className="border border-violet-300 px-3 py-2 text-left font-bold">
                    Formula
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">Product</td>
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    x<sup>a</sup> × x<sup>b</sup> = x<sup>a+b</sup>
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2">
                    Quotient
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    x<sup>a</sup> ÷ x<sup>b</sup> = x<sup>a−b</sup>
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">
                    Power of a Power
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    (x<sup>a</sup>)<sup>b</sup> = x<sup>ab</sup>
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2">
                    Zero Exponent
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    x⁰ = 1 (x ≠ 0)
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">
                    Negative
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    x<sup>−n</sup> = 1 ÷ x<sup>n</sup>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="violet">
          <p>
            Simplify: x<sup>3/2</sup> × x<sup>1/2</sup>
          </p>
          <p className="text-slate-500">
            = x<sup>(3/2 + 1/2)</sup> ={" "}
            <strong className="text-violet-700">x²</strong>
          </p>
        </ExampleCard>
        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Explore: Fractional Exponents ↔ Radicals
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Drag the sliders to see how the power (numerator) and root
          (denominator) relate.
        </p>
        <RadicalWidget />
      </div>

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