'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>;
    }
  };

  const getAuditStatusBadge = (auditStatus?: string) => {
    switch (auditStatus) {
      case 'pending':
        return <Badge className="bg-yellow-100 text-yellow-700">待审核</Badge>;
      case 'approved':
        return <Badge className="bg-green-100 text-green-700">审核通过</Badge>;
      case 'rejected':
        return <Badge className="bg-red-100 text-red-700">已驳回</Badge>;
      default:
        return <Badge className="bg-gray-100 text-gray-700">未知</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 max-h-96 overflow-y-auto">
          {/* 基本信息 */}
          <div>
            <h4 className="mb-3 text-green-800">基本信息</h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>姓名</Label>
                <div className="mt-1 field-value-inline">{selectedEmployee.name}</div>
              </div>
              <div>
                <Label>用户名</Label>
                <div className="mt-1 field-value-inline">{selectedEmployee.username}</div>
              </div>
              <div>
                <Label>手机号</Label>
                <div className="mt-1 field-value-inline">{selectedEmployee.phone}</div>
              </div>
              <div>
                <Label>邮箱</Label>
                <div className="mt-1 field-value-inline">{selectedEmployee.email || '-'}</div>
              </div>
            </div>
          </div>

          {/* 工作信息 */}
          <div>
            <h4 className="mb-3 text-green-800">工作信息</h4>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>部门</Label>
                <div className="mt-1 field-value-inline">{selectedEmployee.department || '-'}</div>
              </div>
              <div>
                <Label>账号状态</Label>
                <div className="mt-1">{getStatusBadge(selectedEmployee.status)}</div>
              </div>
              <div>
                <Label>审核状态</Label>
                <div className="mt-1">{getAuditStatusBadge(selectedEmployee.auditStatus)}</div>
              </div>
              {selectedEmployee.auditReason && (
                <div>
                  <Label>审核意见</Label>
                  <div className="mt-1 field-value-inline">{selectedEmployee.auditReason}</div>
                </div>
              )}
              {selectedEmployee.auditor && (
                <div>
                  <Label>审核人</Label>
                  <div className="mt-1 field-value-inline">{selectedEmployee.auditor}</div>
                </div>
              )}
              {selectedEmployee.auditTime && (
                <div>
                  <Label>审核时间</Label>
                  <div className="mt-1 field-value-inline">{new Date(selectedEmployee.auditTime).toLocaleString('zh-CN')}</div>
                </div>
              )}
            </div>
          </div>

          {/* 角色权限 */}
          <div>
            <h4 className="mb-3 text-green-800">角色权限</h4>
            <div className="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>

          {/* 系统信息 */}
          <div>
            <h4 className="mb-3 text-green-800">系统信息</h4>
            <div className="grid grid-cols-2 gap-4">
              {selectedEmployee.lastLoginTime && (
                <div>
                  <Label>最后登录</Label>
                  <div className="mt-1 field-value-inline">
                    {new Date(selectedEmployee.lastLoginTime).toLocaleString('zh-CN')}
                  </div>
                </div>
              )}
              <div>
                <Label>创建时间</Label>
                <div className="mt-1 field-value-inline">
                  {new Date(selectedEmployee.createdAt).toLocaleString('zh-CN')}
                </div>
              </div>
              <div>
                <Label>更新时间</Label>
                <div className="mt-1 field-value-inline">
                  {new Date(selectedEmployee.updatedAt).toLocaleString('zh-CN')}
                </div>
              </div>
            </div>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}