'use client';

import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Search, Plus, Trash2 } from 'lucide-react';
import type { DepartmentToolbarProps } from './types';

/**
 * 검색 + 필터 + 추가/삭제 버튼 툴바
 */
export function DepartmentToolbar({
  totalCount,
  selectedCount,
  searchQuery,
  onSearchChange,
  statusFilter,
  onStatusFilterChange,
  onAdd,
  onDelete,
}: DepartmentToolbarProps) {
  return (
    <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
      {/* 검색 + 필터 */}
      <div className="flex items-center gap-2 w-full sm:w-auto">
        {/* 검색창 */}
        <div className="relative flex-1 sm:w-64">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="부서명, 코드 검색"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            className="pl-9"
          />
        </div>

        {/* 상태 필터 */}
        <Select
          value={statusFilter}
          onValueChange={(value) => onStatusFilterChange(value as 'all' | 'active' | 'inactive')}
        >
          <SelectTrigger className="w-28 shrink-0">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">전체</SelectItem>
            <SelectItem value="active">활성</SelectItem>
            <SelectItem value="inactive">비활성</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 선택 카운트 + 버튼 */}
      <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
        <span className="text-sm text-muted-foreground whitespace-nowrap">
          전체 {totalCount}건
          {selectedCount > 0 && (
            <> / <span className="text-primary font-medium">{selectedCount}개 선택</span></>
          )}
        </span>
        {selectedCount > 0 && (
          <Button
            size="sm"
            variant="destructive"
            onClick={onDelete}
          >
            <Trash2 className="h-4 w-4 mr-1" />
            선택삭제
          </Button>
        )}
        <Button size="sm" onClick={onAdd}>
          <Plus className="h-4 w-4 mr-1" />
          추가
        </Button>
      </div>
    </div>
  );
}
