'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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Eye, Edit, Trash2, Shield } from 'lucide-react';
import { Role, RoleType } from '../types';

interface RoleListProps {
  roles: Role[];
  onViewDetail: (role: Role) => void;
  onEdit: (role: Role) => void;
  onDelete: (id: string) => void;
}

export function RoleList({
  roles,
  onViewDetail,
  onEdit,
  onDelete
}: RoleListProps) {
  const getRoleTypeBadge = (type: RoleType) => {
    return type === 'system' ? (
      <Badge className="bg-blue-100 text-blue-700">系统角色</Badge>
    ) : (
      <Badge className="bg-green-100 text-green-700">自定义</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>
    );
  };

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>角色名称</TableHead>
            <TableHead>角色代码</TableHead>
            <TableHead>角色描述</TableHead>
            <TableHead>类型</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>创建时间</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {roles.length === 0 ? (
            <TableRow>
              <TableCell colSpan={7} className="text-center text-muted-foreground py-8">
                暂无数据
              </TableCell>
            </TableRow>
          ) : (
            roles.map((role) => (
              <TableRow key={role.id}>
                <TableCell>
                  <div className="flex items-center gap-2">
                    <Shield className="w-4 h-4 text-muted-foreground" />
                    {role.name}
                  </div>
                </TableCell>
                <TableCell className="text-muted-foreground">{role.code}</TableCell>
                <TableCell className="text-muted-foreground max-w-xs truncate">
                  {role.description}
                </TableCell>
                <TableCell>{getRoleTypeBadge(role.type)}</TableCell>
                <TableCell>{getStatusBadge(role.status)}</TableCell>
                <TableCell className="text-muted-foreground">
                  {new Date(role.createdAt).toLocaleDateString('zh-CN')}
                </TableCell>
                <TableCell>
                  <div className="flex gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onViewDetail(role)}
                    >
                      <Eye className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onEdit(role)}
                    >
                      <Edit className="w-4 h-4" />
                    </Button>
                    {role.type === 'custom' && (
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => onDelete(role.id)}
                      >
                        <Trash2 className="w-4 h-4 text-destructive" />
                      </Button>
                    )}
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  );
}