"use client";

import type { TeachLessonNotes } from "@/lib/tuition/teachLessonNotes";
import { PacedTeachMarkdown } from "./PacedTeachMarkdown";
import type { TeachingPace } from "@/lib/api/teaching-preferences";

export function TeachNotesStep({
  notes,
  beatIndex,
  pace = "standard",
}: {
  notes: TeachLessonNotes;
  beatIndex: number;
  pace?: TeachingPace;
}) {
  const index = Math.min(
    Math.max(beatIndex, 0),
    Math.max(notes.sections.length - 1, 0),
  );
  const section = notes.sections[index];
  const showGoals = index === 0;

  return (
    <section
      className="mx-auto max-w-[1080px] bg-[#0B0F0E] px-5 py-6 text-[#F2F4F1] sm:rounded-xl sm:px-9 sm:py-8 lg:px-10"
      data-testid="tuition-active-step"
      data-step-panel="Teach"
      tabIndex={-1}
    >
      <header className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
        <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.16em] text-[#F2F4F1]/45">
          02 · Teach
        </p>
        <p className="font-mono text-[11px] font-semibold tabular-nums text-[#F2F4F1]/45">
          {String(index + 1).padStart(2, "0")} of{" "}
          {String(notes.sections.length).padStart(2, "0")}
        </p>
      </header>
      <p className="mt-4 font-mono text-[11px] font-semibold uppercase tracking-[0.12em] text-[#EAD08C]/75">
        {notes.method}
      </p>
      <h2 className="mt-3 max-w-[22ch] text-[28px] font-semibold leading-[1.1] tracking-[-0.04em] text-[#F2F4F1] text-pretty sm:text-[34px]">
        {showGoals ? notes.title : section.title}
      </h2>
      {showGoals ? (
        <div className="mt-6 max-w-[46ch]">
          <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/45">
            Today you will
          </p>
          <ul className="mt-3 space-y-2">
            {notes.goals.map((goal) => (
              <li
                key={goal}
                className="grid grid-cols-[1rem_minmax(0,1fr)] gap-2 text-[15px] leading-6 text-[#F2F4F1]/88"
              >
                <span className="mt-2 size-1.5 rounded-full bg-[#EAD08C]" />
                <span>{goal}</span>
              </li>
            ))}
          </ul>
        </div>
      ) : null}
      {section ? (
        <div className={showGoals ? "mt-10 border-t border-white/10 pt-8" : "mt-6"}>
          {showGoals ? (
            <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/45">
              {section.title}
            </p>
          ) : null}
          <PacedTeachMarkdown key={`${section.id}:${pace}`} markdown={section.markdown} pace={pace} />
          {section.boardPoints?.length ? (
            <div className="mt-6 border-t border-white/10 pt-4">
              <p className="font-mono text-[11px] font-semibold uppercase tracking-[0.14em] text-[#F2F4F1]/60">
                On the board
              </p>
              <ul className="mt-3 list-disc space-y-2 pl-5 text-[14px] leading-6 text-[#F2F4F1]/85">
                {section.boardPoints.map((point) => <li key={point}>{point}</li>)}
              </ul>
            </div>
          ) : null}
        </div>
      ) : null}
    </section>
  );
}