"use client";

import { Calendar } from "@aur-ui/ui/components/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@aur-ui/ui/components/popover";
import { cn } from "@aur-ui/ui/lib/utils";
import { CalendarDays } from "lucide-react";
import { useState } from "react";
import type { DateRange } from "react-day-picker";

const TRIGGER_CLASS = cn(
  "flex h-10 w-full min-w-0 items-center justify-between gap-2 rounded-control bg-ink-wash px-3 text-left text-md text-ink-900 transition-colors outline-none",
  "hover:bg-stripe focus-visible:ring-2 focus-visible:ring-brand/30 data-[state=open]:bg-surface",
  "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
);

const PRESET_RAIL =
  "flex w-24 shrink-0 flex-col gap-0.5 border-r border-ink-wash pr-2";
const PRESET_ITEM =
  "rounded-control px-3 py-1.5 text-left text-sm text-ink-700 transition-colors hover:bg-row-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40";
const CLEAR_BTN =
  "mr-3 mb-2 self-end rounded-control px-3 py-1 text-xs font-medium text-ink-500 transition-colors hover:text-ink-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 disabled:opacity-40";
const FOOTER =
  "mx-3 mb-2 flex items-center justify-end gap-1 border-t border-ink-wash pt-2";
const FOOTER_GHOST =
  "rounded-control px-3 py-1 text-xs font-medium text-ink-500 transition-colors hover:text-ink-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 disabled:opacity-40";
const FOOTER_PRIMARY =
  "rounded-control bg-brand px-3 py-1 text-xs font-medium text-white transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/40 disabled:opacity-40";

// Date strings are parsed and formatted in local time to avoid UTC offsets.
function parseDate(value?: string): Date | undefined {
  if (!value) return undefined;
  const [year, month, day] = value.split("-").map(Number);
  if (!year || !month || !day) return undefined;
  return new Date(year, month - 1, day);
}

function formatDate(date?: Date): string {
  if (!date) return "";
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${date.getFullYear()}-${month}-${day}`;
}

function parseRange(value?: {
  from?: string;
  to?: string;
}): DateRange | undefined {
  const from = parseDate(value?.from);
  return from ? { from, to: parseDate(value?.to) } : undefined;
}

export type DatePreset = { label: string; value: string };
export type RangePreset = { label: string; from: string; to: string };

export function DatePicker({
  value,
  onChange,
  ariaLabel,
  placeholder = "",
  presets,
  clearLabel,
  disabled,
}: {
  value?: string;
  onChange: (value: string) => void;
  ariaLabel: string;
  placeholder?: string;
  presets?: DatePreset[];
  clearLabel?: string;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const triggerLabel = [ariaLabel, value || placeholder]
    .filter(Boolean)
    .join(": ");
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          aria-label={triggerLabel}
          disabled={disabled}
          className={TRIGGER_CLASS}
        >
          <span className={cn(!value && "text-ink-400")}>
            {value || placeholder}
          </span>
          <CalendarDays className="size-4 shrink-0 text-ink-400" aria-hidden />
        </button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-2">
        <div className="flex">
          {presets?.length ? (
            <div className={PRESET_RAIL}>
              {presets.map((preset) => (
                <button
                  key={preset.label}
                  type="button"
                  className={PRESET_ITEM}
                  onClick={() => {
                    onChange(preset.value);
                    setOpen(false);
                  }}
                >
                  {preset.label}
                </button>
              ))}
            </div>
          ) : null}
          <div className="flex flex-col">
            <Calendar
              mode="single"
              selected={parseDate(value)}
              onSelect={(date) => {
                if (date) {
                  onChange(formatDate(date));
                  setOpen(false);
                }
              }}
              autoFocus
            />
            {clearLabel ? (
              <button
                type="button"
                disabled={!value}
                className={CLEAR_BTN}
                onClick={() => {
                  onChange("");
                  setOpen(false);
                }}
              >
                {clearLabel}
              </button>
            ) : null}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

export function DateRangePicker({
  value,
  onChange,
  ariaLabel,
  placeholder = "",
  presets,
  clearLabel,
  doneLabel,
  disabled,
}: {
  value?: { from?: string; to?: string };
  onChange: (value: { from?: string; to?: string }) => void;
  ariaLabel: string;
  placeholder?: string;
  presets?: RangePreset[];
  clearLabel?: string;
  doneLabel?: string;
  disabled?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const [range, setRange] = useState<DateRange | undefined>(() =>
    parseRange(value),
  );

  const sync = (next: DateRange | undefined) => {
    setRange(next);
    onChange({
      from: formatDate(next?.from) || undefined,
      to: formatDate(next?.to) || undefined,
    });
  };

  const display = value?.from
    ? value.to && value.to !== value.from
      ? `${value.from} - ${value.to}`
      : value.from
    : "";
  const triggerLabel = [ariaLabel, display || placeholder]
    .filter(Boolean)
    .join(": ");

  const close = () => {
    if (range?.from && !range.to) {
      const day = formatDate(range.from);
      onChange({ from: day, to: day });
    }
    setOpen(false);
  };

  const handleOpenChange = (next: boolean) => {
    if (next) {
      setRange(parseRange(value));
      setOpen(true);
      return;
    }

    close();
  };

  return (
    <Popover open={open} onOpenChange={handleOpenChange}>
      <PopoverTrigger asChild>
        <button
          type="button"
          aria-label={triggerLabel}
          disabled={disabled}
          className={TRIGGER_CLASS}
        >
          <span className={cn(!value?.from && "text-ink-400")}>
            {display || placeholder}
          </span>
          <CalendarDays className="size-4 shrink-0 text-ink-400" aria-hidden />
        </button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-auto p-2">
        <div className="flex">
          {presets?.length ? (
            <div className={PRESET_RAIL}>
              {presets.map((preset) => (
                <button
                  key={preset.label}
                  type="button"
                  className={PRESET_ITEM}
                  onClick={() => {
                    sync({
                      from: parseDate(preset.from),
                      to: parseDate(preset.to),
                    });
                    setOpen(false);
                  }}
                >
                  {preset.label}
                </button>
              ))}
            </div>
          ) : null}
          <div className="flex flex-col">
            <Calendar
              mode="range"
              numberOfMonths={1}
              selected={range}
              onSelect={(nextRange) => sync(nextRange)}
              autoFocus
            />
            {clearLabel || doneLabel ? (
              <div className={FOOTER}>
                {clearLabel ? (
                  <button
                    type="button"
                    disabled={!range?.from}
                    className={FOOTER_GHOST}
                    onClick={() => sync(undefined)}
                  >
                    {clearLabel}
                  </button>
                ) : null}
                {doneLabel ? (
                  <button
                    type="button"
                    disabled={!range?.from}
                    className={FOOTER_PRIMARY}
                    onClick={close}
                  >
                    {doneLabel}
                  </button>
                ) : null}
              </div>
            ) : null}
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}