// @design-system: domain/BirthdayField
/**
 * BirthdayField — month + day pickers with no year. Used in onboarding.
 *
 * - Days clamp to month's valid range (Feb → 1-29, Apr/Jun/Sep/Nov → 1-30, else 1-31).
 * - Validation rule "both or neither" surfaced as an inline hint when parent
 *   sets `showPartialHint=true` (on Save-click when only one is set).
 */
'use client';

import { useMemo } from 'react';
import { useT } from '@/lib/i18n/react';
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { Label } from '@/components/ui/primitives/Label';
import { InlineNotice } from '@/components/ui/feedback/InlineNotice';
import { birthdayFieldVariants } from './variants';

export interface BirthdayFieldProps {
  month: number | null;
  day: number | null;
  onChange: (next: { month: number | null; day: number | null }) => void;
  showPartialHint?: boolean;
  id?: string;
}

function daysInMonth(m: number | null): number {
  if (!m) return 31;
  if (m === 2) return 29;
  if ([4, 6, 9, 11].includes(m)) return 30;
  return 31;
}

export function BirthdayField({ month, day, onChange, showPartialHint, id }: BirthdayFieldProps) {
  const t = useT('onboarding');
  const max = daysInMonth(month);
  const dayOptions = useMemo(() => Array.from({ length: max }, (_, i) => i + 1), [max]);
  const monthId = id ? `${id}-month` : undefined;
  const dayId = id ? `${id}-day` : undefined;

  const partial = (month !== null) !== (day !== null);

  return (
    <div className={birthdayFieldVariants()}>
      <Label>{t('birthday_label')}</Label>
      <div className="flex items-center gap-3">
        {/* MONTH SELECT — wide enough for longest month name */}
        <div className="w-36">
          <Label htmlFor={monthId} className="sr-only">
            {t('birthday_month_placeholder')}
          </Label>
          <Select
            value={month?.toString() ?? ''}
            onValueChange={(v: string) => {
              const next = v ? Number(v) : null;
              const clampedDay = day && next ? Math.min(day, daysInMonth(next)) : day;
              onChange({ month: next, day: clampedDay });
            }}
          >
            <SelectTrigger id={monthId} placeholder={t('birthday_month_placeholder')}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {Array.from({ length: 12 }, (_, i) => i + 1).map((m) => (
                <SelectItem key={m} value={String(m)}>
                  {t(`month_${m}` as 'month_1')}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* DAY SELECT — fits 1–31 */}
        <div className="w-20">
          <Label htmlFor={dayId} className="sr-only">
            {t('birthday_day_placeholder')}
          </Label>
          <Select
            value={day?.toString() ?? ''}
            onValueChange={(v: string) => onChange({ month, day: v ? Number(v) : null })}
          >
            <SelectTrigger id={dayId} placeholder={t('birthday_day_placeholder')}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {dayOptions.map((d) => (
                <SelectItem key={d} value={String(d)}>
                  {String(d)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {/* HELPER — inline on desktop only */}
        <p className="hidden text-sm text-[color:var(--color-text-muted)] sm:block">
          {t('birthday_helper')}
        </p>
      </div>

      {/* HELPER — below on mobile only */}
      <p className="text-sm text-[color:var(--color-text-muted)] sm:hidden">
        {t('birthday_helper')}
      </p>

      {showPartialHint && partial && (
        <InlineNotice tone="warning" description={t('birthday_partial_hint')} />
      )}
    </div>
  );
}