"use client";

import * as React from "react";
import { CalendarDays } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { useDispatch } from "react-redux";
import { setDateRange as setReduxDateRange } from "@/store/slices/deals-header-slice";
import {
  startOfMonth,
  endOfMonth,
  startOfYesterday,
  endOfYesterday,
} from "date-fns";
import type { DateRange } from "react-day-picker";
import {
  DEALS_FILTER_CLEAR_BUTTON_CLASS,
  DEALS_FILTER_TRIGGER_ACTIVE_CLASS,
} from "@/components/deals/deals-filter-styles";

const fmt = (d: Date) =>
  d.toLocaleDateString("default", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });

const y = new Date().getFullYear();
const PRESETS: { label: string; range: () => DateRange }[] = [
  {
    label: "Today",
    range: () => {
      const d = new Date();
      return { from: d, to: d };
    },
  },
  {
    label: "Yesterday",
    range: () => ({
      from: startOfYesterday(),
      to: endOfYesterday(),
    }),
  },
  {
    label: "This Month",
    range: () => ({
      from: startOfMonth(new Date()),
      to: endOfMonth(new Date()),
    }),
  },
  {
    label: "Q1",
    range: () => ({ from: new Date(y, 0, 1), to: new Date(y, 2, 31) }),
  },
  {
    label: "Q2",
    range: () => ({ from: new Date(y, 3, 1), to: new Date(y, 5, 30) }),
  },
  {
    label: "Q3",
    range: () => ({ from: new Date(y, 6, 1), to: new Date(y, 8, 30) }),
  },
  {
    label: "Q4",
    range: () => ({ from: new Date(y, 9, 1), to: new Date(y, 11, 31) }),
  },
  {
    label: "This Year",
    range: () => ({ from: new Date(y, 0, 1), to: new Date(y, 11, 31) }),
  },
];

interface DealsDateRangeFilterProps {
  dateRange: DateRange | undefined;
}

export function DealsDateRangeFilter({ dateRange }: DealsDateRangeFilterProps) {
  const dispatch = useDispatch();

  const [calendarOpen, setCalendarOpen] = React.useState(false);
  const [draft, setDraft] = React.useState<DateRange | undefined>(dateRange);

  React.useEffect(() => {
    setDraft(dateRange);
  }, [dateRange]);

  const rangeLabel = dateRange?.from
    ? dateRange.to
      ? `${fmt(dateRange.from)} \u2013 ${fmt(dateRange.to)}`
      : fmt(dateRange.from)
    : null;

  const handleApply = React.useCallback(() => {
    dispatch(setReduxDateRange(draft?.from ? { from: draft.from.toISOString(), to: draft.to?.toISOString() } : undefined));
    setCalendarOpen(false);
  }, [dispatch, draft]);

  const handleClear = React.useCallback(() => {
    setDraft(undefined);
    dispatch(setReduxDateRange(undefined));
    setCalendarOpen(false);
  }, [dispatch]);

  return (
    <Popover
      open={calendarOpen}
      onOpenChange={(open) => {
        setCalendarOpen(open);
        if (open) setDraft(dateRange);
      }}
    >
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="icon-xs"
          className={cn(
            DEALS_FILTER_CLEAR_BUTTON_CLASS,
            "rounded-lg",
            dateRange?.from && DEALS_FILTER_TRIGGER_ACTIVE_CLASS,
          )}
          aria-label={
            rangeLabel ? `Date range: ${rangeLabel}` : "Filter by date range"
          }
        >
          <CalendarDays className="size-4" aria-hidden />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-auto p-0 rounded-2xl shadow-premium border-border/40"
        align="end"
      >
        {/* Quick presets */}
        <div className="p-3 border-b border-border/40">
          <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-2 font-['Lexend_Deca']">
            Quick Select
          </p>
          <div className="flex flex-wrap gap-1.5">
            {PRESETS.map((p) => {
              const range = p.range();
              const active =
                draft?.from?.toDateString() ===
                  range.from?.toDateString() &&
                draft?.to?.toDateString() === range.to?.toDateString();
              return (
                <button
                  key={p.label}
                  onClick={() => {
                    setDraft(range);
                    dispatch(
                      setReduxDateRange(
                        range?.from
                          ? {
                              from: range.from.toISOString(),
                              to: range.to?.toISOString(),
                            }
                          : undefined,
                      ),
                    );
                    setCalendarOpen(false);
                  }}
                  className={cn(
                    "px-2.5 py-1 rounded-lg text-[11px] font-bold border transition-all",
                    active
                      ? "bg-accent text-white border-accent"
                      : "bg-gray-50 text-gray-600 border-gray-200 hover:border-accent hover:text-accent",
                  )}
                >
                  {p.label}
                </button>
              );
            })}
          </div>
        </div>
        <Calendar
          mode="range"
          numberOfMonths={2}
          selected={draft}
          onSelect={(range) => setDraft(range)}
          captionLayout="dropdown"
          initialFocus
        />
        <div className="border-t border-border/40 p-3 flex items-center justify-between gap-2">
          <p className="text-[11px] text-gray-400 font-['Lexend_Deca']">
            {draft?.from && draft?.to
              ? `${fmt(draft.from)} \u2013 ${fmt(draft.to)}`
              : draft?.from
                ? `From ${fmt(draft.from)}`
                : "Select a date range"}
          </p>
          <div className="flex gap-2">
            <Button
              variant="ghost"
              size="sm"
              className="h-7 text-[12px] text-gray-500"
              onClick={handleClear}
            >
              Clear
            </Button>
            <Button
              size="sm"
              className="h-7 text-[12px] bg-accent text-white"
              onClick={handleApply}
            >
              Apply
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}