import React, { useState } from "react";
import {
  Scale,
  ArrowRight,
  Hash,
  Lightbulb,
  BookOpen,
  RotateCcw,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import LinearSolutionsWidget from "../../../components/lessons/LinearSolutionsWidget";
import LiteralEquationWidget from "../../../components/lessons/LiteralEquationWidget";
import {
  LINEAR_EQ_ONE_VAR_EASY,
  LINEAR_EQ_ONE_VAR_MEDIUM,
} from "../../../data/math/linear-equations-one-var";

interface LessonProps {
  onFinish?: () => void;
}

const SECTIONS = [
  { title: "The Balance Principle", icon: Scale },
  { title: "Multi-Step Equations", icon: ArrowRight },
  { title: "Variables on Both Sides", icon: Hash },
  { title: "Number of Solutions", icon: Lightbulb },
  { title: "Word Problems", icon: Scale },
  { title: "Practice & Quiz", icon: BookOpen },
];

/* ── tiny inline balance widget ── */
const BalanceWidget = () => {
  const [left, setLeft] = useState(15);
  const [right, setRight] = useState(15);
  const [tilt, setTilt] = useState(0);
  const [msg, setMsg] = useState("Balanced");
  const apply = (v: number, side: "both" | "left") => {
    const nL = side === "both" || side === "left" ? left + v : left;
    const nR = side === "both" ? right + v : right;
    setLeft(nL);
    setRight(nR);
    setTilt(nL === nR ? 0 : nL > nR ? -12 : 12);
    setMsg(nL === nR ? "Balanced!" : "Unbalanced!");
  };
  const reset = () => {
    setLeft(15);
    setRight(15);
    setTilt(0);
    setMsg("Balanced");
  };
  return (
    <div className="glass-card rounded-2xl p-6">
      <div className="flex justify-between items-center mb-4">
        <h3 className="font-bold text-slate-700">Algebra Balance Scale</h3>
        <button onClick={reset} className="text-slate-400 hover:text-slate-600">
          <RotateCcw className="w-4 h-4" />
        </button>
      </div>
      <div className="relative h-32 flex justify-center items-end mb-4">
        <div className="absolute bottom-0 w-0 h-0 border-l-[16px] border-l-transparent border-r-[16px] border-r-transparent border-b-[32px] border-b-slate-800" />
        <div
          className="w-52 h-1.5 bg-slate-600 absolute bottom-[32px] transition-transform duration-500"
          style={{ transform: `rotate(${tilt}deg)` }}
        >
          <div className="absolute left-0 -top-12 w-16 h-12 border-b-2 border-l border-r border-slate-300 rounded-b-lg bg-white/80 flex items-center justify-center">
            <span className="font-bold text-blue-600 text-sm">{left}</span>
          </div>
          <div className="absolute right-0 -top-12 w-16 h-12 border-b-2 border-l border-r border-slate-300 rounded-b-lg bg-white/80 flex items-center justify-center">
            <span className="font-bold text-emerald-600 text-sm">{right}</span>
          </div>
        </div>
      </div>
      <p
        className={`text-center font-bold text-sm mb-4 ${tilt === 0 ? "text-emerald-600" : "text-rose-600"}`}
      >
        {msg}
      </p>
      <div className="grid grid-cols-2 gap-3">
        <button
          onClick={() => apply(-5, "left")}
          className="p-2.5 rounded-lg border border-slate-200 hover:border-rose-300 hover:bg-rose-50 text-xs font-bold text-slate-600 transition-all"
        >
          −5 Left ONLY
        </button>
        <button
          onClick={() => apply(-5, "both")}
          className="p-2.5 rounded-lg border-2 border-blue-400 bg-blue-50 hover:bg-blue-100 text-xs font-bold text-blue-700 transition-all"
        >
          −5 BOTH Sides
        </button>
      </div>
    </div>
  );
};

export default function LinearEq1VarLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Linear Equations in One Variable"
      sections={SECTIONS}
      color="blue"
      onFinish={onFinish}
    >
      {/* ── Section 1: Balance Principle ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          The Balance Principle
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            A linear equation is like a balance scale — whatever you do to one
            side, you <strong>must</strong> do to the other. The goal is always
            to <strong>isolate the variable</strong> on one side.
          </p>
          <FormulaBox>
            If A = B, then A + c = B + c and A × c = B × c
          </FormulaBox>
          <p className="text-slate-600 text-sm">
            This is the <strong>Addition Property</strong> and{" "}
            <strong>Multiplication Property</strong> of equality.
          </p>
        </ConceptCard>
        <BalanceWidget />
        <div className="mt-6">
          <ExampleCard title="Example: Simple Equation" color="blue">
            <p>Solve: 3x + 7 = 22</p>
            <p className="text-slate-500">Subtract 7: 3x = 15</p>
            <p className="text-slate-500">
              Divide by 3: <strong className="text-blue-700">x = 5</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* ── Section 2: Multi-Step ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Multi-Step Equations
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            Follow the <strong>4-step process</strong> for any linear equation:
          </p>
          <div className="space-y-3 mt-3">
            {[
              {
                n: "1",
                t: "Distribute",
                d: "Expand parentheses and clear fractions by multiplying by the LCD.",
              },
              {
                n: "2",
                t: "Combine Like Terms",
                d: "Simplify each side separately.",
              },
              {
                n: "3",
                t: "Move",
                d: "Get variable terms on one side, constants on the other.",
              },
              {
                n: "4",
                t: "Divide",
                d: "Divide both sides by the coefficient of the variable.",
              },
            ].map((s) => (
              <div
                key={s.n}
                className="flex gap-3 bg-white/60 rounded-xl p-3 border border-blue-100"
              >
                <div className="w-7 h-7 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm shrink-0">
                  {s.n}
                </div>
                <div>
                  <p className="font-bold text-slate-800 text-sm">{s.t}</p>
                  <p className="text-slate-600 text-xs">{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </ConceptCard>
        <ExampleCard title="Example: With Fractions" color="blue">
          <p>
            Solve: <Frac n="x" d="3" /> + 2 = <Frac n="x" d="2" /> − 1
          </p>
          <p className="text-slate-500">
            Multiply every term by 6 (LCD of 3 and 2):
          </p>
          <p className="text-slate-500">2x + 12 = 3x − 6</p>
          <p className="text-slate-500">
            12 + 6 = 3x − 2x → <strong className="text-blue-700">x = 18</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Literal Equation" color="blue">
            <p>Solve for r: A = P(1 + rt)</p>
            <p className="text-slate-500">
              Divide by P: <Frac n="A" d="P" /> = 1 + rt
            </p>
            <p className="text-slate-500">
              Subtract 1: <Frac n="A" d="P" /> − 1 = rt
            </p>
            <p className="text-slate-500">
              Divide by t:{" "}
              <strong className="text-blue-700">
                r = (<Frac n="A" d="P" /> − 1) ÷ t
              </strong>
            </p>
          </ExampleCard>
        </div>
        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Practice: Rearranging Formulas
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Choose the correct operation at each step to isolate the target
          variable.
        </p>
        <LiteralEquationWidget />
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              When distributing a negative: −3(x − 4) = −3x{" "}
              <strong>+ 12</strong>, NOT −3x − 12.
            </p>
          </TipCard>
        </div>
      </div>

      {/* ── Section 3: Variables on Both Sides ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Variables on Both Sides
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            When the variable appears on <strong>both sides</strong>, collect
            all variable terms on one side and all constants on the other. Then
            solve normally.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Variables Both Sides" color="blue">
          <p>Solve: 5x − 3 = 2x + 12</p>
          <p className="text-slate-500">Subtract 2x: 3x − 3 = 12</p>
          <p className="text-slate-500">Add 3: 3x = 15</p>
          <p className="text-slate-500">
            Divide by 3: <strong className="text-blue-700">x = 5</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: With Distribution" color="blue">
            <p>Solve: 3(2x − 4) = 2(x + 6)</p>
            <p className="text-slate-500">Distribute: 6x − 12 = 2x + 12</p>
            <p className="text-slate-500">Subtract 2x: 4x − 12 = 12</p>
            <p className="text-slate-500">
              Add 12: 4x = 24 → <strong className="text-blue-700">x = 6</strong>
            </p>
          </ExampleCard>
        </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="blue">
          <p className="text-slate-700 leading-relaxed">
            After simplifying, three things can happen:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div className="bg-emerald-50/80 border border-emerald-200 rounded-xl p-4 text-center">
              <p className="font-extrabold text-emerald-700 text-lg">
                One Solution
              </p>
              <p className="text-slate-600 text-sm mt-1">x = number</p>
              <p className="text-xs text-slate-500 mt-1">
                e.g., 2x = 10 → x = 5
              </p>
            </div>
            <div className="bg-amber-50/80 border border-amber-200 rounded-xl p-4 text-center">
              <p className="font-extrabold text-amber-700 text-lg">
                No Solution
              </p>
              <p className="text-slate-600 text-sm mt-1">false statement</p>
              <p className="text-xs text-slate-500 mt-1">
                e.g., 0 = 5 (contradiction)
              </p>
            </div>
            <div className="bg-blue-50/80 border border-blue-200 rounded-xl p-4 text-center">
              <p className="font-extrabold text-blue-700 text-lg">
                Infinite Solutions
              </p>
              <p className="text-slate-600 text-sm mt-1">true identity</p>
              <p className="text-xs text-slate-500 mt-1">
                e.g., 0 = 0 (always true)
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: No Solution" color="blue">
          <p>Solve: 2(x + 3) = 2x + 10</p>
          <p className="text-slate-500">Distribute: 2x + 6 = 2x + 10</p>
          <p className="text-slate-500">
            Subtract 2x: 6 = 10 ←{" "}
            <strong className="text-rose-600">FALSE → No solution</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Infinite Solutions" color="blue">
            <p>Solve: 3(x + 2) = 3x + 6</p>
            <p className="text-slate-500">Distribute: 3x + 6 = 3x + 6</p>
            <p className="text-slate-500">
              Subtract 3x: 6 = 6 ←{" "}
              <strong className="text-blue-700">
                TRUE → Infinitely many solutions
              </strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <LinearSolutionsWidget />
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              <strong>SAT Shortcut:</strong> For "what value of k gives
              infinitely many solutions?", make coefficients and constants match
              on both sides. For "no solution", make coefficients match but
              constants differ.
            </p>
          </TipCard>
        </div>
      </div>

      {/* ── Section 5: Word Problems ── */}
      <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">
            The SAT tests your ability to{" "}
            <strong>translate words into equations</strong>. Look for key
            phrases:
          </p>
          <div className="grid grid-cols-2 gap-3 mt-3 text-sm">
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800">"is" / "equals"</p>
              <p className="text-slate-500">→ =</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800">
                "more than" / "increased by"
              </p>
              <p className="text-slate-500">→ +</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800">
                "less than" / "decreased by"
              </p>
              <p className="text-slate-500">→ −</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800">"of" / "times"</p>
              <p className="text-slate-500">→ ×</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Gym Membership" color="blue">
          <p>
            A gym charges $36 enrollment + $19/month. After how many months is
            the total $188?
          </p>
          <p className="text-slate-500">Equation: 36 + 19m = 188</p>
          <p className="text-slate-500">19m = 152</p>
          <p className="text-slate-500">
            <strong className="text-blue-700">m = 8 months</strong>
          </p>
        </ExampleCard>
      </div>

      {/* ── Section 6: Practice & Quiz ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Practice & Quiz
        </h2>
        <h3 className="text-xl font-bold text-slate-800 mb-4">
          Try These SAT Problems
        </h3>
        {LINEAR_EQ_ONE_VAR_EASY.slice(0, 2).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="blue" />
        ))}
        {LINEAR_EQ_ONE_VAR_MEDIUM.slice(0, 1).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="blue" />
        ))}
      </div>
    </LessonShell>
  );
}
