'use client';

import * as React from 'react';

import { CalendarIcon, XIcon } from '@/icons';
import { cn } from '@/lib/utils';
import { disabledField, focusRing, invalidState } from '@/lib/cva-presets';
import { Popover, PopoverAnchor, PopoverContent } from '@/components/popover/popover';
import { Calendar } from './calendar';
import {
  addMonths,
  defaultFormat,
  formatDate,
  isValid,
  parseDate,
  startOfMonth,
  type DateGranularity,
} from './date-utils';

export type { DateGranularity } from './date-utils';
export type DateRange = [Date | null, Date | null];

interface SharedProps {
  /** Granularity of the panel and of the value it produces. */
  picker?: DateGranularity;
  /** Token pattern for the text field. Defaults to one matching `picker`. */
  format?: string;
  /** BCP 47 tag driving month names, weekday names and the week start. */
  locale?: string;
  placeholder?: string;
  disabled?: boolean;
  /** Reject a date. It stays visible but cannot be chosen. */
  disabledDate?: (date: Date) => boolean;
  /** Show the clear button once something is selected. */
  allowClear?: boolean;
  className?: string;
  id?: string;
  'aria-label'?: string;
  'aria-labelledby'?: string;
  'aria-invalid'?: boolean;
}

/** The text field both pickers are built from. */
function PickerField({
  className,
  invalid,
  ...props
}: React.ComponentProps<'input'> & { invalid?: boolean }) {
  return (
    <input
      type="text"
      autoComplete="off"
      aria-invalid={invalid || undefined}
      data-slot="date-picker-input"
      className={cn(
        'w-full min-w-0 bg-transparent text-base outline-none md:text-sm',
        'placeholder:text-muted-foreground',
        disabledField,
        className
      )}
      {...props}
    />
  );
}

const fieldShell = cn(
  'flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 py-1 shadow-xs dark:bg-input/30',
  'transition-[color,box-shadow] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
  'focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50',
  invalidState.replaceAll('aria-invalid:', 'has-aria-invalid:'),
  'has-disabled:cursor-not-allowed has-disabled:opacity-50'
);

function ClearButton({ onClear }: { onClear: () => void }) {
  return (
    <button
      type="button"
      aria-label="Clear date"
      data-slot="date-picker-clear"
      /* The field opens the panel on focus, so a mousedown here would open it
         only to close it again. */
      onMouseDown={(event) => event.preventDefault()}
      onClick={onClear}
      className={cn('shrink-0 rounded-sm text-muted-foreground hover:text-foreground', focusRing)}
    >
      <XIcon className="size-3.5" />
    </button>
  );
}

export interface DatePickerProps extends SharedProps {
  value?: Date | null;
  defaultValue?: Date | null;
  onChange?: (date: Date | null) => void;
}

/**
 * Date, month or year picker.
 *
 * A calendar is more than a grid: keyboard navigation that crosses month
 * boundaries, a locale-aware week start, disabled ranges, and text entry that
 * has to parse as loosely as people type. All of it is local to the kit and
 * built on `Date` + `Intl`, so values are plain `Date` objects in local time
 * and no date library reaches the consumer.
 *
 * ```tsx
 * <DatePicker value={date} onChange={setDate} />
 * <DatePicker picker="month" format="MMMM yyyy" />
 * ```
 */
function DatePicker({
  picker = 'date',
  format,
  locale = 'en-US',
  value,
  defaultValue = null,
  onChange,
  placeholder,
  disabled,
  disabledDate,
  allowClear = true,
  className,
  id,
  'aria-invalid': ariaInvalid,
  ...props
}: DatePickerProps) {
  const pattern = format ?? defaultFormat[picker];

  const panelId = React.useId();
  const [open, setOpen] = React.useState(false);
  const [uncontrolled, setUncontrolled] = React.useState<Date | null>(defaultValue);
  const isControlled = value !== undefined;
  const selected = isControlled ? value : uncontrolled;

  const [draft, setDraft] = React.useState<string | null>(null);
  const [month, setMonth] = React.useState(() => startOfMonth(selected ?? new Date()));

  /* Same rule as InputNumber: the text is derived from the value, except while
     someone is typing into it. */
  const text = draft ?? (isValid(selected) ? formatDate(selected, pattern, locale) : '');
  const typedInvalid =
    draft !== null && draft.trim() !== '' && parseDate(draft, pattern, locale) === null;

  const commit = (next: Date | null) => {
    if (!isControlled) setUncontrolled(next);
    onChange?.(next);
    if (next) setMonth(startOfMonth(next));
  };

  return (
    <Popover open={open} onOpenChange={setOpen}>
      {/* Anchor, not Trigger: Radix's Trigger renders a button and would push
          `type="button"` onto the field, turning the text input into a button
          for both the browser and assistive tech. The panel is opened from
          focus and the keyboard instead. */}
      <PopoverAnchor asChild>
        <div className={cn(fieldShell, className)} data-slot="date-picker">
          <PickerField
            id={id}
            value={text}
            placeholder={placeholder ?? pattern}
            disabled={disabled}
            invalid={ariaInvalid || typedInvalid}
            role="combobox"
            aria-haspopup="dialog"
            aria-expanded={open}
            aria-controls={open ? panelId : undefined}
            onChange={(event) => {
              setDraft(event.target.value);
              const parsed = parseDate(event.target.value, pattern, locale);
              /* A complete, valid date moves the panel with it — but a
                 half-finished one must not wipe the selection. */
              if (parsed) commit(parsed);
              else if (event.target.value.trim() === '') commit(null);
            }}
            onBlur={() => setDraft(null)}
            onFocus={() => setOpen(true)}
            onKeyDown={(event) => {
              if (event.key === 'Escape') setOpen(false);
              if (event.key === 'ArrowDown' && !open) {
                event.preventDefault();
                setOpen(true);
              }
            }}
            {...props}
          />

          {allowClear && selected && !disabled ? (
            <ClearButton
              onClear={() => {
                setDraft(null);
                commit(null);
              }}
            />
          ) : null}
          <CalendarIcon className="size-4 shrink-0 opacity-50" />
        </div>
      </PopoverAnchor>

      <PopoverContent
        id={panelId}
        align="start"
        className="w-auto p-0"
        data-slot="date-picker-panel"
        /* Focus stays in the field: the panel is driven from there, and moving
           focus into it would make typing impossible. */
        onOpenAutoFocus={(event) => event.preventDefault()}
      >
        <Calendar
          picker={picker}
          locale={locale}
          value={selected ?? null}
          month={month}
          onMonthChange={setMonth}
          disabledDate={disabledDate}
          onSelect={(date) => {
            setDraft(null);
            commit(date);
            setOpen(false);
          }}
        />
      </PopoverContent>
    </Popover>
  );
}

export interface DateRangePickerProps extends SharedProps {
  value?: DateRange | null;
  defaultValue?: DateRange | null;
  onChange?: (range: DateRange) => void;
  /** Names for the two fields, announced to assistive tech. */
  labels?: [string, string];
}

/**
 * Two-field date range sharing one panel.
 *
 * Unlike two `DatePicker`s side by side, this keeps start and end in a single
 * interaction: hovering a day previews the whole span, and picking a start
 * moves straight on to the end field.
 *
 * ```tsx
 * <DateRangePicker value={range} onChange={setRange} />
 * ```
 */
function DateRangePicker({
  picker = 'date',
  format,
  locale = 'en-US',
  value,
  defaultValue = null,
  onChange,
  placeholder,
  disabled,
  disabledDate,
  allowClear = true,
  className,
  id,
  labels = ['Start date', 'End date'],
  'aria-invalid': ariaInvalid,
  ...props
}: DateRangePickerProps) {
  const pattern = format ?? defaultFormat[picker];

  const panelId = React.useId();
  const [open, setOpen] = React.useState(false);
  const [uncontrolled, setUncontrolled] = React.useState<DateRange>(defaultValue ?? [null, null]);
  const isControlled = value !== undefined;
  const range: DateRange = (isControlled ? value : uncontrolled) ?? [null, null];

  /** Which end the next pick fills. */
  const [editing, setEditing] = React.useState<0 | 1>(0);
  const [hovered, setHovered] = React.useState<Date | null>(null);
  const [month, setMonth] = React.useState(() => startOfMonth(range[0] ?? new Date()));

  const commit = (next: DateRange) => {
    if (!isControlled) setUncontrolled(next);
    onChange?.(next);
  };

  const handleSelect = (date: Date) => {
    if (editing === 0) {
      /* Picking a start drops an end that now precedes it, rather than
         silently producing a backwards range. */
      const end = range[1] && range[1] >= date ? range[1] : null;
      commit([date, end]);
      setEditing(1);
      return;
    }

    /* A second pick before the start means the user is re-anchoring, not
       choosing an end. */
    if (range[0] && date < range[0]) {
      commit([date, null]);
      setEditing(1);
      return;
    }

    commit([range[0], date]);
    setEditing(0);
    setOpen(false);
  };

  const field = (index: 0 | 1) => (
    <PickerField
      id={index === 0 ? id : undefined}
      aria-label={labels[index]}
      value={isValid(range[index]) ? formatDate(range[index] as Date, pattern, locale) : ''}
      placeholder={placeholder ?? pattern}
      disabled={disabled}
      invalid={ariaInvalid}
      /* Read-only on purpose: with one shared panel, two free-text fields can
         disagree with each other and with the highlighted span. */
      readOnly
      role="combobox"
      aria-haspopup="dialog"
      aria-expanded={open}
      aria-controls={open ? panelId : undefined}
      data-editing={index === editing || undefined}
      onFocus={() => {
        setEditing(index);
        setOpen(true);
      }}
      onKeyDown={(event) => {
        if (event.key === 'Escape') setOpen(false);
      }}
    />
  );

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverAnchor asChild>
        <div className={cn(fieldShell, className)} data-slot="date-range-picker" {...props}>
          {field(0)}
          <span aria-hidden className="shrink-0 text-muted-foreground">
            –
          </span>
          {field(1)}

          {allowClear && (range[0] || range[1]) && !disabled ? (
            <ClearButton
              onClear={() => {
                commit([null, null]);
                setEditing(0);
              }}
            />
          ) : null}
          <CalendarIcon className="size-4 shrink-0 opacity-50" />
        </div>
      </PopoverAnchor>

      <PopoverContent
        id={panelId}
        align="start"
        className="w-auto p-0"
        data-slot="date-range-picker-panel"
        onOpenAutoFocus={(event) => event.preventDefault()}
      >
        {/* Two months side by side: a range that crosses a boundary is the
            common case, and paging back and forth to see it is tedious. */}
        <div className="flex flex-col sm:flex-row sm:divide-x">
          <Calendar
            picker={picker}
            locale={locale}
            label={labels[0]}
            range={range}
            hovered={hovered}
            onHoveredChange={setHovered}
            month={month}
            onMonthChange={setMonth}
            disabledDate={disabledDate}
            onSelect={handleSelect}
          />
          <Calendar
            picker={picker}
            locale={locale}
            label={labels[1]}
            range={range}
            hovered={hovered}
            onHoveredChange={setHovered}
            month={addMonths(month, 1)}
            onMonthChange={(next) => setMonth(addMonths(next, -1))}
            disabledDate={disabledDate}
            onSelect={handleSelect}
            className="hidden sm:block"
          />
        </div>
      </PopoverContent>
    </Popover>
  );
}

export { DatePicker, DateRangePicker, Calendar };