'use client';

import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Employee, UserStatus } from '../types';

interface EmployeeDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedEmployee: Employee | null;
}

export function EmployeeDetailDialog({
  open,
  onOpenChange,
  selectedEmployee
}: EmployeeDetailDialogProps) {
  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>;
    }
  };

  if (!selectedEmployee) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>员工详情</DialogTitle>
          <DialogDescription className="sr-only">
            查看员工的详细信息
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label>姓名</Label>
              <div className="mt-1">{selectedEmployee.name}</div>
            </div>
            <div>
              <Label>用户名</Label>
              <div className="mt-1">{selectedEmployee.username}</div>
            </div>
            <div>
              <Label>电话</Label>
              <div className="mt-1">{selectedEmployee.phone}</div>
            </div>
            <div>
              <Label>邮箱</Label>
              <div className="mt-1">{selectedEmployee.email || '-'}</div>
            </div>
            <div>
              <Label>部门</Label>
              <div className="mt-1">{selectedEmployee.department || '-'}</div>
            </div>
            <div>
              <Label>职位</Label>
              <div className="mt-1">{selectedEmployee.position || '-'}</div>
            </div>
            <div>
              <Label>状态</Label>
              <div className="mt-1">{getStatusBadge(selectedEmployee.status)}</div>
            </div>
            <div className="col-span-2">
              <Label>角色</Label>
              <div className="mt-1 flex flex-wrap gap-2">
                {selectedEmployee.roles && selectedEmployee.roles.length > 0 ? (
                  selectedEmployee.roles.map((role, index) => (
                    <Badge key={index} className="bg-purple-100 text-purple-700">
                      {role}
                    </Badge>
                  ))
                ) : (
                  <span className="text-muted-foreground">未分配角色</span>
                )}
              </div>
            </div>
            {selectedEmployee.lastLoginTime && (
              <div>
                <Label>最后登录</Label>
                <div className="mt-1">
                  {new Date(selectedEmployee.lastLoginTime).toLocaleString('zh-CN')}
                </div>
              </div>
            )}
            <div>
              <Label>创建时间</Label>
              <div className="mt-1">
                {new Date(selectedEmployee.createdAt).toLocaleString('zh-CN')}
              </div>
            </div>
            <div>
              <Label>更新时间</Label>
              <div className="mt-1">
                {new Date(selectedEmployee.updatedAt).toLocaleString('zh-CN')}
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}