import {
  Percent,
  TrendingUp,
  ArrowRight,
  DollarSign,
  Layers,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import PercentChangeWidget from "../../../components/lessons/PercentChangeWidget";
import MultiStepPercentWidget from "../../../components/lessons/MultiStepPercentWidget";
import {
  PERCENTAGES_EASY,
  PERCENTAGES_MEDIUM,
} from "../../../data/math/percentages";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Percent Basics", icon: Percent },
  { title: "Percent Change", icon: TrendingUp },
  { title: "Multi-Step Percent", icon: ArrowRight },
  { title: "Markup & Discount", icon: DollarSign },
  { title: "Simple & Compound Interest", icon: Layers },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function PercentagesLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Percentages"
      sections={SECTIONS}
      color="amber"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Percent Basics
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Percent means "per hundred." Three types of percent problems: find
            the <strong>part</strong>, find the <strong>whole</strong>, find the{" "}
            <strong>percent</strong>.
          </p>
          <FormulaBox>Percent = (Part ÷ Whole) × 100</FormulaBox>
          <FormulaBox>Part = Percent × Whole</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Find the Part" color="amber">
          <p>What is 35% of 80?</p>
          <p className="text-slate-500">
            <strong className="text-amber-700">0.35 × 80 = 28</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Find the Percent" color="amber">
            <p>42 is what percent of 120?</p>
            <p className="text-slate-500">
              <strong className="text-amber-700">(42 ÷ 120) × 100 = 35%</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Percent Change
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Percent change measures how much a value has increased or decreased
            relative to the original.
          </p>
          <FormulaBox>
            Percent Change = (New − Original) ÷ Original × 100
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Percent Increase" color="amber">
          <p>Price goes from $80 to $100</p>
          <p className="text-slate-500">
            (100 − 80) ÷ 80 × 100 ={" "}
            <strong className="text-amber-700">25% increase</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Percent Decrease" color="amber">
            <p>Population drops from 500 to 425</p>
            <p className="text-slate-500">
              (500 − 425) ÷ 500 × 100 ={" "}
              <strong className="text-amber-700">15% decrease</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <PercentChangeWidget />
        </div>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Multi-Step Percent Problems
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            Successive percent changes are <strong>multiplicative</strong>, not
            additive. A 20% increase followed by a 20% decrease does NOT return
            to the original!
          </p>
          <div className="mt-3 bg-amber-50 border border-amber-200 rounded-xl p-4">
            <p className="text-sm text-slate-700">
              <strong>Multiplier method:</strong> Increase 20% = ×1.20. Decrease
              15% = ×0.85. Chain multipliers together.
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Why They Don't Cancel" color="amber">
          <p>$100 → increase 20% → $120 → decrease 20% → $96</p>
          <p className="text-slate-500">
            <strong className="text-red-600">NOT $100!</strong> Because 20% of
            120 ≠ 20% of 100.
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Chain Multipliers" color="amber">
            <p>$200 marked up 30%, then discounted 10%</p>
            <p className="text-slate-500">
              200 × 1.30 × 0.90 ={" "}
              <strong className="text-amber-700">$234</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <MultiStepPercentWidget />
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              Successive percent changes are multiplicative! A 50% increase then
              50% decrease gives ×1.5 × 0.5 = ×0.75, a 25% net decrease.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Markup & Discount
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Markup</strong> = percent increase from cost to selling
            price. <strong>Discount</strong> = percent decrease from original to
            sale price. Tax is added after.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Markup" color="amber">
          <p>Store buys item for $40, marks up 60%</p>
          <p className="text-slate-500">
            $40 × 1.60 ={" "}
            <strong className="text-amber-700">$64 selling price</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Discount + Tax" color="amber">
            <p>$85 item with 20% discount, then 8% tax</p>
            <p className="text-slate-500">$85 × 0.80 = $68 (after discount)</p>
            <p className="text-slate-500">
              $68 × 1.08 ={" "}
              <strong className="text-amber-700">$73.44 (final price)</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Simple & Compound Interest
        </h2>
        <ConceptCard color="amber">
          <p className="text-slate-700 leading-relaxed">
            <strong>Simple interest</strong> is calculated only on the
            principal. <strong>Compound interest</strong> earns interest on
            interest.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>Simple: I = P × r × t</FormulaBox>
            <FormulaBox>
              Compound: A = P(1 + r ÷ n)<sup>nt</sup>
            </FormulaBox>
          </div>
          <p className="text-xs text-slate-500 mt-2">
            P = principal, r = annual rate, t = time in years, n = compounds per
            year
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Simple Interest" color="amber">
          <p>$1,000 at 5% for 3 years</p>
          <p className="text-slate-500">
            I = 1000 × 0.05 × 3 ={" "}
            <strong className="text-amber-700">$150</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Compound Interest" color="amber">
            <p>$1,000 at 5% compounded annually for 3 years</p>
            <p className="text-slate-500">
              A = 1000(1.05)³ ={" "}
              <strong className="text-amber-700">$1,157.63</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

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