"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useRooSports } from "@/components/app-provider";
import {
  ChildAgeNotice,
  ChildProfileSuccess,
} from "@/components/child-profile-feedback";
import { RooSportsLogo } from "@/components/roosports-logo";
import {
  MEDICAL_ALERT_MAX_LENGTH,
  firstChildFieldError,
  getChildDateOfBirthRange,
  validateChildInput,
  type ChildFieldErrors,
} from "@/lib/registration";
import type { SportName } from "@/lib/demo-data";

const childDateOfBirthRange = getChildDateOfBirthRange();

const inputClass = (hasError: boolean) =>
  `rs-field w-full rounded-2xl px-4 py-3 text-sm ${
    hasError
      ? "!border-[#9a4338]/55 !bg-[#fff5f5] focus:!shadow-[0_0_0_4px_rgba(154,67,56,0.12)]"
      : ""
  }`;

export default function FamilySetupPage() {
  const router = useRouter();
  const { addChild } = useRooSports();
  const [nickname, setNickname] = useState("");
  const [dateOfBirth, setDateOfBirth] = useState("");
  const [primarySport, setPrimarySport] = useState<SportName>("Soccer");
  const [medicalAlert, setMedicalAlert] = useState("");
  const [fieldErrors, setFieldErrors] = useState<ChildFieldErrors>({});
  const [formError, setFormError] = useState("");
  const [saving, setSaving] = useState(false);
  const [savedChildName, setSavedChildName] = useState("");

  useEffect(() => {
    if (!savedChildName) return;
    const redirect = window.setTimeout(() => router.push("/dashboard"), 1250);
    return () => window.clearTimeout(redirect);
  }, [router, savedChildName]);

  const saveProfile = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const errors = validateChildInput({ nickname, dateOfBirth, medicalAlert });
    const trimmedNickname = nickname.trim();

    if (trimmedNickname.length > 0 && !/^[A-Za-z0-9]+$/.test(trimmedNickname)) {
      errors.nickname = "Use letters and numbers only.";
    } else if (trimmedNickname.length < 10 || trimmedNickname.length > 12) {
      errors.nickname = "Nickname must be 10–15 characters.";
    }

    setFieldErrors(errors);
    const message = firstChildFieldError(errors);

    if (message) {
      setFormError(message);
      return;
    }

    setFormError("");
    setSaving(true);

    try {
      await addChild({
        nickname: nickname.trim(),
        dateOfBirth,
        primarySport,
        medicalAlert: medicalAlert.trim(),
      });

      setSavedChildName(nickname.trim());
    } catch (error) {
      setFormError(
        error instanceof Error
          ? error.message
          : "Unable to save child profile.",
      );
      setSaving(false);
    }
  };

  return (
    <main className="rs-page-surface min-h-screen px-4 py-5 sm:px-6 sm:py-8">
      <div className="mx-auto max-w-7xl">
        <header>
          <Link
            href="/dashboard"
            aria-label="RooSports dashboard"
            className="text-2xl text-[#0b0f12]"
          >
            <RooSportsLogo />
          </Link>
        </header>

        <section className="mx-auto flex min-h-[calc(100dvh-5rem)] max-w-2xl flex-col justify-center py-12 sm:py-16">
          <div>
            <h1 className="text-4xl font-extrabold tracking-[-0.055em] sm:text-5xl">
              Add a player
            </h1>
            <p className="mt-3 text-base leading-7 text-[#5c6970] sm:text-lg">
              Add a nickname and date of birth to get started.
            </p>
          </div>

          <form
            onSubmit={saveProfile}
            noValidate
            className="mt-10 w-full space-y-6"
          >
            <div>
              <label
                htmlFor="nickname"
                className="mb-2 block text-sm font-bold"
              >
                Public nickname or display ID
              </label>

              <input
                id="nickname"
                value={nickname}
                maxLength={15}
                onChange={(e) => {
                  const value = e.target.value;
                  setNickname(value);

                  if (value.length === 0) {
                    setFieldErrors((current) => ({
                      ...current,
                      nickname: undefined,
                    }));
                  } else if (!/^[A-Za-z0-9]+$/.test(value)) {
                    setFieldErrors((current) => ({
                      ...current,
                      nickname: "Use letters and numbers only.",
                    }));
                  } else if (value.length < 10 || value.length > 12) {
                    setFieldErrors((current) => ({
                      ...current,
                      nickname: "Nickname must be 10–15 characters.",
                    }));
                  } else {
                    setFieldErrors((current) => ({
                      ...current,
                      nickname: undefined,
                    }));
                  }

                  setFormError("");
                }}
                placeholder="e.g. SportyJoey88"
                aria-invalid={Boolean(fieldErrors.nickname)}
                className={inputClass(Boolean(fieldErrors.nickname))}
              />

              {fieldErrors.nickname ? (
                <p className="mt-1.5 text-sm font-semibold text-[#9a4338]">
                  {fieldErrors.nickname}
                </p>
              ) : (
                <p className="mt-1.5 text-xs text-[#758293]">
                  10–15 characters. Letters and numbers only.
                </p>
              )}
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <div className="mb-2 flex items-center justify-between gap-3">
                  <label htmlFor="dob" className="text-sm font-bold">
                    Date of birth
                  </label>
                  <ChildAgeNotice compact />
                </div>

                <input
                  id="dob"
                  type="date"
                  min={childDateOfBirthRange.min}
                  max={childDateOfBirthRange.max}
                  value={dateOfBirth}
                  onChange={(e) => {
                    setDateOfBirth(e.target.value);
                    setFieldErrors((current) => ({
                      ...current,
                      dateOfBirth: undefined,
                    }));
                    setFormError("");
                  }}
                  aria-invalid={Boolean(fieldErrors.dateOfBirth)}
                  className={inputClass(Boolean(fieldErrors.dateOfBirth))}
                />

                {fieldErrors.dateOfBirth ? (
                  <p className="mt-1.5 text-sm font-semibold text-[#9a4338]">
                    {fieldErrors.dateOfBirth}
                  </p>
                ) : null}
              </div>

              <div>
                <label htmlFor="sport" className="mb-2 block text-sm font-bold">
                  Primary sport{" "}
                  <span className="font-normal text-[#758293]">(optional)</span>
                </label>

                <select
                  id="sport"
                  value={primarySport}
                  onChange={(e) => setPrimarySport(e.target.value as SportName)}
                  className="rs-field w-full rounded-2xl px-4 py-3 text-sm"
                >
                  <option>Soccer</option>
                  <option>Basketball</option>
                  <option>Touch Rugby</option>
                </select>
              </div>
            </div>

            <div>
              <label htmlFor="medical" className="mb-2 block text-sm font-bold">
                Essential medical alert{" "}
                <span className="font-normal text-[#758293]">(optional)</span>
              </label>

              <textarea
                id="medical"
                value={medicalAlert}
                onChange={(e) => {
                  setMedicalAlert(e.target.value);
                  setFieldErrors((current) => ({
                    ...current,
                    medicalAlert: undefined,
                  }));
                  setFormError("");
                }}
                maxLength={MEDICAL_ALERT_MAX_LENGTH}
                rows={3}
                placeholder="e.g. Asthma inhaler required"
                aria-invalid={Boolean(fieldErrors.medicalAlert)}
                className={
                  inputClass(Boolean(fieldErrors.medicalAlert)) + " resize-none"
                }
              />

              <div className="mt-1.5 flex items-start justify-between gap-3 text-xs leading-5 text-[#758293]">
                {fieldErrors.medicalAlert ? (
                  <p className="font-semibold text-[#9a4338]">
                    {fieldErrors.medicalAlert}
                  </p>
                ) : (
                  <p>
                    Visible only to approved staff during an active session.
                  </p>
                )}

                <span className="shrink-0 font-semibold tabular-nums">
                  {medicalAlert.length}/{MEDICAL_ALERT_MAX_LENGTH}
                </span>
              </div>
            </div>

            {formError ? (
              <p className="text-sm font-semibold text-[#9a4338]">
                {formError}
              </p>
            ) : null}

            <div className="flex flex-col gap-3 pt-2 sm:flex-row">
              <button
                type="submit"
                disabled={saving}
                aria-busy={saving}
                className="rs-primary-action flex flex-1 items-center justify-center gap-2 rounded-full px-5 py-3.5 text-sm font-bold disabled:cursor-wait disabled:opacity-65"
              >
                {saving ? "Saving profile..." : "Save and continue"}

                <span className="material-symbols-outlined">arrow_forward</span>
              </button>
              <Link
                href="/dashboard"
                className="rounded-full bg-white/55 px-6 py-3.5 text-center text-sm font-bold text-[#5c6b7c] transition hover:bg-white/85"
              >
                Skip for now
              </Link>
            </div>
          </form>
        </section>
      </div>

      {savedChildName ? (
        <ChildProfileSuccess childName={savedChildName} />
      ) : null}
    </main>
  );
}