'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  ChevronRight,
  ChevronDown,
  Folder,
  File,
  Plus,
  Edit,
  Trash2
} from 'lucide-react';
import { CategoryDictionary } from '../types';

interface CategoryTreeProps {
  categories: CategoryDictionary[];
  expandedIds: Set<string>;
  onToggleExpand: (id: string) => void;
  onAdd: (parent?: CategoryDictionary) => void;
  onEdit: (category: CategoryDictionary) => void;
  onDelete: (id: string) => void;
}

export function CategoryTree({
  categories,
  expandedIds,
  onToggleExpand,
  onAdd,
  onEdit,
  onDelete,
}: CategoryTreeProps) {
  const renderTree = (nodes: CategoryDictionary[], level: number = 0) => {
    return nodes.map(node => (
      <div key={node.id} style={{ marginLeft: `${level * 24}px` }}>
        <div className="flex items-center gap-2 py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg group">
          <div className="flex-1 flex items-center gap-2">
            {node.children && node.children.length > 0 ? (
              <button
                onClick={() => onToggleExpand(node.id)}
                className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
              >
                {expandedIds.has(node.id) ? (
                  <ChevronDown className="w-4 h-4" />
                ) : (
                  <ChevronRight className="w-4 h-4" />
                )}
              </button>
            ) : (
              <div className="w-6" />
            )}
            {node.children && node.children.length > 0 ? (
              <Folder className="w-4 h-4 text-yellow-600 dark:text-yellow-500" />
            ) : (
              <File className="w-4 h-4 text-gray-400 dark:text-gray-500" />
            )}
            <div className="flex-1">
              <div className="flex items-center gap-2">
                <span className="dark:text-gray-100">{node.name}</span>
                <Badge variant="outline" className="text-xs">{node.code}</Badge>
                {!node.isActive && (
                  <Badge variant="outline" className="text-xs text-red-600 dark:text-red-400">已停用</Badge>
                )}
              </div>
              {node.description && (
                <p className="text-xs text-muted-foreground dark:text-gray-400">{node.description}</p>
              )}
            </div>
          </div>
          <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onAdd(node)}
            >
              <Plus className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onEdit(node)}
            >
              <Edit className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="sm"
              onClick={() => onDelete(node.id)}
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        </div>
        {expandedIds.has(node.id) && node.children && renderTree(node.children, level + 1)}
      </div>
    ));
  };

  return (
    <Card className="p-4">
      <div className="min-h-[400px]">
        {categories.length === 0 ? (
          <div className="text-center text-muted-foreground py-12">
            暂无分类数据
          </div>
        ) : (
          renderTree(categories)
        )}
      </div>
    </Card>
  );
}