import React from "react";
import {
  TrendingUp,
  Hash,
  ArrowRight,
  Lightbulb,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import LinearTransformationWidget from "../../../components/lessons/LinearTransformationWidget";
import {
  LINEAR_FUNC_EASY,
  LINEAR_FUNC_MEDIUM,
} from "../../../data/math/linear-functions";

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

const SECTIONS = [
  { title: "Function Notation", icon: Hash },
  { title: "Evaluating Functions", icon: ArrowRight },
  { title: "Interpreting Slope & Intercepts", icon: TrendingUp },
  { title: "Domain & Range", icon: Lightbulb },
  { title: "Function Transformations", icon: TrendingUp },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function LinearFunctionsLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Linear Functions"
      sections={SECTIONS}
      color="blue"
      onFinish={onFinish}
    >
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Function Notation
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            <strong>f(x)</strong> is read "f of x" — it names the output when
            the input is x. It does NOT mean f × x.
          </p>
          <FormulaBox>f(x) = mx + b</FormulaBox>
          <p className="text-slate-600 text-sm mt-2">
            f(x) is just another way of writing y. Any letter can name a
            function: g(x), h(t), etc.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Evaluate f(4)" color="blue">
          <p>f(x) = 2x + 3</p>
          <p className="text-slate-500">
            f(4) = 2(4) + 3 = 8 + 3 ={" "}
            <strong className="text-blue-700">11</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              f(a) = 0 means "find the x where the output is zero" — this is the
              x-intercept.
            </p>
          </TipCard>
        </div>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Evaluating Functions
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            To evaluate f(a), replace every x with a and simplify. You can also
            evaluate from graphs or tables.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Composition" color="blue">
          <p>f(x) = 2x + 1, g(x) = x². Find f(g(3)).</p>
          <p className="text-slate-500">
            g(3) = 9, then f(9) = 2(9) + 1 ={" "}
            <strong className="text-blue-700">19</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: From a Table" color="blue">
            <p>If f(2) = 7 and f(5) = 13, find the slope.</p>
            <p className="text-slate-500">
              m = (13 − 7) ÷ (5 − 2) = 6 ÷ 3 ={" "}
              <strong className="text-blue-700">2</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Interpreting Slope & Intercepts
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            In context, <strong>slope</strong> = rate of change per unit,{" "}
            <strong>y-intercept</strong> = starting/initial value.
          </p>
          <FormulaBox>
            slope = Δy ÷ Δx = change in output ÷ change in input
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Cost Function" color="blue">
          <p>C(m) = 30m + 50 models gym cost after m months.</p>
          <p className="text-slate-500">
            Slope 30 → cost increases <strong>$30/month</strong>
          </p>
          <p className="text-slate-500">
            Intercept 50 → <strong>$50 signup fee</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              SAT: "What does 30 represent?" = interpret slope. "What does 50
              represent?" = interpret y-intercept.
            </p>
          </TipCard>
        </div>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Domain & Range
        </h2>
        <ConceptCard color="blue">
          <p className="text-slate-700 leading-relaxed">
            <strong>Domain</strong> = all possible x values.{" "}
            <strong>Range</strong> = all possible y values.
          </p>
          <div className="grid grid-cols-2 gap-4 mt-3">
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800 text-sm">
                Linear Functions
              </p>
              <p className="text-xs text-slate-500">
                Domain & range: all real numbers.
              </p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-blue-100">
              <p className="font-bold text-blue-800 text-sm">In Context</p>
              <p className="text-xs text-slate-500">
                Domain may be restricted (e.g., m ≥ 0).
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Restricted Domain" color="blue">
          <p>T(d) = 80 − 3d, where 0 ≤ d ≤ 20.</p>
          <p className="text-slate-500">
            Range: T(20) = 20 to T(0) = 80, so{" "}
            <strong className="text-blue-700">20 ≤ T ≤ 80</strong>
          </p>
        </ExampleCard>
      </div>

      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Function Transformations
        </h2>
        <ConceptCard color="blue">
          <div className="space-y-2 text-sm">
            {[
              ["f(x) + k", "Up k"],
              ["f(x) − k", "Down k"],
              ["f(x − h)", "Right h"],
              ["f(x + h)", "Left h"],
              ["−f(x)", "Reflect x-axis"],
              ["af(x), |a|>1", "Stretch"],
              ["af(x), |a|<1", "Compress"],
            ].map(([c, d]) => (
              <div
                key={c}
                className="flex gap-3 items-center bg-white/60 rounded-lg p-3 border border-blue-100"
              >
                <code className="font-mono text-blue-700 font-bold min-w-[110px]">
                  {c}
                </code>
                <span className="text-slate-600">{d}</span>
              </div>
            ))}
          </div>
        </ConceptCard>
        <div className="mt-6">
          <LinearTransformationWidget />
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              Horizontal shifts are <strong>opposite</strong>: f(x − 3) shifts{" "}
              <strong>right</strong> 3, not left!
            </p>
          </TipCard>
        </div>
      </div>

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