'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, Lock, Trash2, UserX, UserCheck } from 'lucide-react';
import { Employee, UserStatus } from '../types';

interface EmployeeListProps {
  employees: Employee[];
  onViewDetail: (employee: Employee) => void;
  onEdit: (employee: Employee) => void;
  onResetPassword: (employee: Employee) => void;
  onToggleStatus: (employee: Employee) => void;
  onDelete: (id: string) => void;
}

export function EmployeeList({
  employees,
  onViewDetail,
  onEdit,
  onResetPassword,
  onToggleStatus,
  onDelete
}: EmployeeListProps) {
  const getStatusBadge = (status: UserStatus) => {
    switch (status) {
      case 'active':
        return <Badge className="bg-green-100 text-green-700">正常</Badge>;
      case 'frozen':
        return <Badge className="bg-gray-100 text-gray-700">已冻结</Badge>;
      case 'inactive':
        return <Badge className="bg-red-100 text-red-700">停用</Badge>;
      default:
        return <Badge>{status}</Badge>;
    }
  };

  return (
    <Card>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>姓名</TableHead>
            <TableHead>用户名</TableHead>
            <TableHead>电话</TableHead>
            <TableHead>部门</TableHead>
            <TableHead>职位</TableHead>
            <TableHead>角色</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {employees.length === 0 ? (
            <TableRow>
              <TableCell colSpan={8} className="text-center text-muted-foreground py-8">
                暂无数据
              </TableCell>
            </TableRow>
          ) : (
            employees.map((employee) => (
              <TableRow key={employee.id}>
                <TableCell>{employee.name}</TableCell>
                <TableCell className="text-muted-foreground">{employee.username}</TableCell>
                <TableCell>{employee.phone}</TableCell>
                <TableCell className="text-muted-foreground">{employee.department || '-'}</TableCell>
                <TableCell className="text-muted-foreground">{employee.position || '-'}</TableCell>
                <TableCell>
                  {employee.roles && employee.roles.length > 0
                    ? employee.roles.join(', ')
                    : '-'}
                </TableCell>
                <TableCell>{getStatusBadge(employee.status)}</TableCell>
                <TableCell>
                  <div className="flex gap-1">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onViewDetail(employee)}
                    >
                      <Eye className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onEdit(employee)}
                    >
                      <Edit className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onResetPassword(employee)}
                    >
                      <Lock className="w-4 h-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onToggleStatus(employee)}
                    >
                      {employee.status === 'active' ? (
                        <UserX className="w-4 h-4 text-orange-600" />
                      ) : (
                        <UserCheck className="w-4 h-4 text-green-600" />
                      )}
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onDelete(employee.id)}
                    >
                      <Trash2 className="w-4 h-4 text-destructive" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </Card>
  );
}