import React from "react";
import {
  Triangle,
  Ruler,
  Target,
  Hash,
  Layers,
  Circle,
  BookOpen,
} from "lucide-react";
import LessonShell, {
  ConceptCard,
  FormulaBox,
  ExampleCard,
  TipCard,
  PracticeFromDataset,
} from "../../../components/lessons/LessonShell";
import { Frac } from "../../../components/Math";
import UnitCircleWidget from "../../../components/lessons/UnitCircleWidget";
import {
  RIGHT_TRI_TRIG_EASY,
  RIGHT_TRI_TRIG_MEDIUM,
} from "../../../data/math/right-triangles-trig";

interface LessonProps {
  onFinish?: () => void;
}
const SECTIONS = [
  { title: "SOH-CAH-TOA", icon: Triangle },
  { title: "Finding Sides", icon: Ruler },
  { title: "Finding Angles", icon: Target },
  { title: "Special Right Triangles", icon: Hash },
  { title: "Complementary Identity", icon: Layers },
  { title: "Unit Circle Basics", icon: Circle },
  { title: "Practice & Quiz", icon: BookOpen },
];

export default function RightTrianglesTrigLesson({ onFinish }: LessonProps) {
  return (
    <LessonShell
      title="Right Triangles & Trigonometry"
      sections={SECTIONS}
      color="emerald"
      onFinish={onFinish}
    >
      {/* Section 1: SOH-CAH-TOA */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          SOH-CAH-TOA
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            The three trigonometric ratios relate the sides of a right triangle
            to its acute angles:
          </p>
          <div className="space-y-3 mt-4">
            <FormulaBox>
              <strong>S</strong>in θ = <strong>O</strong>pposite ÷{" "}
              <strong>H</strong>ypotenuse
            </FormulaBox>
            <FormulaBox>
              <strong>C</strong>os θ = <strong>A</strong>djacent ÷{" "}
              <strong>H</strong>ypotenuse
            </FormulaBox>
            <FormulaBox>
              <strong>T</strong>an θ = <strong>O</strong>pposite ÷{" "}
              <strong>A</strong>djacent
            </FormulaBox>
          </div>
        </ConceptCard>
        <TipCard type="warning">
          <p className="text-slate-700">
            "Opposite" and "adjacent" depend on which angle you're looking at!
            Always identify your reference angle first.
          </p>
        </TipCard>
      </div>

      {/* Section 2: Finding Sides */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Finding Sides
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            When you know one side and one acute angle, use trig to find the
            other sides.
          </p>
        </ConceptCard>
        <ExampleCard title="Example: Using Sine" color="emerald">
          <p>Angle = 35°, hypotenuse = 12. Find the opposite side.</p>
          <p className="text-slate-500">sin 35° = x ÷ 12</p>
          <p className="text-slate-500">
            x = 12 × sin 35° ≈{" "}
            <strong className="text-emerald-700">6.88</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Using Tangent" color="emerald">
            <p>Angle = 50°, adjacent = 8. Find the opposite side.</p>
            <p className="text-slate-500">tan 50° = x ÷ 8</p>
            <p className="text-slate-500">
              x = 8 × tan 50° ≈{" "}
              <strong className="text-emerald-700">9.53</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 3: Finding Angles */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Finding Angles
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Use <strong>inverse trig functions</strong> (sin⁻¹, cos⁻¹, tan⁻¹)
            when you know two sides and want to find an angle.
          </p>
        </ConceptCard>
        <ExampleCard title="Example" color="emerald">
          <p>Opposite = 5, hypotenuse = 13</p>
          <p className="text-slate-500">sin θ = 5 ÷ 13</p>
          <p className="text-slate-500">
            θ = sin⁻¹(5 ÷ 13) ≈{" "}
            <strong className="text-emerald-700">22.6°</strong>
          </p>
        </ExampleCard>
        <div className="mt-4">
          <ExampleCard title="Example: Recognizing 45°" color="emerald">
            <p>Opposite = 7, adjacent = 7</p>
            <p className="text-slate-500">tan θ = 7 ÷ 7 = 1</p>
            <p className="text-slate-500">
              θ = tan⁻¹(1) = <strong className="text-emerald-700">45°</strong>
            </p>
          </ExampleCard>
        </div>
      </div>

      {/* Section 4: Special Right Triangles */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Exact Trig Values
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            Know these exact values from special right triangles — they come up
            constantly!
          </p>
          <div className="mt-4 overflow-x-auto">
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-emerald-100 text-emerald-900">
                  <th className="border border-emerald-300 px-3 py-2 font-bold">
                    Angle
                  </th>
                  <th className="border border-emerald-300 px-3 py-2 font-bold">
                    sin
                  </th>
                  <th className="border border-emerald-300 px-3 py-2 font-bold">
                    cos
                  </th>
                  <th className="border border-emerald-300 px-3 py-2 font-bold">
                    tan
                  </th>
                </tr>
              </thead>
              <tbody className="text-slate-700 text-center font-mono">
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    30°
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="1" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="√3" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="√3" d="3" />
                  </td>
                </tr>
                <tr className="bg-slate-50">
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    45°
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="√2" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="√2" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">1</td>
                </tr>
                <tr className="bg-white">
                  <td className="border border-slate-200 px-3 py-2 font-bold">
                    60°
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="√3" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">
                    <Frac n="1" d="2" />
                  </td>
                  <td className="border border-slate-200 px-3 py-2">√3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </ConceptCard>
        <TipCard type="tip">
          <p className="text-slate-700">
            If you see √2 ÷ 2 or √3 ÷ 2 in answer choices, it's almost certainly
            a special triangle problem!
          </p>
        </TipCard>
      </div>

      {/* Section 5: Complementary Identity */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Complementary Angle Identity
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            In a right triangle, the two acute angles are complementary (sum to
            90°). The sine of one equals the cosine of the other.
          </p>
          <FormulaBox>
            sin(x°) = cos(90° − x°) and cos(x°) = sin(90° − x°)
          </FormulaBox>
        </ConceptCard>
        <ExampleCard title="Examples" color="emerald">
          <p>sin 25° = cos 65°</p>
          <p className="text-slate-500">cos 40° = sin 50°</p>
          <p className="text-slate-500">sin 72° = cos 18°</p>
        </ExampleCard>
        <div className="mt-4">
          <TipCard type="tip">
            <p className="text-slate-700">
              The SAT loves: "sin(a°) = cos(b°), what is a + b?" The answer is{" "}
              <strong>always 90</strong>.
            </p>
          </TipCard>
        </div>
      </div>

      {/* Section 6: Unit Circle */}
      <div>
        <h2 className="text-3xl font-extrabold text-slate-900 mb-6">
          Unit Circle Basics
        </h2>
        <ConceptCard color="emerald">
          <p className="text-slate-700 leading-relaxed">
            The unit circle has radius 1, centered at the origin. Any point on
            the circle is (cos θ, sin θ). This extends trig beyond right
            triangles to any angle.
          </p>
          <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">
              Radians ↔ Degrees
            </p>
            <FormulaBox>180° = π radians</FormulaBox>
            <p className="text-sm text-slate-700 mt-2">
              To convert: degrees × (π ÷ 180) = radians
            </p>
          </div>
        </ConceptCard>
        <div className="mt-6">
          <UnitCircleWidget />
        </div>
        <ExampleCard title="Example: Convert" color="emerald">
          <p>
            Convert 60° to radians: 60 × (π ÷ 180) ={" "}
            <strong className="text-emerald-700">π ÷ 3</strong>
          </p>
          <p className="text-slate-500">
            Convert π÷4 to degrees: (π÷4) × (180÷π) ={" "}
            <strong className="text-emerald-700">45°</strong>
          </p>
        </ExampleCard>
      </div>

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