/**
 * 採購單篩選器元件 - 獨立區塊設計
 */

import { useState } from "react";
import { Search, X, Filter, ChevronDown, ChevronUp } from "lucide-react";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import { DateFilter, type DateRange } from "../filters/DateFilter";

interface PurchaseOrderFiltersProps {
  searchQuery: string;
  statusFilter: string;
  requesterFilter: string;
  stores: string[];
  warehouses: string[];
  dateRange: DateRange | null;
  onSearchChange: (value: string) => void;
  onStatusChange: (value: string) => void;
  onRequesterChange: (value: string) => void;
  onDateRangeChange: (range: DateRange | null) => void;
  onClearFilters: () => void;
  hasActiveFilters: boolean;
}

export function PurchaseOrderFilters({
  searchQuery,
  statusFilter,
  requesterFilter,
  stores,
  warehouses,
  dateRange,
  onSearchChange,
  onStatusChange,
  onRequesterChange,
  onDateRangeChange,
  onClearFilters,
  hasActiveFilters,
}: PurchaseOrderFiltersProps) {
  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);

  return (
    <div className="bg-card rounded-lg border-2 border-border p-4 space-y-4">
      {/* 主要篩選列：搜尋 + 快速篩選 */}
      <div className="flex flex-col md:flex-row gap-4">
        {/* 搜尋框 - 佔據剩餘空間 */}
        <div className="flex-1 relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
          <Input
            placeholder="搜尋採購單編號"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="h-11 pl-10 border-2 border-input"
          />
        </div>

        {/* 右側篩選區 - 水平排列 */}
        <div className="flex flex-wrap gap-4 items-center">
          {/* 狀態篩選 */}
          <div className="flex items-center gap-2">
            <Filter className="h-4 w-4 text-muted-foreground hidden sm:block" />
            <Select value={statusFilter} onValueChange={onStatusChange}>
              <SelectTrigger className="w-[180px] h-11 border-2 border-input">
                <SelectValue placeholder="全部類型" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">全部狀態</SelectItem>
                <SelectItem value="draft">草稿</SelectItem>
                <SelectItem value="review_pending">待審核</SelectItem>
                <SelectItem value="processing">處理中</SelectItem>
                <SelectItem value="shipping">運送中</SelectItem>
                <SelectItem value="pending_confirm">待確認</SelectItem>
                <SelectItem value="completed">已完成</SelectItem>
                <SelectItem value="rejected">已退回</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* 申請單位篩選 */}
          <Select value={requesterFilter} onValueChange={onRequesterChange}>
            <SelectTrigger className="w-[180px] h-11 border-2 border-input">
              <SelectValue placeholder="全部申請單位" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">全部申請單位</SelectItem>

              {/* 全部門市 */}
              {stores.length > 0 && (
                <SelectItem value="all_stores">全部門市</SelectItem>
              )}

              {/* 全部倉庫 */}
              {warehouses.length > 0 && (
                <SelectItem value="all_warehouses">全部倉庫</SelectItem>
              )}

              {/* 分隔線 */}
              {(stores.length > 0 || warehouses.length > 0) && (
                <div className="h-px bg-border my-1" />
              )}

              {/* 各別門市 */}
              {stores.length > 0 && (
                <>
                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
                    門市
                  </div>
                  {stores.map((store) => (
                    <SelectItem key={store} value={store}>
                      {store}
                    </SelectItem>
                  ))}
                </>
              )}

              {/* 各別倉庫 */}
              {warehouses.length > 0 && (
                <>
                  {stores.length > 0 && <div className="h-px bg-border my-1" />}
                  <div className="px-2 py-1.5 text-xs text-muted-foreground">
                    倉庫
                  </div>
                  {warehouses.map((warehouse) => (
                    <SelectItem key={warehouse} value={warehouse}>
                      {warehouse}
                    </SelectItem>
                  ))}
                </>
              )}
            </SelectContent>
          </Select>

          {/* 進階篩選按鈕 */}
          <Button
            variant="outline"
            onClick={() => setShowAdvancedFilters(!showAdvancedFilters)}
            className="gap-2 button-outlined-primary h-11"
          >
            {showAdvancedFilters ? (
              <ChevronUp className="h-4 w-4" />
            ) : (
              <ChevronDown className="h-4 w-4" />
            )}
            <span className="hidden sm:inline">進階篩選</span>
          </Button>

          {/* 清除篩選按鈕 */}
          {hasActiveFilters && (
            <Button
              variant="outline"
              onClick={onClearFilters}
              className="gap-2 button-outlined-primary h-11"
            >
              <X className="h-4 w-4" />
              <span className="hidden sm:inline">清除篩選</span>
            </Button>
          )}
        </div>
      </div>

      {/* 進階篩選區 - 可展開/收合 */}
      {showAdvancedFilters && (
        <div className="pt-4 border-t-2 border-border">
          <DateFilter dateRange={dateRange} onDateRangeChange={onDateRangeChange} />
        </div>
      )}
    </div>
  );
}