"use client";

import Link from "next/link";
import { useEffect, useRef } from "react";

export type PreparationProblemCount = 5 | 10;
export type PreparationMaxTermCount = 2 | 3 | 4;

interface ParenthesesPreparationClientProps {
  eyebrow: string;
  title: string;
  description: string;
  notice: string;
  playHref: string;
  selectedProblemCount: PreparationProblemCount;
  selectedMaxTermCount: PreparationMaxTermCount;
  onProblemCountChange: (count: PreparationProblemCount) => void;
  onMaxTermCountChange: (count: PreparationMaxTermCount) => void;
  onStart: () => void;
}

const problemCounts: PreparationProblemCount[] = [5, 10];
const maxTermCounts: PreparationMaxTermCount[] = [2, 3, 4];

const buttonGroupClassName =
  "inline-flex gap-1 rounded-md border border-slate-300 bg-white p-1 shadow-sm";

function optionButtonClassName({
  selected,
  disabled = false,
}: {
  selected: boolean;
  disabled?: boolean;
}) {
  return `h-10 min-w-16 rounded px-4 text-base font-semibold transition focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 ${
    selected ? "bg-emerald-700 text-white" : "text-slate-700 hover:bg-slate-100"
  } ${
    disabled
      ? "cursor-not-allowed bg-slate-100 text-slate-400 hover:bg-slate-100"
      : ""
  }`;
}

const bracketKinds = [
  {
    label: "( )",
    name: "소괄호",
    selected: true,
    disabled: false,
  },
  {
    label: "{ }",
    name: "중괄호",
    selected: false,
    disabled: true,
  },
  {
    label: "[ ]",
    name: "대괄호",
    selected: false,
    disabled: true,
  },
];

export default function ParenthesesPreparationClient({
  eyebrow,
  title,
  description,
  notice,
  playHref,
  selectedProblemCount,
  selectedMaxTermCount,
  onProblemCountChange,
  onMaxTermCountChange,
  onStart,
}: ParenthesesPreparationClientProps) {
  const startLinkRef = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    startLinkRef.current?.focus();
  }, []);

  return (
    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
        <div className="space-y-4">
          <p className="text-sm font-semibold text-emerald-700">{eyebrow}</p>
          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
            {title}
          </h1>
          <p className="max-w-2xl text-lg leading-8 text-slate-700">
            {description}
          </p>
        </div>

        <div className="flex flex-col gap-6">
          <fieldset className="space-y-3">
            <legend className="text-sm font-semibold text-slate-700">
              문제 수
            </legend>
            <div
              className={buttonGroupClassName}
              role="group"
              aria-label="문제 수 선택"
            >
              {problemCounts.map((count) => {
                const selected = selectedProblemCount === count;

                return (
                  <button
                    key={count}
                    type="button"
                    onClick={() => onProblemCountChange(count)}
                    aria-pressed={selected}
                    className={optionButtonClassName({ selected })}
                  >
                    {count}
                  </button>
                );
              })}
            </div>
          </fieldset>

          <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
            <fieldset className="space-y-3">
              <legend className="text-sm font-semibold text-slate-700">
                괄호 종류
              </legend>
              <div
                className={buttonGroupClassName}
                role="group"
                aria-label="괄호 종류 선택"
              >
                {bracketKinds.map((bracketKind) => (
                  <button
                    key={bracketKind.label}
                    type="button"
                    disabled={bracketKind.disabled}
                    aria-pressed={bracketKind.selected}
                    aria-label={`${bracketKind.name} ${
                      bracketKind.disabled ? "준비 중" : "선택됨"
                    }`}
                    className={optionButtonClassName({
                      selected: bracketKind.selected,
                      disabled: bracketKind.disabled,
                    })}
                  >
                    {bracketKind.label}
                  </button>
                ))}
              </div>
            </fieldset>

            <fieldset className="space-y-3">
              <legend className="text-sm font-semibold text-slate-700">
                괄호 안 최대 항 수
              </legend>
              <div
                className={buttonGroupClassName}
                role="group"
                aria-label="괄호 안 최대 항 수 선택"
              >
                {maxTermCounts.map((count) => {
                  const selected = selectedMaxTermCount === count;

                  return (
                    <button
                      key={count}
                      type="button"
                      onClick={() => onMaxTermCountChange(count)}
                      aria-pressed={selected}
                      className={optionButtonClassName({ selected })}
                    >
                      {count}
                    </button>
                  );
                })}
              </div>
            </fieldset>
          </div>

          <div className="flex flex-wrap gap-3">
            <Link
              ref={startLinkRef}
              href={playHref}
              onClick={onStart}
              className="inline-flex h-12 items-center justify-center rounded-md bg-emerald-700 px-6 text-base font-semibold text-white transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
            >
              연습 시작
            </Link>
            <Link
              href="/"
              className="inline-flex h-12 items-center justify-center rounded-md border border-slate-300 bg-white px-6 text-base font-semibold text-slate-700 transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
            >
              뒤로가기
            </Link>
          </div>
        </div>

        <div className="border-l-4 border-emerald-700 pl-4 text-sm leading-6 text-slate-600">
          <p>{notice}</p>
        </div>
      </section>
    </main>
  );
}