'use client';

import React from 'react';
import { Card } from '@/components/ui/card';
import { Menu } from '../types';

interface MenuManagementStatsCardsProps {
  menus: Menu[];
}

export function MenuManagementStatsCards({ menus }: MenuManagementStatsCardsProps) {
  // 统计菜单数量
  const countMenus = (menus: Menu[]): { level1: number; level2: number; level3: number } => {
    let level1 = 0;
    let level2 = 0;
    let level3 = 0;

    menus.forEach(menu => {
      if (!menu.parentId) {
        level1++;
        if (menu.children) {
          menu.children.forEach(child => {
            level2++;
            if (child.children) {
              level3 += child.children.length;
            }
          });
        }
      }
    });

    return { level1, level2, level3 };
  };

  const stats = countMenus(menus);

  return (
    <div className="grid grid-cols-4 gap-4">
      <Card className="p-4">
        <div className="text-sm text-muted-foreground">一级菜单</div>
        <div className="mt-2 text-blue-600">{stats.level1}</div>
      </Card>
      <Card className="p-4">
        <div className="text-sm text-muted-foreground">二级菜单</div>
        <div className="mt-2 text-green-600">{stats.level2}</div>
      </Card>
      <Card className="p-4">
        <div className="text-sm text-muted-foreground">三级菜单</div>
        <div className="mt-2 text-purple-600">{stats.level3}</div>
      </Card>
      <Card className="p-4">
        <div className="text-sm text-muted-foreground">菜单总数</div>
        <div className="mt-2 text-orange-600">{stats.level1 + stats.level2 + stats.level3}</div>
      </Card>
    </div>
  );
}