'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 {
  Menu as MenuIcon,
  Folder,
  FileCode,
  FileText,
  Plus,
  Edit,
  Trash2,
  ChevronRight,
  ChevronDown,
  Eye,
  EyeOff
} from 'lucide-react';
import { Menu, MenuType } from '../types';

interface MenuTreeProps {
  menus: Menu[];
  expandedIds: Set<string>;
  onToggleExpand: (id: string) => void;
  onExpandAll: () => void;
  onCollapseAll: () => void;
  onAdd: (parent?: Menu) => void;
  onEdit: (menu: Menu) => void;
  onDelete: (menu: Menu) => void;
}

export function MenuTree({
  menus,
  expandedIds,
  onToggleExpand,
  onExpandAll,
  onCollapseAll,
  onAdd,
  onEdit,
  onDelete
}: MenuTreeProps) {
  const getMenuIcon = (type: MenuType) => {
    switch (type) {
      case 'directory':
        return Folder;
      case 'menu':
        return FileCode;
      case 'button':
        return FileText;
      default:
        return MenuIcon;
    }
  };

  const getTypeBadge = (type: MenuType) => {
    switch (type) {
      case 'directory':
        return <Badge className="bg-blue-100 text-blue-700">目录</Badge>;
      case 'menu':
        return <Badge className="bg-green-100 text-green-700">菜单</Badge>;
      case 'button':
        return <Badge className="bg-purple-100 text-purple-700">按钮</Badge>;
      default:
        return <Badge>未知</Badge>;
    }
  };

  const getStatusBadge = (status: string) => {
    return status === 'active' ? (
      <Badge className="bg-green-100 text-green-700">启用</Badge>
    ) : (
      <Badge className="bg-gray-100 text-gray-700">停用</Badge>
    );
  };

  // 渲染菜单树
  const renderMenuTree = (items: Menu[], level: number = 0) => {
    return items.map((menu) => {
      const isExpanded = expandedIds.has(menu.id);
      const hasChildren = menu.children && menu.children.length > 0;
      const Icon = getMenuIcon(menu.type);
      const indent = level * 24;

      return (
        <div key={menu.id}>
          <div
            className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 mb-2"
            style={{ marginLeft: `${indent}px` }}
          >
            <div className="flex items-center gap-3 flex-1">
              {/* 展开/收起图标 */}
              <div className="w-5 flex items-center justify-center">
                {hasChildren ? (
                  <button
                    onClick={() => onToggleExpand(menu.id)}
                    className="hover:bg-gray-200 rounded p-0.5"
                  >
                    {isExpanded ? (
                      <ChevronDown className="w-4 h-4 text-gray-600" />
                    ) : (
                      <ChevronRight className="w-4 h-4 text-gray-600" />
                    )}
                  </button>
                ) : (
                  <div className="w-4" />
                )}
              </div>

              {/* 菜单图标 */}
              <Icon className="w-5 h-5 text-green-600" />

              {/* 菜单信息 */}
              <div className="flex-1">
                <div className="flex items-center gap-2">
                  <span>{menu.name}</span>
                  <span className="text-xs text-gray-500">({menu.code})</span>
                </div>
                {menu.path && (
                  <div className="text-xs text-gray-500 mt-0.5">{menu.path}</div>
                )}
              </div>

              {/* 状态标签 */}
              <div className="flex items-center gap-2">
                {getTypeBadge(menu.type)}
                {getStatusBadge(menu.status)}
                {menu.visible ? (
                  <Eye className="w-4 h-4 text-green-500" />
                ) : (
                  <EyeOff className="w-4 h-4 text-gray-400" />
                )}
                <span className="text-xs text-gray-500">排序: {menu.sort}</span>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className="flex items-center gap-1 ml-4">
              {/* 只有目录类型可以添加子菜单，且限制最多三级 */}
              {menu.type === 'directory' && level < 2 && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => onAdd(menu)}
                  title="添加子菜单"
                >
                  <Plus className="w-4 h-4 text-green-600" />
                </Button>
              )}
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onEdit(menu)}
                title="编辑"
              >
                <Edit className="w-4 h-4 text-blue-600" />
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => onDelete(menu)}
                title="删除"
              >
                <Trash2 className="w-4 h-4 text-red-600" />
              </Button>
            </div>
          </div>

          {/* 递归渲染子菜单 */}
          {hasChildren && isExpanded && (
            <div className="mt-2">
              {renderMenuTree(menu.children!, level + 1)}
            </div>
          )}
        </div>
      );
    });
  };

  return (
    <Card className="p-6">
      <div className="flex items-center justify-between mb-4">
        <h3>菜单结构</h3>
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onExpandAll}
          >
            展开全部
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={onCollapseAll}
          >
            收起全部
          </Button>
        </div>
      </div>

      <div className="space-y-2">
        {menus.length > 0 ? (
          renderMenuTree(menus)
        ) : (
          <div className="text-center py-8 text-gray-500">
            暂无菜单数据，点击上方按钮添加一级菜单
          </div>
        )}
      </div>
    </Card>
  );
}