"use client";

import { useEffect, useState } from "react";
import { CHILD_MAX_AGE, CHILD_MIN_AGE } from "@/lib/registration";

export function ChildAgeNotice({ compact = false }: { compact?: boolean }) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (!open) return;

    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };

    window.addEventListener("keydown", closeOnEscape);
    return () => window.removeEventListener("keydown", closeOnEscape);
  }, [open]);

  return (
    <>
      <button
        type="button"
        onClick={() => setOpen(true)}
        aria-haspopup="dialog"
        className={`inline-flex items-center gap-1.5 font-bold text-[#526169] transition hover:text-[#0b0f12] ${
          compact ? "text-[11px]" : "text-xs"
        }`}
      >
        <span className="material-symbols-outlined text-[17px] text-[#ef7d00]">info</span>
        Ages {CHILD_MIN_AGE}–{CHILD_MAX_AGE} only
      </button>

      {open ? (
        <div
          className="fixed inset-0 z-[100] grid place-items-center bg-[#0b1820]/25 px-4 backdrop-blur-sm"
          onMouseDown={(event) => {
            if (event.target === event.currentTarget) setOpen(false);
          }}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="child-age-title"
            className="rs-success-pop w-full max-w-md rounded-[2rem] border border-white/75 bg-[#f8fbfc]/95 p-7 shadow-[0_28px_90px_rgba(11,24,32,0.22)] backdrop-blur-2xl sm:p-8"
          >
            <span className="grid h-14 w-14 place-items-center rounded-full bg-[#ffe5b8] text-[#b65c00]">
              <span className="material-symbols-outlined text-[29px]">family_restroom</span>
            </span>
            <h2 id="child-age-title" className="mt-5 text-2xl font-extrabold tracking-[-0.04em]">
              RooSports welcomes ages {CHILD_MIN_AGE}–{CHILD_MAX_AGE}.
            </h2>
            <p className="mt-3 text-sm leading-6 text-[#5f6d75]">
              Our current activities are designed for young players in this age range. Children under {CHILD_MIN_AGE}
              {" "}and participants aged {CHILD_MAX_AGE + 1} or over cannot be added to a Family profile.
            </p>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="mt-6 w-full rounded-full bg-[#0b0f12] px-5 py-3 text-sm font-extrabold text-white transition hover:bg-[#273139]"
            >
              Got it
            </button>
          </div>
        </div>
      ) : null}
    </>
  );
}

export function ChildProfileSuccess({ childName }: { childName: string }) {
  return (
    <div className="fixed inset-0 z-[110] grid place-items-center bg-[#eef6f8]/72 px-4 backdrop-blur-md" role="status">
      <div className="rs-success-pop w-full max-w-sm rounded-[2.25rem] border border-white/80 bg-white/82 p-8 text-center shadow-[0_28px_90px_rgba(26,57,69,0.18)] backdrop-blur-2xl">
        <span className="relative mx-auto grid h-20 w-20 place-items-center rounded-full bg-[#d8eee1] text-[#247452]">
          <span className="rs-success-pulse absolute inset-0 rounded-full border-2 border-[#65b789]/55" />
          <span className="material-symbols-outlined relative text-[42px]">check_circle</span>
        </span>
        <h2 className="mt-5 text-2xl font-extrabold tracking-[-0.04em]">Child profile added</h2>
        <p className="mt-2 text-sm leading-6 text-[#657078]">
          {childName} is ready for age-matched RooSports activities.
        </p>
      </div>
    </div>
  );
}