"use client";

import { type ReactNode, useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import { CalendarDays, Check } from "lucide-react";

export type DatePreset =
  | "this-week"
  | "last-week"
  | "this-month"
  | "last-month"
  | "this-year"
  | "last-year"
  | "date-range";

export type OrdersDateFilterValue = {
  preset: DatePreset;
  rangeFrom: string;
  rangeTo: string;
};

const defaultValue = (): OrdersDateFilterValue => ({
  preset: "this-week",
  rangeFrom: "",
  rangeTo: "",
});

type PresetOptionProps = {
  selected: boolean;
  onSelect: () => void;
  children: ReactNode;
};

function PresetRow({ selected, onSelect, children }: PresetOptionProps) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className="flex w-full items-center gap-2 rounded-md py-0.5 text-left outline-none ring-offset-2 hover:bg-[#F9FAFB] focus-visible:ring-2 focus-visible:ring-[#003E6B]/30"
    >
      <span
        className={cn(
          "flex size-[18px] shrink-0 items-center justify-center rounded border",
          selected ? "border-[#003E6B] bg-[#003E6B]" : "border-[#D0D5DD] bg-white"
        )}
        aria-hidden
      >
        {selected ? <Check className="size-3 stroke-[2.5] text-white" /> : null}
      </span>
      <span className="text-[12px] font-normal text-[#344054]">{children}</span>
    </button>
  );
}

type OrdersDateFilterPanelProps = {
  onApply: (value: OrdersDateFilterValue) => void;
  className?: string;
};

export function OrdersDateFilterPanel({ onApply, className }: OrdersDateFilterPanelProps) {
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState<OrdersDateFilterValue>(defaultValue);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const close = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (
        target.closest("[data-radix-select-content]") ||
        target.closest("[data-radix-select-viewport]") ||
        target.closest('[role="listbox"]')
      ) {
        return;
      }
      if (rootRef.current && !rootRef.current.contains(target)) {
        setOpen(false);
      }
    };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [open]);

  const setPreset = (preset: DatePreset) => {
    setDraft((d) => ({ ...d, preset }));
  };

  const handleApply = () => {
    onApply(draft);
    setOpen(false);
  };

  return (
    <div ref={rootRef} className={cn("relative", className)}>
      <Button
        type="button"
        variant="outline"
        onClick={() => setOpen((o) => !o)}
        className="h-10 gap-1.5 rounded-md border-[#F1F3F9] bg-white px-3 text-[11px] font-medium text-[#667085] hover:bg-white"
        aria-expanded={open}
        aria-haspopup="dialog"
      >
        <CalendarDays className="size-4" aria-hidden />
        filters
      </Button>

      {open ? (
        <div
          className="absolute right-0 top-[calc(100%+8px)] z-50 w-[min(calc(100vw-2rem),320px)] rounded-lg border border-[#E4E7EC] bg-white p-4 shadow-[0_8px_24px_rgba(15,23,42,0.12)] md:w-[300px]"
          role="dialog"
          aria-label="Filter by date"
        >
          <h3 className="mb-4 text-[15px] font-bold text-[#101828]">By Date</h3>

          <div className="grid grid-cols-2 gap-x-8 gap-y-2.5">
            <PresetRow selected={draft.preset === "this-week"} onSelect={() => setPreset("this-week")}>
              This Week
            </PresetRow>
            <PresetRow selected={draft.preset === "last-week"} onSelect={() => setPreset("last-week")}>
              Last Week
            </PresetRow>
            <PresetRow selected={draft.preset === "this-month"} onSelect={() => setPreset("this-month")}>
              This Month
            </PresetRow>
            <PresetRow selected={draft.preset === "last-month"} onSelect={() => setPreset("last-month")}>
              Last Month
            </PresetRow>
            <PresetRow selected={draft.preset === "this-year"} onSelect={() => setPreset("this-year")}>
              This Year
            </PresetRow>
            <PresetRow selected={draft.preset === "last-year"} onSelect={() => setPreset("last-year")}>
              Last Year
            </PresetRow>
          </div>

          <div className="mt-3 border-t border-[#F2F4F7] pt-3">
            <PresetRow
              selected={draft.preset === "date-range"}
              onSelect={() => setPreset("date-range")}
            >
              Date Range
            </PresetRow>
            {draft.preset === "date-range" ? (
              <div className="mt-3 grid grid-cols-2 gap-3">
                <div className="space-y-1">
                  <span className="text-[10px] font-medium text-[#98A2B3]">From</span>
                  <Input
                    type="date"
                    value={draft.rangeFrom}
                    onChange={(e) => setDraft((d) => ({ ...d, rangeFrom: e.target.value }))}
                    className="h-9 rounded-md border border-[#E4E7EC] bg-white px-2 text-[11px] shadow-none focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
                  />
                </div>
                <div className="space-y-1">
                  <span className="text-[10px] font-medium text-[#98A2B3]">To</span>
                  <Input
                    type="date"
                    value={draft.rangeTo}
                    onChange={(e) => setDraft((d) => ({ ...d, rangeTo: e.target.value }))}
                    className="h-9 rounded-md border border-[#E4E7EC] bg-white px-2 text-[11px] shadow-none focus-visible:ring-1 focus-visible:ring-[#003E6B]/25"
                  />
                </div>
              </div>
            ) : null}
          </div>

          <Button
            type="button"
            onClick={handleApply}
            className="mt-5 h-10 w-full rounded-md bg-[#003E6B] text-[13px] font-semibold text-white hover:bg-[#003256]"
          >
            Filter
          </Button>
        </div>
      ) : null}
    </div>
  );
}