import React from "react";
import {
  Target,
  ArrowRight,
  BarChart,
  Lightbulb,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import LinearQuadraticSystemWidget from "../../../components/lessons/LinearQuadraticSystemWidget";
import {
  NONLINEAR_EQ_EASY,
  NONLINEAR_EQ_MEDIUM,
} from "../../../data/math/nonlinear-equations";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Linear-Quadratic Systems", icon: Target },
  { title: "Substitution with Nonlinear", icon: ArrowRight },
  { title: "Graphical Interpretation", icon: BarChart },
  { title: "Number of Solutions", icon: Lightbulb },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function SystemsEq2VarLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Systems of Equations in Two Variables"
      sections={SECTIONS}
      color="violet"
      onFinish={onFinish}
    >
      {/* Section 1: Linear-Quadratic Systems */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Linear-Quadratic Systems
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            A system with one <strong>linear</strong> and one{" "}
            <strong>quadratic</strong> equation. Geometrically, this is finding
            where a line intersects a parabola.
          </p>
          <div className="grid grid-cols-3 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">2 Solutions</p>
              <p className="text-xs text-slate-500">
                Line crosses parabola twice
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700">1 Solution</p>
              <p className="text-xs text-slate-500">Line tangent to parabola</p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3 text-center">
              <p className="font-bold text-rose-700">0 Solutions</p>
              <p className="text-xs text-slate-500">Line misses parabola</p>
            </div>
          </div>
        </ConceptCard>
      </div>

      {/* Section 2: Substitution with Nonlinear */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Substitution with Nonlinear Equations
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            The go-to strategy: substitute the linear equation into the
            quadratic, then solve the resulting quadratic equation.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Line Meets Parabola" color="violet">
          <p>y = x + 1 and y = x² − 3</p>
          <p className="text-slate-500">Set equal: x + 1 = x² − 3</p>
          <p className="text-slate-500">x² − x − 4 = 0</p>
          <p className="text-slate-500">x = (1 ± √17) ÷ 2</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">Two intersection points</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard
            title="Example: Simplifying Before Solving"
            color="violet"
          >
            <p>y = 2x and y = x² + 2x − 3</p>
            <p className="text-slate-500">2x = x² + 2x − 3 → x² = 3</p>
            <p className="text-slate-500">
              <strong className="text-violet-700">x = ±√3</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 3: Graphical Interpretation */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Graphical Interpretation
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            On the SAT, you may be shown a graph with a line and a parabola and
            asked to identify the solutions (intersection points), or asked "for
            what value of k does the system have exactly one solution?"
          </p>
        </ConceptCard>
        <div className="mt-6">
          <LinearQuadraticSystemWidget />
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              Each intersection point on the graph corresponds to a solution (x,
              y) of the system. Count intersection points = count solutions.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4: Number of Solutions */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Number of Solutions
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            After substitution, you get a quadratic. Use the{" "}
            <strong>discriminant</strong> to determine how many solutions exist.
          </p>
          <FormulaBox>
            Discriminant: b² − 4ac from the resulting quadratic
          </FormulaBox>
          <div className="grid grid-cols-3 gap-3 mt-3 text-sm">
            <div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-center">
              <p className="font-bold text-violet-800">b² − 4ac &gt; 0</p>
              <p className="text-slate-600">2 solutions</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-center">
              <p className="font-bold text-violet-800">b² − 4ac = 0</p>
              <p className="text-slate-600">1 solution</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-center">
              <p className="font-bold text-violet-800">b² − 4ac &lt; 0</p>
              <p className="text-slate-600">0 solutions</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Finding k for One Solution" color="violet">
          <p>y = kx + 2 and y = x²</p>
          <p className="text-slate-500">kx + 2 = x² → x² − kx − 2 = 0</p>
          <p className="text-slate-500">
            For exactly one solution: b² − 4ac = 0
          </p>
          <p className="text-slate-500">
            k² − 4(1)(−2) = 0 → k² = −8 → no real k
          </p>
          <p className="text-slate-500">
            This system always has 0 or 2 solutions, never exactly 1.
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              When the SAT asks "for what value of k does the system have
              exactly one solution," set the discriminant equal to 0 and solve
              for k.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 5: 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>
  );
}
