"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Search } from "lucide-react";

const statusOptions = [
  { id: "processing", label: "Processing" },
  { id: "shipped", label: "Shipped" },
  { id: "delivered", label: "Delivered" },
  { id: "cancelled", label: "Cancelled" },
];

const timeOptions = [
  { id: "last30days", label: "Last 30 days" },
  { id: "last6months", label: "Last 6 months" },
  { id: "lastyear", label: "Last year" },
  { id: "alltime", label: "All time" },
];

export function OrderFilters() {
  const [search, setSearch] = useState("");
  const [selectedStatus, setSelectedStatus] = useState<string[]>([]);
  const [selectedTime, setSelectedTime] = useState<string>("last30days");

  const handleStatusChange = (id: string) => {
    setSelectedStatus((prev) =>
      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
    );
  };

  const handleTimeChange = (id: string) => {
    setSelectedTime(id);
  };

  return (
    <div className="space-y-4">
      <Card>
        <CardHeader className="pb-3">
          <CardTitle>Search</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search orders..."
              className="pl-8"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle>Status</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {statusOptions.map((option) => (
            <div className="flex items-center space-x-2" key={option.id}>
              <Checkbox
                id={`status-${option.id}`}
                checked={selectedStatus.includes(option.id)}
                onCheckedChange={() => handleStatusChange(option.id)}
              />
              <Label
                htmlFor={`status-${option.id}`}
                className="text-sm font-normal"
              >
                {option.label}
              </Label>
            </div>
          ))}
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle>Time Period</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {timeOptions.map((option) => (
            <div className="flex items-center space-x-2" key={option.id}>
              <Checkbox
                id={`time-${option.id}`}
                checked={selectedTime === option.id}
                onCheckedChange={() => handleTimeChange(option.id)}
              />
              <Label
                htmlFor={`time-${option.id}`}
                className="text-sm font-normal"
              >
                {option.label}
              </Label>
            </div>
          ))}
        </CardContent>
      </Card>

      <div className="flex flex-col space-y-2">
        <Button variant="default">Apply Filters</Button>
        <Button variant="outline">Reset Filters</Button>
      </div>
    </div>
  );
}