import React from "react";
import {
  Scale,
  ArrowRight,
  GitBranch,
  BarChart,
  Layers,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import InequalityRegionWidget from "../../../components/lessons/InequalityRegionWidget";
import {
  LINEAR_INEQ_EASY,
  LINEAR_INEQ_MEDIUM,
} from "../../../data/math/linear-inequalities";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Solving Inequalities", icon: Scale },
  { title: "Compound Inequalities", icon: GitBranch },
  { title: "Graphing on Number Lines", icon: ArrowRight },
  { title: "Coordinate Plane", icon: BarChart },
  { title: "Systems of Inequalities", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function LinearInequalitiesLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Linear Inequalities"
      sections={SECTIONS}
      color="blue"
      onFinish={onFinish}
    >
      {/* Section 1: Solving Inequalities */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Solving Inequalities
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Inequalities work just like equations — apply the same operation to
            both sides. The <strong>one critical difference</strong>: when you
            multiply or divide by a <strong>negative number</strong>, you must{" "}
            <strong>flip the inequality sign</strong>.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700 text-lg">&lt;</p>
              <p className="text-xs text-slate-500">Less than</p>
            </div>
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700 text-lg">&gt;</p>
              <p className="text-xs text-slate-500">Greater than</p>
            </div>
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700 text-lg">≤</p>
              <p className="text-xs text-slate-500">Less than or equal</p>
            </div>
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700 text-lg">≥</p>
              <p className="text-xs text-slate-500">Greater than or equal</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Flip the Sign" color="blue">
          <p>Solve: −3x + 7 &gt; 16</p>
          <p className="text-slate-500">−3x &gt; 9</p>
          <p className="text-slate-500">
            Divide by −3 → <strong className="text-red-600">FLIP</strong> → x
            &lt; −3
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Variables on Both Sides" color="blue">
            <p>Solve: 2x − 5 ≤ 3x + 2</p>
            <p className="text-slate-500">−x ≤ 7</p>
            <p className="text-slate-500">
              Multiply by −1 → <strong className="text-blue-700">x ≥ −7</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              The #1 inequality mistake: forgetting to flip the sign when
              multiplying or dividing by a negative. The SAT specifically
              designs trap answers for this.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 2: Compound Inequalities */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Compound Inequalities
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            A compound inequality combines two inequalities.{" "}
            <strong>AND</strong> means both must be true (intersection).{" "}
            <strong>OR</strong> means at least one must be true (union).
          </p>
          <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
              <p className="font-bold text-emerald-800 mb-1">
                AND (Intersection)
              </p>
              <p className="text-sm text-slate-700">
                −2 &lt; x ≤ 5 means x is between −2 and 5
              </p>
              <p className="text-xs text-slate-500 mt-1">
                Both conditions satisfied simultaneously
              </p>
            </div>
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
              <p className="font-bold text-amber-800 mb-1">OR (Union)</p>
              <p className="text-sm text-slate-700">
                x &lt; −3 OR x &gt; 4 means outside the interval
              </p>
              <p className="text-xs text-slate-500 mt-1">
                At least one condition satisfied
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: AND (Three-Part)" color="blue">
          <p>Solve: −2 &lt; 3x + 1 ≤ 10</p>
          <p className="text-slate-500">Subtract 1: −3 &lt; 3x ≤ 9</p>
          <p className="text-slate-500">
            Divide by 3:{" "}
            <strong className="text-blue-700">−1 &lt; x ≤ 3</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: OR" color="blue">
            <p>Solve: x + 1 &lt; −2 OR x + 1 &gt; 4</p>
            <p className="text-slate-500">x &lt; −3 OR x &gt; 3</p>
            <p className="text-slate-500">
              <strong className="text-blue-700">
                Solution: (−∞, −3) ∪ (3, ∞)
              </strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 3: Graphing on Number Lines */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Graphing on Number Lines
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            When graphing inequalities on a number line, the circle type and
            shading direction matter.
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-blue-100 text-blue-900">
                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
                    Symbol
                  </th>
                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
                    Circle
                  </th>
                  <th className="border border-blue-300 px-3 py-2 text-left font-bold">
                    Meaning
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    &lt; or &gt;
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Open ○
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Value NOT included
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    ≤ or ≥
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-semibold">
                    Closed ●
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Value IS included
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <TipCard type="tip">
          <p className="text-slate-700">
            The SAT frequently asks which number line graph matches a given
            inequality. Just check: open vs closed circle, and which direction
            the arrow points.
          </p>
        </TipCard>
      </div>

      {/* Section 4: Coordinate Plane */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Coordinate Plane Inequalities
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            When graphing a linear inequality in two variables:
          </p>
          <div className="space-y-2 mt-3 text-sm">
            <p>1. Graph the boundary line (y = mx + b)</p>
            <p>
              2. Use a <strong>dashed line</strong> for &lt; or &gt; (not
              included)
            </p>
            <p>
              3. Use a <strong>solid line</strong> for ≤ or ≥ (included)
            </p>
            <p>
              4. Shade <strong>above</strong> for y &gt; or y ≥ and{" "}
              <strong>below</strong> for y &lt; or y ≤
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Graph y ≥ 2x − 1" color="blue">
          <p>Boundary line: y = 2x − 1 (slope 2, y-intercept −1)</p>
          <p className="text-slate-500">Solid line (≥ means included)</p>
          <p className="text-slate-500">
            <strong className="text-blue-700">Shade above the line</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <InequalityRegionWidget />
        </div>
      </div>

      {/* Section 5: Systems of Inequalities */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Systems of Inequalities
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            The solution to a system of inequalities is the{" "}
            <strong>overlapping region</strong> where ALL inequalities are
            satisfied. Any point in this region satisfies every inequality in
            the system.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: System" color="blue">
          <p>y ≤ x + 3 AND y &gt; −x + 1</p>
          <p className="text-slate-500">
            Graph both: shade below y = x + 3 (solid), shade above y = −x + 1
            (dashed)
          </p>
          <p className="text-slate-500">
            <strong className="text-blue-700">
              Solution is the overlapping region
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              To check if a point is in the solution region, plug it into BOTH
              inequalities. It must satisfy all of them.
            </p>
          </TipCard>
        </div>
      </div>

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