'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { DepartmentTreeItem } from './DepartmentTreeItem';
import type { DepartmentTreeProps } from './types';
import { getAllDepartmentIds } from './types';

/**
 * 트리 구조 테이블 컨테이너
 */
export function DepartmentTree({
  departments,
  expandedIds,
  selectedIds,
  onToggleExpand,
  onToggleSelect,
  onToggleSelectAll,
  onAdd,
  onEdit,
  onDelete
}: DepartmentTreeProps) {
  const allIds = getAllDepartmentIds(departments);
  const isAllSelected = allIds.length > 0 && selectedIds.size === allIds.length;
  const isIndeterminate = selectedIds.size > 0 && selectedIds.size < allIds.length;

  return (
    <Card>
      <CardContent className="p-0">
        {/* 테이블 헤더 */}
        <div className="flex items-center px-4 py-3 border-b bg-muted/50">
          <div className="flex items-center gap-3 flex-1">
            <Checkbox
              checked={isIndeterminate ? 'indeterminate' : isAllSelected}
              onCheckedChange={onToggleSelectAll}
              aria-label="전체 선택"
            />
            <span className="font-medium text-sm">코드 / 부서명</span>
          </div>
        </div>

        {/* 트리 아이템 목록 */}
        <div className="divide-y">
          {departments.map(department => (
            <DepartmentTreeItem
              key={department.id}
              department={department}
              depth={0}
              expandedIds={expandedIds}
              selectedIds={selectedIds}
              onToggleExpand={onToggleExpand}
              onToggleSelect={onToggleSelect}
              onAdd={onAdd}
              onEdit={onEdit}
              onDelete={onDelete}
            />
          ))}
        </div>

        {/* 빈 상태 */}
        {departments.length === 0 && (
          <div className="text-center py-12 text-muted-foreground">
            등록된 부서가 없습니다
          </div>
        )}
      </CardContent>
    </Card>
  );
}