import {
  BarChart,
  TrendingUp,
  Target,
  Layers,
  Hash,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import ScatterplotInteractiveWidget from "../../../components/lessons/ScatterplotInteractiveWidget";
import {
  TWO_VAR_DATA_EASY,
  TWO_VAR_DATA_MEDIUM,
} from "../../../data/math/two-variable-data";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Reading Scatterplots", icon: BarChart },
  { title: "Line of Best Fit", icon: TrendingUp },
  { title: "Correlation Coefficient", icon: Target },
  { title: "Linear & Exponential Models", icon: Layers },
  { title: "Residuals", icon: Hash },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function TwoVariableDataLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Two-Variable Data: Models & Scatterplots"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Reading Scatterplots
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A scatterplot displays two quantitative variables as points (x, y).
            Describe the relationship by its <strong>direction</strong>,{" "}
            <strong>form</strong>, and <strong>strength</strong>.
          </p>
          <div className="grid grid-cols-3 gap-3 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3 text-center">
              <p className="font-bold text-emerald-700 text-sm">Positive</p>
              <p className="text-xs text-slate-500">As x ↑, y ↑</p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3 text-center">
              <p className="font-bold text-rose-700 text-sm">Negative</p>
              <p className="text-xs text-slate-500">As x ↑, y ↓</p>
            </div>
            <div className="bg-slate-100 border border-slate-200 rounded-xl p-3 text-center">
              <p className="font-bold text-slate-700 text-sm">None</p>
              <p className="text-xs text-slate-500">No clear pattern</p>
            </div>
          </div>
        </ConceptCard>
        <TipCard type="tip">
          <p className="text-slate-700">
            On the SAT, you'll read values from scatterplots, identify trends,
            estimate data points, and interpret results in context.
          </p>
        </TipCard>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Line of Best Fit
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            The <strong>line of best fit</strong> (regression line) best
            represents the trend. Use it to make predictions:{" "}
            <strong>interpolation</strong> (within data range) is reliable,{" "}
            <strong>extrapolation</strong> (beyond data range) is risky.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Prediction" color="amber">
          <p>Line of best fit: y = 2.5x + 10</p>
          <p className="text-slate-500">Predict y when x = 8:</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">y = 2.5(8) + 10 = 30</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <ScatterplotInteractiveWidget />
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              The y-intercept of the best fit line represents the predicted
              y-value when x = 0. The slope represents the predicted change in y
              for each 1-unit increase in x.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Correlation Coefficient (r)
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            The correlation coefficient <strong>r</strong> measures the strength
            and direction of a <strong>linear</strong> relationship. It ranges
            from −1 to 1.
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-amber-100 text-amber-900">
                  <th className="border border-amber-300 px-3 py-2 font-bold">
                    |r| Value
                  </th>
                  <th className="border border-amber-300 px-3 py-2 font-bold">
                    Strength
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">
                    0.8 – 1.0
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-semibold text-emerald-700">
                    Strong
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2">
                    0.5 – 0.8
                  </td>
                  <td className="border border-slate-200 px-3 py-2 font-semibold text-amber-700">
                    Moderate
                  </td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2">0 – 0.5</td>
                  <td className="border border-slate-200 px-3 py-2 font-semibold text-rose-700">
                    Weak
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <TipCard type="warning">
          <p className="text-slate-700">
            Correlation does NOT imply causation! A strong r only means a linear
            relationship exists — it doesn't tell you WHY.
          </p>
        </TipCard>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Linear vs Exponential Models
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Choose the model based on how the data changes:
          </p>
          <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
              <p className="font-bold text-blue-800 mb-1">
                Linear (y = mx + b)
              </p>
              <p className="text-sm text-slate-700">
                Constant <strong>differences</strong> between consecutive
                y-values
              </p>
            </div>
            <div className="bg-violet-50 border border-violet-200 rounded-xl p-4">
              <p className="font-bold text-violet-800 mb-1">
                Exponential (y = a × b<sup>x</sup>)
              </p>
              <p className="text-sm text-slate-700">
                Constant <strong>ratios</strong> between consecutive y-values
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Identify Model" color="amber">
          <p>x: 0, 1, 2, 3 → y: 100, 150, 225, 337.5</p>
          <p className="text-slate-500">
            Ratios: 150÷100 = 1.5, 225÷150 = 1.5, 337.5÷225 = 1.5
          </p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              Constant ratio → Exponential model: y = 100(1.5)<sup>x</sup>
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Residuals
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A <strong>residual</strong> measures how far a data point is from
            the predicted value. A good model has residuals that are randomly
            scattered around zero.
          </p>
          <FormulaBox>Residual = Actual y − Predicted y</FormulaBox>
          <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">
                Positive Residual
              </p>
              <p className="text-xs text-slate-600">
                Actual &gt; Predicted (point above line)
              </p>
            </div>
            <div className="bg-rose-50 border border-rose-200 rounded-xl p-3">
              <p className="font-bold text-rose-800 text-sm">
                Negative Residual
              </p>
              <p className="text-xs text-slate-600">
                Actual &lt; Predicted (point below line)
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="amber">
          <p>Best fit predicts y = 45 when x = 10, but actual y = 48</p>
          <p className="text-slate-500">
            Residual = 48 − 45 ={" "}
            <strong className="text-amber-700">+3 (above the line)</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              If a residual plot shows a curved pattern, the linear model is NOT
              appropriate. Random scatter = good fit.
            </p>
          </TipCard>
        </div>
      </div>

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