import React, { useState } from "react";
import {
  Square,
  Circle,
  Box,
  Layers,
  Ruler,
  BookOpen,
  ChevronDown,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import CompositeAreaWidget from "../../../components/lessons/CompositeAreaWidget";
import InteractiveSectorWidget from "../../../components/lessons/InteractiveSectorWidget";
import CompositeSolidsWidget from "../../../components/lessons/CompositeSolidsWidget";
import ScaleFactorWidget from "../../../components/lessons/ScaleFactorWidget";
import { AREA_VOL_EASY, AREA_VOL_MEDIUM } from "../../../data/math/area-volume";

/* ─── Clickable formula card with shape diagram + example ─── */
function FormulaCard({
  formula,
  diagram,
  example,
}: {
  formula: React.ReactNode;
  diagram: React.ReactNode;
  example: React.ReactNode;
}) {
  const [open, setOpen] = useState(false);
  return (
    <button
      onClick={() => setOpen(!open)}
      className={`w-full text-left glass-formula rounded-xl border transition-all duration-300 overflow-hidden ${open ? "border-emerald-300 shadow-md" : "border-emerald-100 hover:border-emerald-200"}`}
    >
      <div className="flex items-center justify-between py-3 px-5">
        <span className="font-mono text-base font-bold text-slate-800">
          {formula}
        </span>
        <ChevronDown
          className={`w-4 h-4 text-emerald-400 shrink-0 transition-transform duration-300 ${open ? "rotate-180" : ""}`}
        />
      </div>
      <div
        className={`transition-all duration-300 ease-in-out ${open ? "max-h-100 opacity-100" : "max-h-0 opacity-0"}`}
      >
        <div className="border-t border-emerald-100 px-5 py-4 flex flex-col sm:flex-row items-center gap-5 bg-linear-to-br from-emerald-50/50 to-white/80">
          <div className="shrink-0">{diagram}</div>
          <div className="text-sm text-slate-600 space-y-1 font-mono">
            {example}
          </div>
        </div>
      </div>
    </button>
  );
}

/* ─── Shape SVG diagrams ─── */
const RectSvg = () => (
  <svg width="140" height="95" viewBox="-5 -5 130 90" overflow="visible">
    <rect
      x="10"
      y="10"
      width="100"
      height="60"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
      rx="2"
    />
    <text
      x="60"
      y="82"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      l = 8
    </text>
    <text
      x="2"
      y="44"
      textAnchor="end"
      className="text-[13px] font-bold fill-emerald-700"
      transform="rotate(-90 2 44)"
    >
      w = 5
    </text>
  </svg>
);
const TriSvg = () => (
  <svg width="140" height="105" viewBox="-5 -5 130 105" overflow="visible">
    <polygon
      points="60,10 10,80 110,80"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line
      x1="60"
      y1="10"
      x2="60"
      y2="80"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="4"
    />
    <text
      x="60"
      y="96"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      b = 10
    </text>
    <text x="68" y="50" className="text-[13px] font-bold fill-emerald-600">
      h = 6
    </text>
  </svg>
);
const ParaSvg = () => (
  <svg width="150" height="95" viewBox="-5 -5 140 90" overflow="visible">
    <polygon
      points="30,10 120,10 100,70 10,70"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line
      x1="30"
      y1="10"
      x2="30"
      y2="70"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="4"
    />
    <text
      x="60"
      y="84"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      b = 9
    </text>
    <text x="20" y="44" className="text-[13px] font-bold fill-emerald-600">
      h = 4
    </text>
  </svg>
);
const TrapSvg = () => (
  <svg width="150" height="105" viewBox="-5 -5 140 105" overflow="visible">
    <polygon
      points="35,18 95,18 115,75 15,75"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line
      x1="35"
      y1="18"
      x2="35"
      y2="75"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="4"
    />
    <text
      x="65"
      y="14"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      b₁ = 6
    </text>
    <text
      x="65"
      y="92"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      b₂ = 10
    </text>
    <text x="25" y="52" className="text-[13px] font-bold fill-emerald-600">
      h = 4
    </text>
  </svg>
);
const CircAreaSvg = () => (
  <svg width="120" height="110" viewBox="-5 -5 110 110" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="40"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line x1="50" y1="50" x2="90" y2="50" stroke="#059669" strokeWidth="2" />
    <circle cx="50" cy="50" r="2.5" fill="#059669" />
    <text x="70" y="44" className="text-[13px] font-bold fill-emerald-700">
      r = 5
    </text>
  </svg>
);
const CircCircSvg = () => (
  <svg width="120" height="110" viewBox="-5 -5 110 110" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="40"
      fill="none"
      stroke="#059669"
      strokeWidth="2"
    />
    <line x1="10" y1="50" x2="90" y2="50" stroke="#059669" strokeWidth="2" />
    <text
      x="50"
      y="44"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      d = 10
    </text>
  </svg>
);
const PrismSASvg = () => (
  <svg width="140" height="115" viewBox="-5 -5 130 115" overflow="visible">
    <polygon
      points="20,40 70,40 70,90 20,90"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <polygon
      points="20,40 45,20 95,20 70,40"
      fill="#a7f3d0"
      stroke="#059669"
      strokeWidth="2"
    />
    <polygon
      points="70,40 95,20 95,70 70,90"
      fill="#6ee7b7"
      stroke="#059669"
      strokeWidth="2"
    />
    <text
      x="45"
      y="105"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      l = 4
    </text>
    <text x="10" y="68" className="text-[13px] font-bold fill-emerald-600">
      h = 2
    </text>
    <text x="88" y="48" className="text-[13px] font-bold fill-emerald-700">
      w = 3
    </text>
  </svg>
);
const CylSASvg = () => (
  <svg width="120" height="120" viewBox="-5 -5 115 120" overflow="visible">
    <ellipse
      cx="50"
      cy="25"
      rx="35"
      ry="12"
      fill="#a7f3d0"
      stroke="#059669"
      strokeWidth="2"
    />
    <rect x="15" y="25" width="70" height="60" fill="#d1fae5" />
    <line x1="15" y1="25" x2="15" y2="85" stroke="#059669" strokeWidth="2" />
    <line x1="85" y1="25" x2="85" y2="85" stroke="#059669" strokeWidth="2" />
    <ellipse
      cx="50"
      cy="85"
      rx="35"
      ry="12"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line
      x1="50"
      y1="25"
      x2="85"
      y2="25"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="3"
    />
    <text x="67" y="19" className="text-[13px] font-bold fill-emerald-700">
      r = 3
    </text>
    <text x="92" y="58" className="text-[13px] font-bold fill-emerald-600">
      h = 5
    </text>
  </svg>
);
const SphereSvg = () => (
  <svg width="120" height="110" viewBox="-5 -5 110 110" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="40"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <ellipse
      cx="50"
      cy="50"
      rx="40"
      ry="14"
      fill="none"
      stroke="#059669"
      strokeWidth="1"
      strokeDasharray="4"
    />
    <line x1="50" y1="50" x2="90" y2="50" stroke="#059669" strokeWidth="2" />
    <circle cx="50" cy="50" r="2.5" fill="#059669" />
    <text x="70" y="44" className="text-[13px] font-bold fill-emerald-700">
      r = 4
    </text>
  </svg>
);
const PrismVolSvg = () => (
  <svg width="140" height="115" viewBox="-5 -5 130 115" overflow="visible">
    <polygon
      points="20,40 70,40 70,90 20,90"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <polygon
      points="20,40 45,20 95,20 70,40"
      fill="#a7f3d0"
      stroke="#059669"
      strokeWidth="2"
    />
    <polygon
      points="70,40 95,20 95,70 70,90"
      fill="#6ee7b7"
      stroke="#059669"
      strokeWidth="2"
    />
    <text
      x="45"
      y="105"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      l = 6
    </text>
    <text x="10" y="68" className="text-[13px] font-bold fill-emerald-600">
      h = 4
    </text>
    <text x="88" y="48" className="text-[13px] font-bold fill-emerald-700">
      w = 3
    </text>
  </svg>
);
const CylVolSvg = () => (
  <svg width="120" height="120" viewBox="-5 -5 115 120" overflow="visible">
    <ellipse
      cx="50"
      cy="25"
      rx="35"
      ry="12"
      fill="#a7f3d0"
      stroke="#059669"
      strokeWidth="2"
    />
    <rect x="15" y="25" width="70" height="60" fill="#d1fae5" />
    <line x1="15" y1="25" x2="15" y2="85" stroke="#059669" strokeWidth="2" />
    <line x1="85" y1="25" x2="85" y2="85" stroke="#059669" strokeWidth="2" />
    <ellipse
      cx="50"
      cy="85"
      rx="35"
      ry="12"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <text x="67" y="19" className="text-[13px] font-bold fill-emerald-700">
      r = 5
    </text>
    <text x="92" y="58" className="text-[13px] font-bold fill-emerald-600">
      h = 8
    </text>
  </svg>
);
const ConeSvg = () => (
  <svg width="120" height="120" viewBox="-5 -5 115 120" overflow="visible">
    <polygon
      points="50,10 15,90 85,90"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <ellipse
      cx="50"
      cy="90"
      rx="35"
      ry="12"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <line
      x1="50"
      y1="10"
      x2="50"
      y2="90"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="4"
    />
    <text x="55" y="56" className="text-[13px] font-bold fill-emerald-600">
      h = 9
    </text>
    <text x="67" y="96" className="text-[13px] font-bold fill-emerald-700">
      r = 4
    </text>
  </svg>
);
const SphereVolSvg = () => (
  <svg width="120" height="110" viewBox="-5 -5 110 110" overflow="visible">
    <circle
      cx="50"
      cy="50"
      r="40"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <ellipse
      cx="50"
      cy="50"
      rx="40"
      ry="14"
      fill="none"
      stroke="#059669"
      strokeWidth="1"
      strokeDasharray="4"
    />
    <line x1="50" y1="50" x2="90" y2="50" stroke="#059669" strokeWidth="2" />
    <circle cx="50" cy="50" r="2.5" fill="#059669" />
    <text x="70" y="44" className="text-[13px] font-bold fill-emerald-700">
      r = 6
    </text>
  </svg>
);
const PyramidSvg = () => (
  <svg width="130" height="125" viewBox="-5 -5 120 125" overflow="visible">
    <polygon
      points="55,10 10,90 100,90"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="2"
    />
    <polygon
      points="55,10 100,90 80,100 35,100 10,90"
      fill="#d1fae5"
      stroke="#059669"
      strokeWidth="1.5"
    />
    <line
      x1="55"
      y1="10"
      x2="55"
      y2="90"
      stroke="#059669"
      strokeWidth="1.5"
      strokeDasharray="4"
    />
    <text x="62" y="56" className="text-[13px] font-bold fill-emerald-600">
      h = 12
    </text>
    <text
      x="55"
      y="114"
      textAnchor="middle"
      className="text-[13px] font-bold fill-emerald-700"
    >
      B = 25
    </text>
  </svg>
);

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Area Formulas", icon: Square },
  { title: "Composite Shapes", icon: Layers },
  { title: "Arc Length & Sector Area", icon: Circle },
  { title: "Surface Area", icon: Box },
  { title: "Volume", icon: Ruler },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function AreaVolumeLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Area & Volume"
      sections={SECTIONS}
      color="emerald"
      onFinish={onFinish}
    >
      {/* Section 1: Area Formulas */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Area Formulas
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            All area formulas are on the SAT reference sheet, but knowing them
            saves time. <strong>Tap any formula</strong> to see a diagram and
            worked example.
          </p>
          <div className="grid md:grid-cols-2 gap-3 mt-4">
            <FormulaCard
              formula="Rectangle: A = l × w"
              diagram={<RectSvg />}
              example={
                <>
                  <p>l = 8, w = 5</p>
                  <p>
                    A = 8 × 5 = <strong className="text-emerald-700">40</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula={
                <>
                  Triangle: A = <Frac n="1" d="2" /> × b × h
                </>
              }
              diagram={<TriSvg />}
              example={
                <>
                  <p>b = 10, h = 6</p>
                  <p>
                    A = ½ × 10 × 6 ={" "}
                    <strong className="text-emerald-700">30</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Parallelogram: A = b × h"
              diagram={<ParaSvg />}
              example={
                <>
                  <p>b = 9, h = 4</p>
                  <p>
                    A = 9 × 4 = <strong className="text-emerald-700">36</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula={
                <>
                  Trapezoid: A = <Frac n="1" d="2" />
                  (b₁ + b₂) × h
                </>
              }
              diagram={<TrapSvg />}
              example={
                <>
                  <p>b₁ = 6, b₂ = 10, h = 4</p>
                  <p>
                    A = ½(6+10) × 4 ={" "}
                    <strong className="text-emerald-700">32</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Circle: A = πr²"
              diagram={<CircAreaSvg />}
              example={
                <>
                  <p>r = 5</p>
                  <p>
                    A = π(25) ={" "}
                    <strong className="text-emerald-700">25π ≈ 78.5</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Circumference: C = 2πr = πd"
              diagram={<CircCircSvg />}
              example={
                <>
                  <p>d = 10 (r = 5)</p>
                  <p>
                    C = 2π(5) ={" "}
                    <strong className="text-emerald-700">10π ≈ 31.4</strong>
                  </p>
                </>
              }
            />
          </div>
        </ConceptCard>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              The height of a triangle is ALWAYS perpendicular to the base —
              it's NOT the side length (unless it's a right triangle).
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 2: Composite Shapes */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Composite Shapes
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Break complex shapes into simpler pieces. <strong>Add</strong> areas
            for combined shapes. <strong>Subtract</strong> for cut-out regions.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: L-Shape" color="emerald">
          <p>10 × 8 rectangle with a 4 × 3 piece cut out</p>
          <p className="text-slate-500">
            80 − 12 ={" "}
            <strong className="text-emerald-700">68 square units</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Shaded Region" color="emerald">
            <p>Square with side 10 and inscribed circle (r = 5)</p>
            <p className="text-slate-500">
              Shaded area = 100 − 25π ≈{" "}
              <strong className="text-emerald-700">21.5 square units</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-6">
          <CompositeAreaWidget />
        </div>
      </div>

      {/* Section 3: Arc Length & Sector Area */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Arc Length & Sector Area
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            A sector is a "pizza slice" of a circle. The fraction of the circle
            used = central angle ÷ 360°.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>Arc Length = (θ ÷ 360) × 2πr</FormulaBox>
            <FormulaBox>Sector Area = (θ ÷ 360) × πr²</FormulaBox>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>Circle with r = 6, central angle = 60°</p>
          <p className="text-slate-500">
            Arc = (60 ÷ 360) × 2π(6) = <Frac n="1" d="6" /> × 12π = 2π
          </p>
          <p className="text-slate-500">
            Sector = (60 ÷ 360) × π(36) ={" "}
            <strong className="text-emerald-700">6π</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <InteractiveSectorWidget />
        </div>
      </div>

      {/* Section 4: Surface Area */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Surface Area
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Surface area is the total area of all faces or surfaces of a 3D
            shape. <strong>Tap any formula</strong> to see the shape and a
            worked example.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaCard
              formula="Rectangular Prism: SA = 2(lw + lh + wh)"
              diagram={<PrismSASvg />}
              example={
                <>
                  <p>l = 4, w = 3, h = 2</p>
                  <p>SA = 2(12 + 8 + 6)</p>
                  <p>
                    SA = 2(26) ={" "}
                    <strong className="text-emerald-700">52</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Cylinder: SA = 2πr² + 2πrh"
              diagram={<CylSASvg />}
              example={
                <>
                  <p>r = 3, h = 5</p>
                  <p>SA = 2π(9) + 2π(15)</p>
                  <p>
                    SA = 18π + 30π ={" "}
                    <strong className="text-emerald-700">48π ≈ 150.8</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Sphere: SA = 4πr²"
              diagram={<SphereSvg />}
              example={
                <>
                  <p>r = 4</p>
                  <p>
                    SA = 4π(16) ={" "}
                    <strong className="text-emerald-700">64π ≈ 201.1</strong>
                  </p>
                </>
              }
            />
          </div>
        </ConceptCard>
      </div>

      {/* Section 5: Volume */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">Volume</h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Volume formulas are provided on the SAT reference sheet.{" "}
            <strong>Tap any formula</strong> to explore.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaCard
              formula="Rectangular Prism: V = lwh"
              diagram={<PrismVolSvg />}
              example={
                <>
                  <p>l = 6, w = 3, h = 4</p>
                  <p>
                    V = 6 × 3 × 4 ={" "}
                    <strong className="text-emerald-700">72</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula="Cylinder: V = πr²h"
              diagram={<CylVolSvg />}
              example={
                <>
                  <p>r = 5, h = 8</p>
                  <p>
                    V = π(25)(8) ={" "}
                    <strong className="text-emerald-700">200π ≈ 628.3</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula={
                <>
                  Cone: V = <Frac n="1" d="3" />
                  πr²h
                </>
              }
              diagram={<ConeSvg />}
              example={
                <>
                  <p>r = 4, h = 9</p>
                  <p>V = ⅓ × π(16)(9)</p>
                  <p>
                    V ={" "}
                    <strong className="text-emerald-700">48π ≈ 150.8</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula={
                <>
                  Sphere: V = <Frac n="4" d="3" />
                  πr³
                </>
              }
              diagram={<SphereVolSvg />}
              example={
                <>
                  <p>r = 6</p>
                  <p>V = ⁴⁄₃ × π(216)</p>
                  <p>
                    V ={" "}
                    <strong className="text-emerald-700">288π ≈ 904.8</strong>
                  </p>
                </>
              }
            />
            <FormulaCard
              formula={
                <>
                  Pyramid: V = <Frac n="1" d="3" />
                  Bh
                </>
              }
              diagram={<PyramidSvg />}
              example={
                <>
                  <p>B = 25 (5×5 base), h = 12</p>
                  <p>
                    V = ⅓ × 25 × 12 ={" "}
                    <strong className="text-emerald-700">100</strong>
                  </p>
                </>
              }
            />
          </div>
        </ConceptCard>
        <div className="mt-6">
          <CompositeSolidsWidget />
        </div>
        <div className="mt-6">
          <ScaleFactorWidget />
        </div>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              A cone is <Frac n="1" d="3" /> of a cylinder with the same base
              and height. A pyramid is <Frac n="1" d="3" /> of a prism with the
              same base and height.
            </p>
          </TipCard>
        </div>
      </div>

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