import React from "react";
import {
  Scale,
  ArrowRight,
  Hash,
  Repeat,
  Layers,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import RatioVisualizerWidget from "../../../components/lessons/RatioVisualizerWidget";
import UnitConversionWidget from "../../../components/lessons/UnitConversionWidget";
import {
  RATIOS_EASY,
  RATIOS_MEDIUM,
} from "../../../data/math/ratios-rates-proportions";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Ratios & Proportions", icon: Scale },
  { title: "Unit Rates", icon: ArrowRight },
  { title: "Setting Up Proportions", icon: Hash },
  { title: "Unit Conversions", icon: Repeat },
  { title: "Direct & Inverse Variation", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function RatiosRatesLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Ratios, Rates & Proportional Relationships"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Ratios & Proportions
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A <strong>ratio</strong> compares two quantities. A{" "}
            <strong>proportion</strong> states that two ratios are equal.
            Cross-multiplication is the key solving technique.
          </p>
          <FormulaBox>
            <Frac n="a" d="b" /> = <Frac n="c" d="d" /> &nbsp;means&nbsp; a × d
            = b × c
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Part-to-Whole Ratio" color="amber">
          <p>Boys to girls ratio is 3 : 5. Total students: 40.</p>
          <p className="text-slate-500">
            Boys = <Frac n="3" d="8" /> × 40 = 15
          </p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              Girls = <Frac n="5" d="8" /> × 40 = 25
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <RatioVisualizerWidget />
        </div>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Unit Rates
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            A <strong>unit rate</strong> has a denominator of 1 — cost per item,
            miles per hour, etc. Divide to find the unit rate.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Speed" color="amber">
          <p>360 miles in 6 hours</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">
              360 ÷ 6 = 60 miles per hour
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Unit Price" color="amber">
            <p>$45 for 12 items</p>
            <p className="text-slate-500">
              <strong className="text-amber-700">
                $45 ÷ 12 = $3.75 per item
              </strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              On a graph, the unit rate equals the slope. In y = mx, the slope m
              is the unit rate (y per x).
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Setting Up Proportions
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            The key is matching units: ensure numerators represent the same
            quantity and denominators represent the same quantity.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Recipe Scaling" color="amber">
          <p>3 cups flour for 24 cookies. How much for 60 cookies?</p>
          <p className="text-slate-500">
            <Frac n="3" d="24" /> = <Frac n="x" d="60" />
          </p>
          <p className="text-slate-500">
            24x = 180 → <strong className="text-amber-700">x = 7.5 cups</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              Proportion problems on the SAT often involve scale factors, maps,
              or similar figures. Always label your units to avoid mix-ups.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Unit Conversions
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Multiply by conversion factors written as fractions equal to 1.
            Cancel units like you cancel numbers.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Distance" color="amber">
          <p>Convert 5 km to meters:</p>
          <p className="text-slate-500">
            5 km × (1000 m ÷ 1 km) ={" "}
            <strong className="text-amber-700">5000 m</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Speed" color="amber">
            <p>Convert 90 km/h to m/s:</p>
            <p className="text-slate-500">
              90 × (1000 ÷ 3600) ={" "}
              <strong className="text-amber-700">25 m/s</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <UnitConversionWidget />
        </div>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Direct & Inverse Variation
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Direct variation:</strong> y = kx (as x increases, y
            increases proportionally). <strong>Inverse variation:</strong> xy =
            k (as x increases, y decreases).
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>Direct: y = kx → k = y ÷ x (constant ratio)</FormulaBox>
            <FormulaBox>
              Inverse: xy = k → y = k ÷ x (constant product)
            </FormulaBox>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Direct" color="amber">
          <p>
            y varies directly with x. If y = 12 when x = 4, find y when x = 7.
          </p>
          <p className="text-slate-500">
            k = 12 ÷ 4 = 3 → y = 3(7) ={" "}
            <strong className="text-amber-700">21</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Inverse" color="amber">
            <p>
              y varies inversely with x. If y = 6 when x = 8, find y when x =
              12.
            </p>
            <p className="text-slate-500">
              k = 6 × 8 = 48 → y = 48 ÷ 12 ={" "}
              <strong className="text-amber-700">4</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

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