'use client';

import { useEffect, useRef, useState } from 'react';
import { useTranslations } from '@/core/lib/translations';
import { cn } from '@/core/lib/utils';
import {
  BIRTH_MONTH_KEYS,
  birthDayOptions,
  birthMonthKey,
  daysInBirthMonth,
} from '@/core/lib/birthday';

/**
 * Single-field birthday picker: one trigger that reads like an ordinary date
 * field, opening a popover with a month grid and a day grid.
 *
 * There is deliberately NO year anywhere. Brainerce stores a month and a day so
 * the loyalty birthday gift can be sent without keeping anyone's age, which
 * also rules out `<input type="date">` (it demands a year, and its OS-rendered
 * popup cannot be restyled) and any date library.
 *
 * The popover is hand-rolled for the same reason `checkout/date-picker.tsx`
 * hand-rolls its calendar: the scaffold ships no popover primitive, and
 * `src/components/ui/` holds Radix wrappers only with no `react-popover`
 * dependency to wrap. The trigger markup, the calendar icon and the popover
 * container are taken from that file on purpose, so the two fields read as
 * siblings rather than as two different ideas of what a date field looks like.
 *
 * Lives in `src/components/shared/` rather than `src/ui/`: canvas scaffolds
 * wipe `src/ui` and ship no design pack but never touch `src/components/`, and
 * both the account form and the signup form depend on this.
 *
 * The month and the day always leave together. `onChange` emits either a
 * complete pair or two nulls and never one half, because the API rejects a
 * month without a day with HTTP 400. Switching to a month that cannot hold
 * the chosen day clears the birthday rather than moving the day.
 */
interface BirthdayPickerProps {
  /** Target for the field's `<label htmlFor>`. Lands on the trigger button. */
  id?: string;
  /** Committed month, 1-12, or null when no birthday is stored. */
  month: number | null;
  /** Committed day, 1-31, or null when no birthday is stored. */
  day: number | null;
  /** Emits both halves together. `(null, null)` means the shopper cleared it. */
  onChange: (month: number | null, day: number | null) => void;
  required?: boolean;
  /** Paints the trigger with the error border while a message is showing. */
  invalid?: boolean;
  /** Merged onto the trigger so each form can match its own input sizing. */
  triggerClassName?: string;
  className?: string;
}

export function BirthdayPicker({
  id,
  month,
  day,
  onChange,
  required,
  invalid,
  triggerClassName,
  className,
}: BirthdayPickerProps) {
  const t = useTranslations('common');
  const [open, setOpen] = useState(false);
  // The month the day grid is currently showing. A month tapped before any day
  // exists cannot be emitted yet, since half a birthday is an HTTP 400, so it
  // waits here until a day joins it.
  const [draftMonth, setDraftMonth] = useState<number | null>(month);
  const rootRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (!open) return;
    // `pointerdown` rather than the `mousedown` the checkout calendar uses: one
    // event covers mouse, pen AND touch, so the popover dismisses on the first
    // tap outside it on a phone instead of waiting for a synthesized mouse
    // event that some mobile browsers delay or never send.
    function onPointerDown(e: PointerEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
    }
    function onKey(e: KeyboardEvent) {
      if (e.key === 'Escape') {
        setOpen(false);
        triggerRef.current?.focus();
      }
    }
    document.addEventListener('pointerdown', onPointerDown);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('pointerdown', onPointerDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  function toggle() {
    // Re-sync the draft on the way open so a visit that picked a month and then
    // backed out does not leave the day grid on a month nothing committed to.
    if (!open) setDraftMonth(month);
    setOpen((o) => !o);
  }

  function selectMonth(next: number) {
    setDraftMonth(next);
    if (day === null) return;
    if (day > daysInBirthMonth(next)) {
      // The committed day does not exist in the month just tapped, e.g. the
      // 31st then February. CLEAR it rather than sliding it to the 29th: this
      // field decides which day a gift email goes out on, and a number that
      // quietly moved is far worse than one the shopper re-taps, because they
      // may never notice it changed. The popover deliberately stays open so
      // the narrowed day grid is the obvious next tap. The dashboard picker
      // clears for the same reason, so both surfaces behave alike.
      onChange(null, null);
      return;
    }
    // The day survives the switch, so the pair can be re-emitted right away.
    onChange(next, day);
  }

  function selectDay(next: number) {
    if (draftMonth === null) return;
    onChange(draftMonth, next);
    setOpen(false);
    triggerRef.current?.focus();
  }

  function clear() {
    setDraftMonth(null);
    onChange(null, null);
    setOpen(false);
    triggerRef.current?.focus();
  }

  // Formatted from the per-locale `birthdayDisplay` template rather than with
  // `toLocaleDateString`, whose argument-less locale resolves from Node on the
  // server and from the browser on the client and can disagree at hydration.
  const committedMonthKey = month ? birthMonthKey(month) : null;
  const displayValue =
    committedMonthKey && day
      ? t('birthdayDisplay', { month: t(committedMonthKey), day: String(day) })
      : '';

  return (
    <div ref={rootRef} className={cn('relative', className)}>
      <button
        ref={triggerRef}
        type="button"
        id={id}
        onClick={toggle}
        aria-haspopup="dialog"
        aria-expanded={open}
        aria-required={required}
        className={cn(
          'bg-background focus-visible:ring-primary relative flex h-10 w-full items-center rounded border px-3 pe-10 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
          invalid ? 'border-destructive' : 'border-border',
          displayValue ? 'text-foreground' : 'text-muted-foreground',
          triggerClassName
        )}
      >
        {displayValue || t('birthdayPlaceholder')}
        <svg
          aria-hidden="true"
          width={18}
          height={18}
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth={1.75}
          strokeLinecap="round"
          strokeLinejoin="round"
          className="text-muted-foreground pointer-events-none absolute end-3 top-1/2 -translate-y-1/2"
        >
          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
          <path d="M3.5 9.5h17M8 3v3.5M16 3v3.5" />
        </svg>
      </button>

      {open && (
        <div
          role="dialog"
          aria-label={t('birthday')}
          /*
           * `start-0` opens the panel from the field's leading edge in both
           * directions, so it stays on screen under `dir="rtl"` too. The width
           * cap keeps it inside a 375px viewport, and the height cap with
           * `overscroll-contain` lets a thumb scroll the panel itself without
           * dragging the page behind it.
           */
          className="border-border bg-background absolute start-0 z-20 mt-2 max-h-[70vh] w-[19rem] max-w-[calc(100vw-2rem)] overflow-y-auto overscroll-contain rounded-2xl border p-4 shadow-xl"
        >
          <p className="text-muted-foreground mb-2 text-xs font-semibold">{t('birthdayMonth')}</p>
          <div className="mb-4 grid grid-cols-3 gap-1">
            {BIRTH_MONTH_KEYS.map((key, index) => {
              const value = index + 1;
              const isSelected = draftMonth === value;
              return (
                <button
                  key={key}
                  type="button"
                  onClick={() => selectMonth(value)}
                  aria-pressed={isSelected}
                  className={cn(
                    'h-9 rounded-lg px-1 text-xs',
                    isSelected
                      ? 'bg-primary text-primary-foreground font-semibold'
                      : 'hover:bg-secondary'
                  )}
                >
                  {t(key)}
                </button>
              );
            })}
          </div>

          <p className="text-muted-foreground mb-2 text-xs font-semibold">{t('birthdayDay')}</p>
          <div className="grid grid-cols-7 gap-0.5">
            {birthDayOptions(draftMonth).map((value) => {
              // Days stay inert until a month is chosen, so the picker can
              // never hand back a day with no month beside it.
              const disabled = draftMonth === null;
              const isSelected = !disabled && draftMonth === month && day === value;
              return (
                <button
                  key={value}
                  type="button"
                  disabled={disabled}
                  onClick={() => selectDay(value)}
                  className={cn(
                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
                    disabled && 'text-muted-foreground/40 cursor-not-allowed',
                    !disabled && !isSelected && 'hover:bg-secondary',
                    isSelected && 'bg-primary text-primary-foreground font-bold'
                  )}
                >
                  {value}
                </button>
              );
            })}
          </div>

          {month !== null && day !== null && (
            <div className="border-border mt-3 flex justify-end border-t pt-3">
              <button
                type="button"
                onClick={clear}
                className="text-primary text-sm font-semibold hover:underline"
              >
                {t('birthdayClear')}
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}