"use client";

import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { RiCalendarLine, RiFileExcelLine } from "@remixicon/react";
import type { Category } from "../types";

interface InventoryToolbarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  selectedCategory: string;
  onCategoryChange: (categoryId: string) => void;
  dateRangeValue: string;
  onDateRangeChange: (label: string) => void;
  onExport: () => void;
  categories: Category[];
}

const dateRangeOptions = [
  { value: "all", label: "All Time" },
  { value: "today", label: "Today" },
  { value: "yesterday", label: "Yesterday" },
  { value: "last-7", label: "Last 7 Days" },
  { value: "last-30", label: "Last 30 Days" },
  { value: "this-month", label: "This Month" },
  { value: "last-month", label: "Last Month" },
];

export default function InventoryToolbar({
  searchQuery,
  onSearchChange,
  selectedCategory,
  onCategoryChange,
  dateRangeValue,
  onDateRangeChange,
  onExport,
  categories,
}: InventoryToolbarProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-3">
      <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 name, SKU, or category…"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-8"
        />
      </div>

      <Select
        items={[
          { value: "all", label: "All Categories" },
          ...categories.map((category) => ({
            value: category.id,
            label: category.name,
          })),
        ]}
        onValueChange={(val) => onCategoryChange((val as string) ?? "all")}
        value={selectedCategory}
      >
        <SelectTrigger className="w-full sm:w-48">
          <SelectValue placeholder="All Categories" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">All Categories</SelectItem>
          {categories.map((category: Category) => (
            <SelectItem key={category.id} value={category.id}>
              {category.name}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select
        items={dateRangeOptions}
        onValueChange={(val) => onDateRangeChange((val as string) ?? "all")}
        value={dateRangeValue}
      >
        <SelectTrigger className="w-full sm:w-40">
          <RiCalendarLine className="h-4 w-4 mr-1.5" />
          <SelectValue placeholder="Date Range" />
        </SelectTrigger>
        <SelectContent>
          {dateRangeOptions.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" onClick={onExport}>
          <RiFileExcelLine className="h-4 w-4 mr-1.5" />
          Export
        </Button>
      </div>
    </div>
  );
}