"use client";

import { useEffect, useRef, useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { Filter } from "lucide-react";

export type OrderFilterStatus = "all" | "completed" | "pending" | "process";

export type OrderFilters = {
  homeDelivery: boolean;
  pickUp: boolean;
  status: OrderFilterStatus;
  customer: "all" | string;
  amountFrom: string;
  amountTo: string;
};

const defaultFilters = (): OrderFilters => ({
  homeDelivery: false,
  pickUp: false,
  status: "all",
  customer: "all",
  amountFrom: "0.00",
  amountTo: "0.00",
});

function parseOrderTotal(s: string): number {
  const cleaned = s.replace(/[^\d.]/g, "");
  const n = parseFloat(cleaned);
  return Number.isFinite(n) ? n : 0;
}

export function applyOrderFilters<
  T extends {
    orderType: string;
    status: string;
    customerName: string;
    orderTotal: string;
  },
>(rows: T[], filters: OrderFilters | null): T[] {
  if (!filters) return rows;
  let out = [...rows];
  const { homeDelivery, pickUp, status, customer, amountFrom, amountTo } = filters;

  if (homeDelivery !== pickUp) {
    if (homeDelivery) out = out.filter((r) => r.orderType === "Home Delivery");
    else out = out.filter((r) => r.orderType === "Pick Up");
  }

  if (status !== "all") out = out.filter((r) => r.status === status);
  if (customer !== "all") out = out.filter((r) => r.customerName === customer);

  const fromNum = parseFloat(amountFrom.replace(/,/g, "")) || 0;
  const toNum = parseFloat(amountTo.replace(/,/g, "")) || 0;
  if (fromNum > 0 || toNum > 0) {
    out = out.filter((r) => {
      const v = parseOrderTotal(r.orderTotal);
      if (fromNum > 0 && v < fromNum) return false;
      if (toNum > 0 && v > toNum) return false;
      return true;
    });
  }

  return out;
}

type OrdersFilterPanelProps = {
  customerNames: string[];
  onApply: (filters: OrderFilters) => void;
  className?: string;
};

export function OrdersFilterPanel({ customerNames, onApply, className }: OrdersFilterPanelProps) {
  const [open, setOpen] = useState(false);
  const [draft, setDraft] = useState<OrderFilters>(defaultFilters);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const close = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      /* Radix Select portals render outside this panel */
      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 handleApply = () => {
    onApply(draft);
    setOpen(false);
  };

  const fieldClass =
    "h-10 w-full rounded-md border border-[#E4E7EC] bg-white px-3 text-[12px] text-[#1C1D22] shadow-none focus-visible:ring-1 focus-visible:ring-[#003E6B]/25";

  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"
      >
        <Filter className="size-4" aria-hidden />
        Filters
      </Button>

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

          <div className="space-y-4">
            <div className="space-y-2.5">
              <Label className="text-[11px] font-medium text-[#98A2B3]">Order Type</Label>
              <div className="flex flex-wrap gap-5">
                <label className="flex cursor-pointer items-center gap-2">
                  <input
                    type="checkbox"
                    checked={draft.homeDelivery}
                    onChange={(e) => setDraft((d) => ({ ...d, homeDelivery: e.target.checked }))}
                    className="size-[15px] rounded border border-[#D0D5DD] text-[#003E6B] focus:ring-[#003E6B]"
                  />
                  <span className="text-[12px] text-[#344054]">Home Delivery</span>
                </label>
                <label className="flex cursor-pointer items-center gap-2">
                  <input
                    type="checkbox"
                    checked={draft.pickUp}
                    onChange={(e) => setDraft((d) => ({ ...d, pickUp: e.target.checked }))}
                    className="size-[15px] rounded border border-[#D0D5DD] text-[#003E6B] focus:ring-[#003E6B]"
                  />
                  <span className="text-[12px] text-[#344054]">Pick Up</span>
                </label>
              </div>
            </div>

            <div className="space-y-2">
              <Label className="text-[11px] font-medium text-[#98A2B3]">Status</Label>
              <Select
                value={draft.status}
                onValueChange={(v) =>
                  setDraft((d) => ({ ...d, status: v as OrderFilterStatus }))
                }
              >
                <SelectTrigger className={fieldClass}>
                  <SelectValue placeholder="All" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                  <SelectItem value="pending">Pending</SelectItem>
                  <SelectItem value="process">Process</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label className="text-[11px] font-medium text-[#98A2B3]">Customer</Label>
              <Select
                value={draft.customer}
                onValueChange={(v) => setDraft((d) => ({ ...d, customer: v }))}
              >
                <SelectTrigger className={fieldClass}>
                  <SelectValue placeholder="All" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  {customerNames.map((name) => (
                    <SelectItem key={name} value={name}>
                      {name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label className="text-[11px] font-medium text-[#98A2B3]">Amount</Label>
              <div className="grid grid-cols-2 gap-3">
                <div className="space-y-1">
                  <span className="text-[10px] font-medium text-[#98A2B3]">From</span>
                  <Input
                    type="text"
                    inputMode="decimal"
                    value={draft.amountFrom}
                    onChange={(e) => setDraft((d) => ({ ...d, amountFrom: e.target.value }))}
                    className={fieldClass}
                  />
                </div>
                <div className="space-y-1">
                  <span className="text-[10px] font-medium text-[#98A2B3]">To</span>
                  <Input
                    type="text"
                    inputMode="decimal"
                    value={draft.amountTo}
                    onChange={(e) => setDraft((d) => ({ ...d, amountTo: e.target.value }))}
                    className={fieldClass}
                  />
                </div>
              </div>
            </div>
          </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>
  );
}