"use client";

import * as React from "react";
import type { DateRange } from "react-day-picker";
import { format, parse } from "date-fns";
import { enUS } from "date-fns/locale";
import { CalendarRange } from "lucide-react";
import { useTranslation } from "react-i18next";

import { Button, buttonVariants } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";

function parseYmd(value: string): Date | undefined {
  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
    return undefined;
  }
  const d = parse(value, "yyyy-MM-dd", new Date());
  return Number.isNaN(d.getTime()) ? undefined : d;
}

function formatYmd(d: Date): string {
  return format(d, "yyyy-MM-dd");
}

function summarize(from: string, to: string, placeholder: string): string {
  const df = parseYmd(from);
  const dt = parseYmd(to);
  if (!df && !dt) {
    return placeholder;
  }
  const a = df ? format(df, "yyyy-MM-dd", { locale: enUS }) : "...";
  const b = dt ? format(dt, "yyyy-MM-dd", { locale: enUS }) : "...";
  return `${a} - ${b}`;
}

/** Range date picker compatible with legacy `yyyy-MM-dd` filter fields. */
export function AdminDateRangeField({
  id,
  label,
  from: fromProp,
  to: toProp,
  onRangeChange,
  placeholder,
}: {
  id: string;
  label?: string;
  from: string;
  to: string;
  onRangeChange: (next: { from: string; to: string }) => void;
  placeholder?: string;
}) {
  const { t } = useTranslation(["common"]);
  const [open, setOpen] = React.useState(false);
  const isMobile = useIsMobile();
  const resolvedPlaceholder =
    placeholder ?? t("date.rangePlaceholder", { ns: "common", defaultValue: "Select date range" });

  const selected = React.useMemo((): DateRange | undefined => {
    const df = parseYmd(fromProp);
    const dt = parseYmd(toProp);
    if (!df && !dt) {
      return undefined;
    }
    if (df && !dt) {
      return { from: df };
    }
    if (df && dt) {
      return { from: df, to: dt };
    }
    return dt ? { from: dt } : undefined;
  }, [fromProp, toProp]);

  const hasSelection = Boolean(parseYmd(fromProp) || parseYmd(toProp));
  const defaultMonth = selected?.from ?? selected?.to ?? new Date();

  return (
    <div className="grid gap-1.5">
      {label ? (
        <Label htmlFor={id} className="leading-none">
          {label}
        </Label>
      ) : null}
      <Popover
        modal={false}
        open={open}
        onOpenChange={(next) => {
          setOpen(next);
        }}
      >
        <PopoverTrigger
          type="button"
          id={id}
          className={cn(
            buttonVariants({ variant: "outline", size: "default" }),
            "h-8 min-h-8 w-full justify-start gap-2 px-2.5 font-normal md:text-sm",
            !hasSelection && "text-muted-foreground",
          )}
        >
          <CalendarRange className="pointer-events-none size-4 shrink-0 opacity-70" aria-hidden />
          <span className="min-w-0 flex-1 truncate text-left">
            {summarize(fromProp, toProp, resolvedPlaceholder)}
          </span>
        </PopoverTrigger>
        <PopoverContent align="start" sideOffset={6} className="w-auto max-w-[calc(100vw-2rem)] min-w-fit p-0">
          <p className="text-muted-foreground border-b px-3 py-2 text-xs leading-relaxed">
            {t("date.rangeHint", {
              ns: "common",
              defaultValue:
                "Select a start date, then an end date. For a single day, click the same date twice. Click Done to close.",
            })}
          </p>
          <Calendar
            mode="range"
            locale={enUS}
            captionLayout="dropdown"
            selected={selected}
            defaultMonth={defaultMonth}
            numberOfMonths={isMobile ? 1 : 2}
            onSelect={(range) => {
              if (!range?.from && !range?.to) {
                onRangeChange({ from: "", to: "" });
                return;
              }
              const nf = range.from ? formatYmd(range.from) : "";
              const nt = range.to ? formatYmd(range.to) : "";
              onRangeChange({ from: nf, to: nt });
            }}
          />
          <div className="flex items-center justify-end gap-2 border-t px-2 py-1.5">
            <Button
              type="button"
              variant="ghost"
              size="xs"
              className="h-7 px-2"
              onClick={() => {
                onRangeChange({ from: "", to: "" });
                setOpen(false);
              }}
            >
              {t("actions.clear", { ns: "common", defaultValue: "Clear" })}
            </Button>
            <Button
              type="button"
              variant="secondary"
              size="xs"
              className="h-7 px-2"
              onClick={() => {
                setOpen(false);
              }}
            >
              {t("actions.done", { ns: "common", defaultValue: "Done" })}
            </Button>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}
