import React from "react";
import {
  ArrowRight,
  Triangle,
  Layers,
  Scale,
  Ruler,
  Hash,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import InteractiveTransversal from "../../../components/lessons/InteractiveTransversal";
import SimilarityWidget from "../../../components/lessons/SimilarityWidget";
import SimilarityTestsWidget from "../../../components/lessons/SimilarityTestsWidget";
import ScaleFactorWidget from "../../../components/lessons/ScaleFactorWidget";
import {
  LINES_ANGLES_EASY,
  LINES_ANGLES_MEDIUM,
} from "../../../data/math/lines-angles-triangles";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "Angle Relationships", icon: ArrowRight },
  { title: "Parallel Lines & Transversals", icon: Layers },
  { title: "Triangle Properties", icon: Triangle },
  { title: "Congruence & Similarity", icon: Scale },
  { title: "Pythagorean Theorem", icon: Hash },
  { title: "Special Triangles", icon: Ruler },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function LinesAnglesTrianglesLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Lines, Angles & Triangles"
      sections={SECTIONS}
      color="emerald"
      onFinish={onFinish}
    >
      {/* Section 1 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Angle Relationships
        </h2>
        <ConceptCard color="emerald">
          <div className="grid md:grid-cols-2 gap-3">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">
                Complementary
              </p>
              <p className="text-xs text-slate-600">Sum = 90°</p>
            </div>
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">
                Supplementary
              </p>
              <p className="text-xs text-slate-600">Sum = 180°</p>
            </div>
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">
                Vertical Angles
              </p>
              <p className="text-xs text-slate-600">
                Opposite angles are equal
              </p>
            </div>
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
              <p className="font-bold text-emerald-800 text-sm">Linear Pair</p>
              <p className="text-xs text-slate-600">
                Adjacent angles on a line = 180°
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Supplementary" color="emerald">
          <p>Two supplementary angles: (3x + 10)° and (2x − 5)°</p>
          <p className="text-slate-500">
            3x + 10 + 2x − 5 = 180 → 5x + 5 = 180 → x = 35
          </p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">Angles: 115° and 65°</strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 2 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Parallel Lines & Transversals
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            When a transversal crosses parallel lines, it creates 8 angles with
            special relationships:
          </p>
          <div className="space-y-2 mt-3 text-sm text-slate-700">
            <p>
              • <strong>Corresponding angles</strong> are equal (same position
              at each intersection)
            </p>
            <p>
              • <strong>Alternate interior angles</strong> are equal (opposite
              sides, between lines)
            </p>
            <p>
              • <strong>Alternate exterior angles</strong> are equal (opposite
              sides, outside lines)
            </p>
            <p>
              • <strong>Co-interior</strong> (same-side interior) are
              supplementary (sum = 180°)
            </p>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <InteractiveTransversal />
        </div>
        <ExampleCard title="Example" color="emerald">
          <p>Lines l ∥ m cut by transversal. One angle = 65°</p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">
              All 8 angles are either 65° or 115°
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 3 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Triangle Properties
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Key properties every SAT student must know:
          </p>
          <div className="space-y-2 mt-3 text-sm text-slate-700">
            <p>
              • <strong>Angle sum:</strong> Interior angles always sum to 180°
            </p>
            <p>
              • <strong>Exterior angle:</strong> Equals the sum of the two
              non-adjacent interior angles
            </p>
            <p>
              • <strong>Triangle inequality:</strong> Sum of any two sides &gt;
              third side
            </p>
          </div>
          <div className="grid md:grid-cols-3 gap-3 mt-4">
            <div className="bg-white/60 rounded-lg p-3 border border-emerald-100 text-center text-sm">
              <p className="font-bold text-emerald-800">Equilateral</p>
              <p className="text-xs text-slate-500">All sides equal, all 60°</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-emerald-100 text-center text-sm">
              <p className="font-bold text-emerald-800">Isosceles</p>
              <p className="text-xs text-slate-500">Two equal sides/angles</p>
            </div>
            <div className="bg-white/60 rounded-lg p-3 border border-emerald-100 text-center text-sm">
              <p className="font-bold text-emerald-800">Right</p>
              <p className="text-xs text-slate-500">One 90° angle</p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Angle Sum" color="emerald">
          <p>Triangle angles: x, 2x, 3x</p>
          <p className="text-slate-500">
            x + 2x + 3x = 180 → 6x = 180 → x = 30
          </p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">
              Angles: 30°, 60°, 90° — a special right triangle!
            </strong>
          </p>
        </ExampleCard>
      </div>

      {/* Section 4 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Congruence & Similarity
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            <strong>Congruent</strong> = same shape AND size.{" "}
            <strong>Similar</strong> = same shape, possibly different size
            (corresponding sides are proportional).
          </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">Congruence Tests</p>
              <p className="text-sm text-slate-700">SSS, SAS, ASA, AAS</p>
            </div>
            <div className="bg-violet-50 border border-violet-200 rounded-xl p-4">
              <p className="font-bold text-violet-800 mb-1">Similarity Tests</p>
              <p className="text-sm text-slate-700">
                AA (two angles equal), SSS ratio, SAS ratio
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: Similar Triangles" color="emerald">
          <p>Triangle A: sides 3, 4, 5. Triangle B: sides 6, 8, 10.</p>
          <p className="text-slate-500">Ratios: 6÷3 = 8÷4 = 10÷5 = 2</p>
          <p className="text-slate-500">
            <strong className="text-emerald-700">
              Similar with scale factor 2
            </strong>
          </p>
        </ExampleCard>

        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Explore Similarity Tests
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          Drag vertex B to reshape the triangle. Switch between AA, SAS, and SSS
          to see what each test checks.
        </p>
        <SimilarityTestsWidget />

        <h3 className="text-xl font-bold text-slate-800 mt-10 mb-3">
          Scale Factor Effects
        </h3>
        <p className="text-sm text-slate-500 mb-4">
          See how the scale factor k affects lengths, areas, and volumes.
        </p>
        <ScaleFactorWidget />

        <div className="mt-8">
          <SimilarityWidget />
        </div>
      </div>

      {/* Section 5 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Pythagorean Theorem
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            In a <strong>right triangle</strong>, the square of the hypotenuse
            equals the sum of squares of the legs.
          </p>
          <FormulaBox>a² + b² = c² (c is the hypotenuse)</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-2">
              Common Pythagorean Triples
            </p>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-slate-700">
              <span className="font-mono bg-white rounded-lg px-3 py-1 text-center">
                3-4-5
              </span>
              <span className="font-mono bg-white rounded-lg px-3 py-1 text-center">
                5-12-13
              </span>
              <span className="font-mono bg-white rounded-lg px-3 py-1 text-center">
                8-15-17
              </span>
              <span className="font-mono bg-white rounded-lg px-3 py-1 text-center">
                7-24-25
              </span>
            </div>
            <p className="text-xs text-slate-500 mt-2">
              And their multiples: 6-8-10, 9-12-15, 10-24-26, etc.
            </p>
          </div>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>Right triangle: legs 6 and 8</p>
          <p className="text-slate-500">
            c² = 36 + 64 = 100 →{" "}
            <strong className="text-emerald-700">c = 10</strong>
          </p>
          <p className="text-slate-500">(This is 2 × the 3-4-5 triple)</p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              Recognize multiples of Pythagorean triples to save time. If you
              see 15-20-?, it's 5 × (3-4-5), so the answer is 25.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 6 */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Special Right Triangles
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Two special right triangles appear <strong>constantly</strong> on
            the SAT:
          </p>
          <div className="grid md:grid-cols-2 gap-4 mt-4">
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
              <p className="font-bold text-emerald-800 mb-2">
                45-45-90 Triangle
              </p>
              <FormulaBox>Sides: x : x : x√2</FormulaBox>
              <p className="text-sm text-slate-600 mt-2">
                Isosceles right triangle. Legs are equal.
              </p>
            </div>
            <div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
              <p className="font-bold text-emerald-800 mb-2">
                30-60-90 Triangle
              </p>
              <FormulaBox>Sides: x : x√3 : 2x</FormulaBox>
              <p className="text-sm text-slate-600 mt-2">
                Short leg opposite 30°. Hypotenuse = 2 × short leg.
              </p>
            </div>
          </div>
        </ConceptCard>
        <ExampleCard title="Example: 45-45-90" color="emerald">
          <p>Leg = 7</p>
          <p className="text-slate-500">
            Hypotenuse ={" "}
            <strong className="text-emerald-700">7√2 ≈ 9.90</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: 30-60-90" color="emerald">
            <p>Hypotenuse = 10</p>
            <p className="text-slate-500">
              Short leg = 5, long leg ={" "}
              <strong className="text-emerald-700">5√3 ≈ 8.66</strong>
            </p>
          </ExampleCard>
        </div>
        <div className="mt-4">
          <TipCard type="remember">
            <p className="text-slate-700">
              The side opposite the 30° angle is always the shortest (half the
              hypotenuse). The side opposite 60° is the short leg × √3.
            </p>
          </TipCard>
        </div>
      </div>

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