import {
  Circle,
  Target,
  Hash,
  Layers,
  Ruler,
  ArrowRight,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import CircleTheoremsWidget from "../../../components/lessons/CircleTheoremsWidget";
import TangentPropertiesWidget from "../../../components/lessons/TangentPropertiesWidget";
import PowerOfPointWidget from "../../../components/lessons/PowerOfPointWidget";
import { CIRCLES_EASY, CIRCLES_MEDIUM } from "../../../data/math/circles";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Equation of a Circle", icon: Circle },
  { title: "Completing the Square", icon: Hash },
  { title: "Central & Inscribed Angles", icon: Target },
  { title: "Arc Length & Sector Area", icon: Layers },
  { title: "Tangent Lines", icon: ArrowRight },
  { title: "Chord Properties", icon: Ruler },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function CirclesLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Circles"
      sections={SECTIONS}
      color="emerald"
      onFinish={onFinish}
    >
      {/* Section 1: Equation */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Equation of a Circle
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            The <strong>standard form</strong> of a circle with center (h, k)
            and radius r:
          </p>
          <FormulaBox>(x − h)² + (y − k)² = r²</FormulaBox>
        </ConceptCard>
        <ExampleCard title="Example: Write the Equation" color="emerald">
          <p>Center (3, −2), radius 5</p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">
              (x − 3)² + (y + 2)² = 25
            </strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Read Center & Radius" color="emerald">
            <p>(x + 1)² + (y − 4)² = 16</p>
            <p className="text-slate-500">
              Center: (−1, 4), radius = √16 ={" "}
              <strong className="text-emerald-700">4</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="warning">
            <p className="text-slate-700">
              (x − h) means h is positive. So (x + 1)² means h = −1. Watch the
              signs!
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 2: Completing the Square */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Completing the Square for Circles
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Convert from <strong>general form</strong> (x² + y² + Dx + Ey + F =
            0) to standard form by completing the square for both x and y.
          </p>
          <div className="space-y-2 mt-3 text-sm text-slate-700">
            <p>1. Group x terms together, y terms together</p>
            <p>2. Complete the square for each group</p>
            <p>3. Add the same values to both sides</p>
            <p>4. Write in standard form</p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>x² + y² − 6x + 4y − 12 = 0</p>
          <p className="text-slate-500">
            (x² − 6x + 9) + (y² + 4y + 4) = 12 + 9 + 4
          </p>
          <p className="text-slate-500">(x − 3)² + (y + 2)² = 25</p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">
              Center (3, −2), radius = 5
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 3: Central & Inscribed */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Central & Inscribed Angles
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            A <strong>central angle</strong> has its vertex at the center — it
            equals its intercepted arc. An <strong>inscribed angle</strong> has
            its vertex on the circle — it equals <strong>half</strong> its
            intercepted arc.
          </p>
          <FormulaBox>
            Inscribed Angle = <Frac n="1" d="2" /> × Intercepted Arc
          </FormulaBox>
          <div className="mt-4 bg-emerald-50 border border-emerald-200 rounded-xl p-4">
            <p className="font-bold text-emerald-900 text-sm mb-1">
              Key Theorem
            </p>
            <p className="text-sm text-slate-700">
              An inscribed angle that intercepts a semicircle (diameter) is
              always <strong>90°</strong>.
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>Central angle = 80° → intercepted arc = 80°</p>
          <p className="text-slate-500">
            Inscribed angle on same arc ={" "}
            <strong className="text-emerald-700">40°</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <CircleTheoremsWidget />
        </div>
      </div>

      {/* Section 4: Arc & Sector */}
      <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">
            Use the fraction of the circle (central angle ÷ 360°) to find arc
            length and sector area.
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>Arc Length = (θ ÷ 360) × 2πr</FormulaBox>
            <FormulaBox>Sector Area = (θ ÷ 360) × πr²</FormulaBox>
          </div>
          <div className="mt-3 bg-white/60 rounded-lg p-3 border border-emerald-100 text-sm">
            <p className="font-bold text-emerald-800 mb-1">In Radians</p>
            <p className="text-slate-700">
              Arc = rθ &nbsp;&nbsp;|&nbsp;&nbsp; Sector = <Frac n="1" d="2" />
              r²θ
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>r = 10, θ = 72°</p>
          <p className="text-slate-500">
            Arc = (72 ÷ 360) × 20π = <Frac n="1" d="5" /> × 20π = 4π
          </p>
          <p className="text-slate-500">
            Sector = (72 ÷ 360) × 100π ={" "}
            <strong className="text-emerald-700">20π</strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 5: Tangent Lines */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Tangent Lines
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            A <strong>tangent line</strong> touches the circle at exactly one
            point and is <strong>perpendicular</strong> to the radius at that
            point.
          </p>
          <div className="space-y-2 mt-3 text-sm text-slate-700">
            <p>• Tangent ⊥ radius at point of tangency</p>
            <p>
              • Two tangent segments from the same external point are{" "}
              <strong>equal in length</strong>
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>
            External point P, tangent to circle with center O, radius = 5, OP =
            13
          </p>
          <p className="text-slate-500">
            Tangent² + 5² = 13² (right triangle!)
          </p>
          <p className="text-slate-500">Tangent² = 169 − 25 = 144</p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">Tangent length = 12</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <TangentPropertiesWidget />
        </div>
      </div>

      {/* Section 6: Chords */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Chord Properties
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            A <strong>chord</strong> has both endpoints on the circle. The
            diameter is the longest chord.
          </p>
          <div className="space-y-2 mt-3 text-sm text-slate-700">
            <p>
              • A radius perpendicular to a chord <strong>bisects</strong> the
              chord
            </p>
            <p>• Equal chords are equidistant from the center</p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>Chord of length 24 in a circle of radius 13</p>
          <p className="text-slate-500">
            Perpendicular from center bisects chord: half-chord = 12
          </p>
          <p className="text-slate-500">
            d² + 12² = 13² → d² = 25 →{" "}
            <strong className="text-emerald-700">d = 5</strong>
          </p>
        </ExampleCard>
        <div className="mt-6">
          <PowerOfPointWidget />
        </div>
      </div>

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