import {
  TrendingUp,
  BarChart,
  Zap,
  RotateCcw,
  Layers,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import ParabolaWidget from "../../../components/lessons/ParabolaWidget";
import PolynomialBehaviorWidget from "../../../components/lessons/PolynomialBehaviorWidget";
import ExponentialExplorer from "../../../components/lessons/ExponentialExplorer";
import RemainderTheoremWidget from "../../../components/lessons/RemainderTheoremWidget";
import GrowthComparisonWidget from "../../../components/lessons/GrowthComparisonWidget";
import {
  NONLINEAR_FUNC_EASY,
  NONLINEAR_FUNC_MEDIUM,
} from "../../../data/math/nonlinear-functions";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Quadratic Functions", icon: TrendingUp },
  { title: "Polynomial Behavior", icon: BarChart },
  { title: "Exponential Growth & Decay", icon: Zap },
  { title: "Radical & Rational Functions", icon: RotateCcw },
  { title: "Transformations", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function NonlinearFunctionsLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Nonlinear Functions"
      sections={SECTIONS}
      color="violet"
      onFinish={onFinish}
    >
      {/* Section 1: Quadratic Functions */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Quadratic Functions
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            A quadratic function can be written in three forms, each revealing
            different information:
          </p>
          <div className="grid md:grid-cols-3 gap-3 mt-4">
            <div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
              <p className="font-bold text-violet-800 text-sm">Standard Form</p>
              <p className="font-mono text-sm text-slate-700">
                f(x) = ax² + bx + c
              </p>
              <p className="text-xs text-slate-500 mt-1">
                Shows y-intercept (c)
              </p>
            </div>
            <div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
              <p className="font-bold text-violet-800 text-sm">Vertex Form</p>
              <p className="font-mono text-sm text-slate-700">
                f(x) = a(x − h)² + k
              </p>
              <p className="text-xs text-slate-500 mt-1">Shows vertex (h, k)</p>
            </div>
            <div className="bg-violet-50 border border-violet-200 rounded-xl p-3">
              <p className="font-bold text-violet-800 text-sm">Factored Form</p>
              <p className="font-mono text-sm text-slate-700">
                f(x) = a(x − r₁)(x − r₂)
              </p>
              <p className="text-xs text-slate-500 mt-1">
                Shows x-intercepts (r₁, r₂)
              </p>
            </div>
          </div>
          <FormulaBox>Vertex x-coordinate: x = −b ÷ 2a</FormulaBox>
          <p className="text-slate-700 text-sm mt-2">
            If a &gt; 0 → opens up (minimum). If a &lt; 0 → opens down
            (maximum).
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Find the Vertex" color="violet">
          <p>f(x) = 2x² − 8x + 3</p>
          <p className="text-slate-500">x = −(−8) ÷ (2 × 2) = 8 ÷ 4 = 2</p>
          <p className="text-slate-500">f(2) = 2(4) − 16 + 3 = −5</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">
              Vertex: (2, −5), minimum value = −5
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ParabolaWidget />
        </div>
      </div>

      {/* Section 2: Polynomial Behavior */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Polynomial Behavior
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            The <strong>degree</strong> determines the maximum number of turning
            points (degree − 1). The <strong>leading coefficient</strong> and
            degree determine end behavior.
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-violet-100 text-violet-900">
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Degree
                  </th>
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Leading Coeff
                  </th>
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Left End
                  </th>
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Right End
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">Even</td>
                  <td className="border border-slate-200 px-3 py-2">
                    Positive
                  </td>
                  <td className="border border-slate-200 px-3 py-2">↑ Up</td>
                  <td className="border border-slate-200 px-3 py-2">↑ Up</td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2">Even</td>
                  <td className="border border-slate-200 px-3 py-2">
                    Negative
                  </td>
                  <td className="border border-slate-200 px-3 py-2">↓ Down</td>
                  <td className="border border-slate-200 px-3 py-2">↓ Down</td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">Odd</td>
                  <td className="border border-slate-200 px-3 py-2">
                    Positive
                  </td>
                  <td className="border border-slate-200 px-3 py-2">↓ Down</td>
                  <td className="border border-slate-200 px-3 py-2">↑ Up</td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2">Odd</td>
                  <td className="border border-slate-200 px-3 py-2">
                    Negative
                  </td>
                  <td className="border border-slate-200 px-3 py-2">↑ Up</td>
                  <td className="border border-slate-200 px-3 py-2">↓ Down</td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="violet">
          <p>f(x) = −2x³ + 5x</p>
          <p className="text-slate-500">
            Degree 3 (odd), negative leading coefficient
          </p>
          <p className="text-slate-500">
            <strong className="text-violet-700">Rises left, falls right</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <PolynomialBehaviorWidget />
        </div>
        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Remainder Theorem Explorer
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Slide the divisor value to see how the remainder changes — when it
          hits zero, you've found a root!
        </p>
        <RemainderTheoremWidget />
      </div>

      {/* Section 3: Exponential Growth & Decay */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Exponential Growth & Decay
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            Exponential functions change by a constant <strong>factor</strong>{" "}
            (not a constant amount like linear functions).
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>
              Growth: f(x) = a(1 + r)<sup>x</sup> &nbsp; where b = 1 + r &gt; 1
            </FormulaBox>
            <FormulaBox>
              Decay: f(x) = a(1 − r)<sup>x</sup> &nbsp; where b = 1 − r &lt; 1
            </FormulaBox>
          </div>
          <div className="grid md:grid-cols-2 gap-3 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">
                Growth (b &gt; 1)
              </p>
              <p className="text-xs text-slate-600">
                Population, compound interest, bacteria
              </p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
              <p className="font-bold text-rose-800 text-sm">
                Decay (0 &lt; b &lt; 1)
              </p>
              <p className="text-xs text-slate-600">
                Depreciation, radioactive decay, cooling
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Growth" color="violet">
          <p>Population starts at 500, grows 8% per year</p>
          <p className="text-slate-500">
            <strong className="text-violet-700">
              P(t) = 500(1.08)<sup>t</sup>
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Decay" color="violet">
            <p>Car worth $25,000 depreciates 15% per year</p>
            <p className="text-slate-500">
              <strong className="text-violet-700">
                V(t) = 25000(0.85)<sup>t</sup>
              </strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <ExponentialExplorer />
        </div>
        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Linear vs Exponential Growth
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Compare how linear and exponential growth diverge over time.
        </p>
        <GrowthComparisonWidget />
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              "Doubles every 3 years" means f(t) = a × 2<sup>t÷3</sup>. "Halves
              every 5 hours" means f(t) = a × (0.5)<sup>t÷5</sup>.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4: Radical & Rational Functions */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Radical & Rational Functions
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            <strong>Radical functions:</strong> f(x) = √(expression). Domain
            requires expression ≥ 0.
            <br />
            <strong>Rational functions:</strong> f(x) = p(x) ÷ q(x). Domain
            excludes where q(x) = 0.
          </p>
          <div className="grid md:grid-cols-2 gap-3 mt-4">
            <div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-sm">
              <p className="font-bold text-violet-800 mb-1">
                Vertical Asymptotes
              </p>
              <p className="text-slate-600">
                Where denominator = 0 (and numerator ≠ 0)
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-violet-100 text-sm">
              <p className="font-bold text-violet-800 mb-1">
                Horizontal Asymptotes
              </p>
              <p className="text-slate-600">
                Compare degrees of numerator and denominator
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Rational Function" color="violet">
          <p>f(x) = (x + 2) ÷ (x − 3)</p>
          <p className="text-slate-500">Vertical asymptote: x = 3</p>
          <p className="text-slate-500">
            Horizontal asymptote: y = 1 (same degree → ratio of leading
            coefficients)
          </p>
        </ExampleCard>
      </div>

      {/* Section 5: Transformations */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Function Transformations
        </h2>
        <ConceptCard color="violet">
          <p className="text-slate-700 leading-relaxed">
            Transformations modify the graph of a parent function.
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-violet-100 text-violet-900">
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Notation
                  </th>
                  <th className="border border-violet-300 px-3 py-2 font-bold">
                    Transformation
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    f(x) + k
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Shift up k units
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    f(x) − k
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Shift down k units
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    f(x − h)
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Shift right h units
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    f(x + h)
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Shift left h units
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    −f(x)
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Reflect over x-axis
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    f(−x)
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Reflect over y-axis
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-mono">
                    af(x)
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    Vertical stretch (a &gt; 1) or compress (0 &lt; a &lt; 1)
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <TipCard type="remember">
          <p className="text-slate-700">
            "Inside" changes (affecting x) go the <strong>opposite</strong>{" "}
            direction. "Outside" changes (affecting y) go the{" "}
            <strong>same</strong> direction.
          </p>
        </TipCard>
      </div>

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