import React from "react";
import { Layers, Hash, Target, Zap, RotateCcw, BookOpen } from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import DiscriminantWidget from "../../../components/lessons/DiscriminantWidget";
import CompletingSquareWidget from "../../../components/lessons/CompletingSquareWidget";
import RadicalSolutionWidget from "../../../components/lessons/RadicalSolutionWidget";
import {
  NONLINEAR_EQ_EASY,
  NONLINEAR_EQ_MEDIUM,
} from "../../../data/math/nonlinear-equations";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Factoring Quadratics", icon: Layers },
  { title: "Completing the Square", icon: Hash },
  { title: "Quadratic Formula", icon: Target },
  { title: "Polynomial Equations", icon: Zap },
  { title: "Radical & Rational Equations", icon: RotateCcw },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function NonlinearEq1VarLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Nonlinear Equations in One Variable"
      sections={SECTIONS}
      color="violet"
      onFinish={onFinish}
    >
      {/* Section 1: Factoring Quadratics */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Factoring Quadratics
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            To solve a quadratic by factoring: set it equal to zero, factor,
            then apply the <strong>Zero Product Property</strong> — if ab = 0,
            then a = 0 or b = 0.
          </p>
          <FormulaBox>
            If (expression₁)(expression₂) = 0, then expression₁ = 0 or
            expression₂ = 0
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Simple Factoring" color="violet">
          <p>x² − 5x + 6 = 0</p>
          <p className="text-slate-500">(x − 2)(x − 3) = 0</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">x = 2 or x = 3</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Leading Coefficient ≠ 1" color="violet">
            <p>2x² + x − 6 = 0</p>
            <p className="text-slate-500">(2x − 3)(x + 2) = 0</p>
            <p className="text-slate-500">
              <strong className="text-violet-700">
                x = <Frac n="3" d="2" /> or x = −2
              </strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              Always check if you can factor out a GCF first. For example, 6x² −
              12x = 0 → 6x(x − 2) = 0 → x = 0 or x = 2.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 2: Completing the Square */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Completing the Square
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            Rewrite ax² + bx + c into <strong>vertex form</strong> a(x − h)² +
            k. This reveals the vertex and lets you solve any quadratic.
          </p>
          <div className="space-y-2 mt-3 text-sm">
            <p>1. Move the constant to the other side</p>
            <p>2. If a ≠ 1, divide everything by a</p>
            <p>3. Take half of b, square it, add to both sides</p>
            <p>4. Factor the perfect square trinomial</p>
          </div>
          <FormulaBox>x² + bx + (b ÷ 2)² = (x + b ÷ 2)²</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example" color="violet">
          <p>x² + 6x + 2 = 0</p>
          <p className="text-slate-500">x² + 6x = −2</p>
          <p className="text-slate-500">x² + 6x + 9 = −2 + 9 = 7</p>
          <p className="text-slate-500">(x + 3)² = 7</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">x = −3 ± √7</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <CompletingSquareWidget />
        </div>
      </div>

      {/* Section 3: Quadratic Formula */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Quadratic Formula & Discriminant
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            The quadratic formula works for <strong>every</strong> quadratic
            equation ax² + bx + c = 0.
          </p>
          <FormulaBox>x = (−b ± √(b² − 4ac)) ÷ 2a</FormulaBox>
          <p className="text-slate-700 mt-4">
            The <strong>discriminant</strong> (b² − 4ac) tells you the number of
            real solutions:
          </p>
          <div className="grid grid-cols-3 gap-3 mt-3">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3 text-center">
              <p className="font-bold text-emerald-700">b² − 4ac &gt; 0</p>
              <p className="text-xs text-slate-500">2 real solutions</p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700">b² − 4ac = 0</p>
              <p className="text-xs text-slate-500">1 repeated solution</p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3 text-center">
              <p className="font-bold text-rose-700">b² − 4ac &lt; 0</p>
              <p className="text-xs text-slate-500">No real solutions</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="violet">
          <p>2x² − 3x − 5 = 0 → a = 2, b = −3, c = −5</p>
          <p className="text-slate-500">
            Discriminant: (−3)² − 4(2)(−5) = 9 + 40 = 49
          </p>
          <p className="text-slate-500">x = (3 ± 7) ÷ 4</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">
              x = <Frac n="5" d="2" /> or x = −1
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <DiscriminantWidget />
        </div>
      </div>

      {/* Section 4: Polynomial Equations */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Polynomial Equations
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            For higher-degree polynomials, try{" "}
            <strong>factoring out a GCF</strong> first, then use known
            identities or factoring by grouping.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Factor Out GCF" color="violet">
          <p>x³ − 4x = 0</p>
          <p className="text-slate-500">x(x² − 4) = 0</p>
          <p className="text-slate-500">x(x + 2)(x − 2) = 0</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">x = 0, x = −2, or x = 2</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Substitution" color="violet">
            <p>x⁴ − 5x² + 4 = 0</p>
            <p className="text-slate-500">Let u = x² → u² − 5u + 4 = 0</p>
            <p className="text-slate-500">
              (u − 1)(u − 4) = 0 → u = 1 or u = 4
            </p>
            <p className="text-slate-500">
              <strong className="text-violet-700">x = ±1 or x = ±2</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              On the SAT, always check if you can factor out a common term
              first. It's the fastest path to simplification.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 5: Radical & Rational */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Radical & Rational Equations
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            <strong>Radical equations:</strong> Isolate the radical, then square
            both sides. <strong>Rational equations:</strong> Find the LCD,
            multiply through, then solve. In both cases, you{" "}
            <strong>must check for extraneous solutions</strong>.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Radical Equation" color="violet">
          <p>√(2x + 3) = x</p>
          <p className="text-slate-500">Square both sides: 2x + 3 = x²</p>
          <p className="text-slate-500">x² − 2x − 3 = 0 → (x − 3)(x + 1) = 0</p>
          <p className="text-slate-500">Check x = 3: √9 = 3 ✓</p>
          <p className="text-slate-500">Check x = −1: √1 = 1 ≠ −1 ✗</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">x = 3 only</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Rational Equation" color="violet">
            <p>
              <Frac n="3" d="x" /> + <Frac n="1" d="2" /> = <Frac n="5" d="x" />
            </p>
            <p className="text-slate-500">Multiply by 2x: 6 + x = 10 → x = 4</p>
            <p className="text-slate-500">
              Check: x ≠ 0 ✓ →{" "}
              <strong className="text-violet-700">x = 4</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <RadicalSolutionWidget />
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              ALWAYS check your solutions in the original equation. Squaring
              both sides can introduce extraneous solutions, and rational
              equations can have excluded values.
            </p>
          </TipCard>
        </div>
      </div>

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