"use client";

import { useEffect, useRef } from "react";
import type { FormEvent } from "react";

interface AnswerFormProps {
  answerA: string;
  answerB: string;
  disabled: boolean;
  error: string;
  onAnswerAChange: (value: string) => void;
  onAnswerBChange: (value: string) => void;
  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
}

export default function AnswerForm({
  answerA,
  answerB,
  disabled,
  error,
  onAnswerAChange,
  onAnswerBChange,
  onSubmit,
}: AnswerFormProps) {
  const firstInputRef = useRef<HTMLInputElement>(null);
  const secondInputRef = useRef<HTMLInputElement>(null);
  const submitButtonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!disabled) {
      firstInputRef.current?.focus();
    }
  }, [disabled]);

  return (
    <form
      onSubmit={onSubmit}
      className="rounded-md bg-white p-6 shadow-sm ring-1 ring-slate-200 sm:p-8"
    >
      <div className="grid gap-4 sm:grid-cols-2">
        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
          첫째 항
          <input
            ref={firstInputRef}
            value={answerA}
            onChange={(event) => onAnswerAChange(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault();
                secondInputRef.current?.focus();
              }
            }}
            disabled={disabled}
            inputMode="numeric"
            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
          />
        </label>
        <label className="flex flex-col gap-2 text-sm font-semibold text-slate-700">
          둘째 항
          <input
            ref={secondInputRef}
            value={answerB}
            onChange={(event) => onAnswerBChange(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault();
                submitButtonRef.current?.click();
              }
            }}
            disabled={disabled}
            inputMode="numeric"
            className="h-12 rounded-md border border-slate-300 px-4 text-lg font-semibold text-slate-950 outline-none transition focus:border-emerald-600 focus:ring-2 focus:ring-emerald-200 disabled:bg-slate-100"
          />
        </label>
      </div>

      {error ? (
        <p className="mt-3 text-sm font-semibold text-red-700">{error}</p>
      ) : null}

      <div className="mt-6 flex flex-wrap gap-3">
        <button
          ref={submitButtonRef}
          type="submit"
          disabled={disabled}
          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 disabled:cursor-not-allowed disabled:bg-slate-300"
        >
          제출
        </button>
      </div>
    </form>
  );
}