"use client";

import * as React from "react";
import { CircleDollarSign, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Slider } from "@/components/ui/slider";

const SLIDER_MIN = 0;
const SLIDER_MAX = 1_000_000;
const SLIDER_STEP = 5_000;

function formatDealValue(n: number): string {
  if (n >= 1_000_000) return `$${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `$${Math.round(n / 1_000)}k`;
  return `$${n.toLocaleString()}`;
}

export type BusinessDealValueRange = {
  min: number | null;
  max: number | null;
};

type BusinessDealValueRangeFilterProps = {
  value: BusinessDealValueRange;
  onChange: (value: BusinessDealValueRange) => void;
  triggerClassName?: string;
};

export function BusinessDealValueRangeFilter({
  value,
  onChange,
  triggerClassName,
}: BusinessDealValueRangeFilterProps) {
  const [open, setOpen] = React.useState(false);
  const active =
    (value.min != null && Number.isFinite(value.min)) ||
    (value.max != null && Number.isFinite(value.max));

  const sliderValue = React.useMemo((): [number, number] => {
    const lo = value.min ?? SLIDER_MIN;
    const hi = value.max ?? SLIDER_MAX;
    return [lo, hi];
  }, [value.min, value.max]);

  const rangeLabel = React.useMemo(() => {
    if (!active) return null;
    const lo = value.min ?? SLIDER_MIN;
    const hi = value.max ?? SLIDER_MAX;
    return `${formatDealValue(lo)} – ${formatDealValue(hi)}`;
  }, [active, value.min, value.max]);

  const handleSliderChange = React.useCallback(
    (vals: number[]) => {
      const [lo, hi] = vals;
      onChange({
        min: lo <= SLIDER_MIN ? null : lo,
        max: hi >= SLIDER_MAX ? null : hi,
      });
    },
    [onChange],
  );

  const handleClear = React.useCallback(
    (e?: React.MouseEvent) => {
      e?.stopPropagation();
      onChange({ min: null, max: null });
      setOpen(false);
    },
    [onChange],
  );

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className={cn(
            "h-8 w-full min-w-0 rounded-xl px-3 text-[12px] font-bold font-['Lexend_Deca'] border-border/80 bg-white shadow-sm hover:border-accent gap-2 transition-all min-[1440px]:h-7 min-[1440px]:rounded-lg min-[1440px]:px-2 min-[1440px]:text-[11px]",
            active && "border-accent/40 text-accent bg-accent/5 ring-1 ring-accent/20",
            triggerClassName,
          )}
          aria-label="Filter by deal value"
        >
          <CircleDollarSign className="size-4 shrink-0 min-[1440px]:size-3.5" />
          <span className="truncate leading-none">
            {rangeLabel ?? "Deal Value"}
          </span>
          {active && (
            <X
              size={14}
              className="shrink-0 ml-0.5 hover:text-red-500 transition-colors"
              onClick={handleClear}
            />
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-[min(100vw-2rem,320px)] p-4 rounded-2xl shadow-premium border-border/40"
        align="start"
      >
        <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-3 font-['Lexend_Deca']">
          Deal value range
        </p>
        <div className="flex justify-between text-[11px] font-bold text-gray-600 font-['Lexend_Deca'] mb-2">
          <span>{formatDealValue(sliderValue[0])}</span>
          <span>{formatDealValue(sliderValue[1])}</span>
        </div>
        <Slider
          min={SLIDER_MIN}
          max={SLIDER_MAX}
          step={SLIDER_STEP}
          value={sliderValue}
          onValueChange={handleSliderChange}
          className="mb-4"
        />
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="w-full h-8 text-[12px] font-bold rounded-lg"
          onClick={() => handleClear()}
        >
          Clear range
        </Button>
      </PopoverContent>
    </Popover>
  );
}