"use client";

import { Search, RotateCcw } from "lucide-react";
import { RiDownloadLine } from "@remixicon/react";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { dateRangePresets } from "../data/orders-data";
import { orderStatusLabels } from "../data/orders-data";
import type { OrderStatus, PaymentStatus, FulfillmentStatus } from "../types";

interface OrdersToolbarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  orderStatus: string;
  onOrderStatusChange: (value: string) => void;
  paymentStatus: string;
  onPaymentStatusChange: (value: string) => void;
  fulfillmentStatus: string;
  onFulfillmentStatusChange: (value: string) => void;
  dateRange: string;
  onDateRangeChange: (value: string) => void;
  onExport: () => void;
  onReset: () => void;
  hasActiveFilters: boolean;
}

const paymentStatusOptions: {
  value: PaymentStatus | "all";
  label: string;
}[] = [
  { value: "all", label: "All Payments" },
  { value: "paid", label: "Paid" },
  { value: "pending", label: "Pending" },
  { value: "failed", label: "Failed" },
  { value: "refunded", label: "Refunded" },
  { value: "partial-refund", label: "Partially Refunded" },
];

const fulfillmentStatusOptions: {
  value: FulfillmentStatus | "all";
  label: string;
}[] = [
  { value: "all", label: "All Fulfillment" },
  { value: "unfulfilled", label: "Unfulfilled" },
  { value: "partially-fulfilled", label: "Partially Fulfilled" },
  { value: "fulfilled", label: "Fulfilled" },
  { value: "cancelled", label: "Cancelled" },
];

export default function OrdersToolbar({
  searchQuery,
  onSearchChange,
  orderStatus,
  onOrderStatusChange,
  paymentStatus,
  onPaymentStatusChange,
  fulfillmentStatus,
  onFulfillmentStatusChange,
  dateRange,
  onDateRangeChange,
  onExport,
  onReset,
  hasActiveFilters,
}: OrdersToolbarProps) {
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-3 lg:flex-row lg:items-center">
        {/* Search */}
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search by order ID, customer name, or email…"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-8"
          />
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <Button variant="outline" size="sm" onClick={onExport}>
            <RiDownloadLine className="h-4 w-4 mr-1.5" />
            Export
          </Button>
          {hasActiveFilters && (
            <Button variant="ghost" size="sm" onClick={onReset}>
              <RotateCcw className="h-4 w-4 mr-1.5" />
              Reset
            </Button>
          )}
        </div>
      </div>

      {/* Filters */}
      <div className="flex flex-wrap items-center gap-2">
        <Select
          items={[
            { value: "all", label: "All Statuses" },
            ...(Object.keys(orderStatusLabels) as OrderStatus[]).map(
              (status) => ({
                value: status,
                label: orderStatusLabels[status],
              }),
            ),
          ]}
          value={orderStatus}
          onValueChange={(val) => onOrderStatusChange((val as string) ?? "all")}
        >
          <SelectTrigger className="w-full sm:w-44">
            <SelectValue placeholder="All Statuses" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Statuses</SelectItem>
            {(Object.keys(orderStatusLabels) as OrderStatus[]).map((status) => (
              <SelectItem key={status} value={status}>
                {orderStatusLabels[status]}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select
          items={paymentStatusOptions}
          value={paymentStatus}
          onValueChange={(val) =>
            onPaymentStatusChange((val as string) ?? "all")
          }
        >
          <SelectTrigger className="w-full sm:w-44">
            <SelectValue placeholder="All Payments" />
          </SelectTrigger>
          <SelectContent>
            {paymentStatusOptions.map((option) => (
              <SelectItem key={option.label} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select
          items={fulfillmentStatusOptions}
          value={fulfillmentStatus}
          onValueChange={(val) =>
            onFulfillmentStatusChange((val as string) ?? "all")
          }
        >
          <SelectTrigger className="w-full sm:w-48">
            <SelectValue placeholder="All Fulfillment" />
          </SelectTrigger>
          <SelectContent>
            {fulfillmentStatusOptions.map((option) => (
              <SelectItem key={option.label} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>

        <Select
          items={dateRangePresets}
          value={dateRange}
          onValueChange={(val) => onDateRangeChange((val as string) ?? "all")}
        >
          <SelectTrigger className="w-full sm:w-40">
            <SelectValue placeholder="All Time" />
          </SelectTrigger>
          <SelectContent>
            {dateRangePresets.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}