import React from "react";
import {
  Grid,
  TrendingUp,
  Layers,
  ArrowRight,
  Hash,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import SlopeInterceptWidget from "../../../components/lessons/SlopeInterceptWidget";
import ParallelPerpendicularWidget from "../../../components/lessons/ParallelPerpendicularWidget";
import StandardFormWidget from "../../../components/lessons/StandardFormWidget";
import {
  LINEAR_EQ_TWO_VAR_EASY,
  LINEAR_EQ_TWO_VAR_MEDIUM,
} from "../../../data/math/linear-equations-two-var";

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

const SECTIONS = [
  { title: "Slope", icon: TrendingUp },
  { title: "Slope-Intercept Form", icon: Grid },
  { title: "Point-Slope & Standard Form", icon: Hash },
  { title: "Parallel & Perpendicular", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function LinearEq2VarLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Linear Equations in Two Variables"
      sections={SECTIONS}
      color="blue"
      onFinish={onFinish}
    >
      {/* ── Slope ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Understanding Slope
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            <strong>Slope</strong> measures steepness — the rate of change
            between two points. It tells you how much y changes for each unit
            increase in x.
          </p>
          <FormulaBox>m = (y₂ − y₁) ÷ (x₂ − x₁) = rise ÷ run</FormulaBox>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-4">
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-center">
              <p className="font-bold text-blue-700">Positive</p>
              <p className="text-xs text-slate-500">↗ rises left to right</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-center">
              <p className="font-bold text-rose-600">Negative</p>
              <p className="text-xs text-slate-500">↘ falls left to right</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-center">
              <p className="font-bold text-slate-600">Zero</p>
              <p className="text-xs text-slate-500">→ horizontal line</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100 text-center">
              <p className="font-bold text-slate-600">Undefined</p>
              <p className="text-xs text-slate-500">↑ vertical line</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Find the Slope" color="blue">
          <p>Points: (2, 3) and (5, 9)</p>
          <p className="text-slate-500">
            m = (9 − 3) ÷ (5 − 2) = 6 ÷ 3 ={" "}
            <strong className="text-blue-700">2</strong>
          </p>
        </ExampleCard>
      </div>

      {/* ── Slope-Intercept ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Slope-Intercept Form
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            The most common form for graphing and SAT questions:
          </p>
          <FormulaBox>y = mx + b</FormulaBox>
          <p className="text-slate-600 text-sm mt-2">
            <strong>m</strong> = slope (rate of change) &nbsp;|&nbsp;{" "}
            <strong>b</strong> = y-intercept (where line crosses y-axis)
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Write the Equation" color="blue">
          <p>A line has slope 3 and passes through (0, −2).</p>
          <p className="text-slate-500">
            Since it passes through (0, −2), the y-intercept b = −2.
          </p>
          <p className="text-slate-500">
            <strong className="text-blue-700">y = 3x − 2</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <SlopeInterceptWidget />
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              On the SAT, "rate" or "per" usually indicates the slope. A "flat
              fee" or "starting value" is the y-intercept.
            </p>
          </TipCard>
        </div>
      </div>

      {/* ── Point-Slope & Standard Form ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Point-Slope & Standard Form
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            <strong>Point-slope form</strong> — useful when you know a point and
            the slope:
          </p>
          <FormulaBox>y − y₁ = m(x − x₁)</FormulaBox>
          <p className="text-slate-700 leading-relaxed mt-4">
            <strong>Standard form</strong> — Ax + By = C where A, B, C are
            integers:
          </p>
          <FormulaBox>Ax + By = C</FormulaBox>
          <p className="text-slate-600 text-sm mt-2">
            x-intercept: set y = 0 → x = C ÷ A &nbsp;|&nbsp; y-intercept: set x
            = 0 → y = C ÷ B
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Point-Slope" color="blue">
          <p>Slope = −2, passes through (4, 1).</p>
          <p className="text-slate-500">y − 1 = −2(x − 4)</p>
          <p className="text-slate-500">y − 1 = −2x + 8</p>
          <p className="text-slate-500">
            <strong className="text-blue-700">y = −2x + 9</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard
            title="Example: Standard to Slope-Intercept"
            color="blue"
          >
            <p>Convert 3x + 4y = 12 to slope-intercept form.</p>
            <p className="text-slate-500">4y = −3x + 12</p>
            <p className="text-slate-500">
              <strong className="text-blue-700">
                y = −<Frac n="3" d="4" />x + 3
              </strong>
            </p>
          </ExampleCard>
        </div>
        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Explore Standard Form
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Adjust A, B, and C to see how the line and intercepts change in real
          time.
        </p>
        <StandardFormWidget />
      </div>

      {/* ── Parallel & Perpendicular ── */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Parallel & Perpendicular Lines
        </h2>
        <ConceptCard color="blue">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-blue-50/80 border border-blue-200 rounded-xl p-4">
              <p className="font-extrabold text-blue-800 mb-2">
                Parallel Lines
              </p>
              <FormulaBox>m₁ = m₂</FormulaBox>
              <p className="text-slate-600 text-sm mt-2">
                Same slope, different y-intercepts. They never intersect.
              </p>
            </div>
            <div className="bg-violet-50/80 border border-violet-200 rounded-xl p-4">
              <p className="font-extrabold text-violet-800 mb-2">
                Perpendicular Lines
              </p>
              <FormulaBox>m₁ × m₂ = −1</FormulaBox>
              <p className="text-slate-600 text-sm mt-2">
                Slopes are <strong>negative reciprocals</strong>. They form 90°
                angles.
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Finding Perpendicular Slope" color="blue">
          <p>
            Line L: y = <Frac n="2" d="5" />x − 3. Find the slope of a
            perpendicular line.
          </p>
          <p className="text-slate-500">
            Slope of L: m = <Frac n="2" d="5" />
          </p>
          <p className="text-slate-500">
            Perpendicular slope = −<Frac n="5" d="2" /> (flip and negate)
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ParallelPerpendicularWidget />
        </div>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              Parallel = <strong>same slope</strong>. Perpendicular ={" "}
              <strong>negative reciprocal</strong> (flip the fraction and change
              the sign).
            </p>
          </TipCard>
        </div>
      </div>

      {/* ── 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_TWO_VAR_EASY.slice(0, 2).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="blue" />
        ))}
        {LINEAR_EQ_TWO_VAR_MEDIUM.slice(0, 1).map((q) => (
          <PracticeFromDataset key={q.id} question={q} color="blue" />
        ))}
      </div>
    </LessonShell>
  );
}
