import React from "react";
import { Layers, ArrowRight, Hash, Lightbulb, BookOpen } from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import SystemVisualizerWidget from "../../../components/lessons/SystemVisualizerWidget";
import {
  SYSTEMS_EASY,
  SYSTEMS_MEDIUM,
} from "../../../data/math/systems-linear-equations";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Graphical Solutions", icon: Layers },
  { title: "Substitution Method", icon: ArrowRight },
  { title: "Elimination Method", icon: Hash },
  { title: "Number of Solutions", icon: Lightbulb },
  { title: "Word Problems", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function SystemsLinearEqLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Systems of Linear Equations"
      sections={SECTIONS}
      color="blue"
      onFinish={onFinish}
    >
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Graphical Solutions
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            A <strong>system of equations</strong> is two or more equations with
            the same variables. The <strong>solution</strong> is the point (x,
            y) where the lines intersect.
          </p>
          <div className="grid grid-cols-3 gap-3 mt-4">
            <div className="bg-emerald-50/80 border border-emerald-200 rounded-xl p-3 text-center">
              <p className="font-bold text-emerald-700">One Solution</p>
              <p className="text-xs text-slate-500">
                Lines intersect at one point
              </p>
            </div>
            <div className="bg-amber-50/80 border border-amber-200 rounded-xl p-3 text-center">
              <p className="font-bold text-amber-700">No Solution</p>
              <p className="text-xs text-slate-500">Lines are parallel</p>
            </div>
            <div className="bg-blue-50/80 border border-blue-200 rounded-xl p-3 text-center">
              <p className="font-bold text-blue-700">Infinite</p>
              <p className="text-xs text-slate-500">Same line</p>
            </div>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <SystemVisualizerWidget />
        </div>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Substitution Method
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Best when one variable is already isolated or easy to isolate:
          </p>
          <div className="space-y-2 mt-3 text-sm">
            <p>1. Solve one equation for one variable</p>
            <p>2. Substitute into the other equation</p>
            <p>3. Solve for the remaining variable</p>
            <p>4. Back-substitute to find the other</p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Substitution" color="blue">
          <p>y = 2x + 1 and 3x + y = 11</p>
          <p className="text-slate-500">Substitute: 3x + (2x + 1) = 11</p>
          <p className="text-slate-500">5x + 1 = 11 → 5x = 10 → x = 2</p>
          <p className="text-slate-500">
            y = 2(2) + 1 ={" "}
            <strong className="text-blue-700">5. Solution: (2, 5)</strong>
          </p>
        </ExampleCard>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Elimination Method
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Best when coefficients can be easily matched. Add or subtract
            equations to eliminate one variable.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Elimination" color="blue">
          <p>2x + 3y = 12 and 4x − 3y = 6</p>
          <p className="text-slate-500">Add equations: 6x = 18 → x = 3</p>
          <p className="text-slate-500">2(3) + 3y = 12 → 3y = 6 → y = 2</p>
          <p className="text-slate-500">
            <strong className="text-blue-700">Solution: (3, 2)</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Multiply First" color="blue">
            <p>3x + 2y = 7 and 5x + 3y = 12</p>
            <p className="text-slate-500">Multiply eq1 by 3: 9x + 6y = 21</p>
            <p className="text-slate-500">
              Multiply eq2 by −2: −10x − 6y = −24
            </p>
            <p className="text-slate-500">
              Add: −x = −3 → <strong className="text-blue-700">x = 3</strong>,
              then y = −1
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              SAT shortcut: Sometimes you can add/subtract equations directly to
              get the expression they ask for (like "3x − y") without solving
              for x and y individually.
            </p>
          </TipCard>
        </div>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Number of Solutions
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Compare the ratios of coefficients:
          </p>
          <div className="space-y-2 mt-3">
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-sm">
              <p>
                <strong>One solution:</strong> <Frac n="a₁" d="a₂" /> ≠{" "}
                <Frac n="b₁" d="b₂" /> (different slopes)
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-sm">
              <p>
                <strong>No solution:</strong> <Frac n="a₁" d="a₂" /> ={" "}
                <Frac n="b₁" d="b₂" /> ≠ <Frac n="c₁" d="c₂" /> (parallel lines)
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-sm">
              <p>
                <strong>Infinite:</strong> <Frac n="a₁" d="a₂" /> ={" "}
                <Frac n="b₁" d="b₂" /> = <Frac n="c₁" d="c₂" /> (same line)
              </p>
            </div>
          </div>
        </ConceptCard>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Word Problems
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Define variables, write two equations from the given info, then
            solve.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Ticket Problem" color="blue">
          <p>
            Adult tickets cost $8, child tickets $5. Total: 200 tickets, $1,340
            revenue.
          </p>
          <p className="text-slate-500">a + c = 200 and 8a + 5c = 1340</p>
          <p className="text-slate-500">
            From eq1: a = 200 − c. Substitute: 8(200 − c) + 5c = 1340
          </p>
          <p className="text-slate-500">
            1600 − 8c + 5c = 1340 → −3c = −260 → c = 86.67... (round in context)
          </p>
        </ExampleCard>
      </div>

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