/**
 * filekorolheader: 用户详情对话框组件 - 用户详细信息展示界面
 * 功能：用户详细信息展示、多标签页布局、状态和权限信息
 * 路径：/central-config/tenant/user-management/components/UserDetailDialog
 * 规范：遵循crop-x/docs/开发项目规范.md，使用shadcn/ui组件，TypeScript类型安全
 */

import { User } from '../types';
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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card } from '@/components/ui/card';
import { User, Mail, Phone, Calendar, Building, Shield, CheckCircle, XCircle, Clock } from 'lucide-react';

interface UserDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  user: User | null;
}

export function UserDetailDialog({
  open,
  onOpenChange,
  user
}: UserDetailDialogProps) {
  const getStatusBadge = (isActive: boolean) => {
    return isActive ? (
      <Badge className="bg-green-100 text-green-700">正常</Badge>
    ) : (
      <Badge className="bg-red-100 text-red-700">停用</Badge>
    );
  };

  const getRoleBadge = (isSuperuser: boolean) => {
    return isSuperuser ? (
      <Badge className="bg-purple-100 text-purple-700">超级管理员</Badge>
    ) : (
      <Badge className="bg-blue-100 text-blue-700">普通用户</Badge>
    );
  };

  const getVerifiedBadge = (isVerified: boolean) => {
    return isVerified ? (
      <Badge className="bg-green-100 text-green-700">已验证</Badge>
    ) : (
      <Badge variant="outline">未验证</Badge>
    );
  };

  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
      }).replace(/\//g, '-');
    } catch (error) {
      return dateString;
    }
  };

  if (!user) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="w-[80vw] max-w-4xl max-h-[90vh]">
        <DialogHeader>
          <div className="flex items-center justify-between pr-8">
            <DialogTitle>用户详情</DialogTitle>
            <div className="flex gap-2">
              {getRoleBadge(user.isSuperuser)}
              {getVerifiedBadge(user.isVerified)}
              {getStatusBadge(user.isActive)}
            </div>
          </div>
          <DialogDescription className="sr-only">
            查看用户的详细信息和权限
          </DialogDescription>
        </DialogHeader>

        <ScrollArea className="max-h-[calc(90vh-200px)]">
          <Tabs defaultValue="basic" className="space-y-4">
            <TabsList className="grid grid-cols-3 w-full">
              <TabsTrigger value="basic">
                <User className="w-4 h-4 mr-2" />
                基本信息
              </TabsTrigger>
              <TabsTrigger value="permissions">
                <Shield className="w-4 h-4 mr-2" />
                权限信息
              </TabsTrigger>
              <TabsTrigger value="activity">
                <Clock className="w-4 h-4 mr-2" />
                活动信息
              </TabsTrigger>
            </TabsList>

            {/* 基本信息 */}
            <TabsContent value="basic" className="space-y-4">
              <div className="flex items-center gap-4 mb-6">
                {user.avatarUrl ? (
                  <img
                    src={user.avatarUrl}
                    alt={user.username}
                    className="w-16 h-16 rounded-full"
                  />
                ) : (
                  <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
                    <User className="w-8 h-8 text-gray-500" />
                  </div>
                )}
                <div>
                  <h3 className="text-lg font-semibold">{user.displayName || user.fullName || user.username}</h3>
                  <p className="text-sm text-muted-foreground">@{user.username}</p>
                  <div className="flex gap-2 mt-2">
                    {getRoleBadge(user.isSuperuser)}
                    {getVerifiedBadge(user.isVerified)}
                    {getStatusBadge(user.isActive)}
                  </div>
                </div>
              </div>

              <div className="grid grid-cols-2 gap-6">
                <div>
                  <Label>用户名</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{user.username}</div>
                </div>
                <div>
                  <Label>显示名称</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
                    {user.displayName || user.fullName || '-'}
                  </div>
                </div>
                <div>
                  <Label>邮箱</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
                    <Mail className="w-4 h-4 text-muted-foreground" />
                    {user.email}
                  </div>
                </div>
                <div>
                  <Label>电话</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
                    <Phone className="w-4 h-4 text-muted-foreground" />
                    {user.phone || '-'}
                  </div>
                </div>
                <div>
                  <Label>所属企业</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md flex items-center gap-2">
                    <Building className="w-4 h-4 text-muted-foreground" />
                    {user.companyName || '-'}
                  </div>
                </div>
                <div>
                  <Label>权限范围</Label>
                  <div className="mt-1.5 p-3 bg-gray-50 rounded-md">
                    {user.scope === 'tenant' ? '租户级' : user.scope || '-'}
                  </div>
                </div>
                {user.departmentName && (
                  <div>
                    <Label>部门</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md">{user.departmentName}</div>
                  </div>
                )}
                {user.bio && (
                  <div className="col-span-2">
                    <Label>个人简介</Label>
                    <div className="mt-1.5 p-3 bg-gray-50 rounded-md min-h-[80px] whitespace-pre-wrap">
                      {user.bio}
                    </div>
                  </div>
                )}
              </div>
            </TabsContent>

            {/* 权限信息 */}
            <TabsContent value="permissions" className="space-y-4">
              <div className="space-y-6">
                <div>
                  <h4 className="font-semibold mb-4">系统权限</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <Card className="p-4">
                      <div className="flex items-center justify-between">
                        <span>超级管理员权限</span>
                        {user.isSuperuser ? (
                          <CheckCircle className="w-5 h-5 text-green-600" />
                        ) : (
                          <XCircle className="w-5 h-5 text-red-600" />
                        )}
                      </div>
                    </Card>
                    <Card className="p-4">
                      <div className="flex items-center justify-between">
                        <span>邮箱已验证</span>
                        {user.isVerified ? (
                          <CheckCircle className="w-5 h-5 text-green-600" />
                        ) : (
                          <XCircle className="w-5 h-5 text-orange-600" />
                        )}
                      </div>
                    </Card>
                  </div>
                </div>

                <div>
                  <h4 className="font-semibold mb-4">访问状态</h4>
                  <Card className="p-4">
                    <div className="flex items-center justify-between">
                      <span>账户状态</span>
                      {getStatusBadge(user.isActive)}
                    </div>
                  </Card>
                </div>

                {user.tenantId && (
                  <div>
                    <h4 className="font-semibold mb-4">关联信息</h4>
                    <div className="space-y-4">
                      <Card className="p-4">
                        <Label>租户ID</Label>
                        <div className="mt-1.5 text-sm font-mono bg-gray-100 p-2 rounded">
                          {user.tenantId}
                        </div>
                      </Card>
                      {user.departmentId && (
                        <Card className="p-4">
                          <Label>部门ID</Label>
                          <div className="mt-1.5 text-sm font-mono bg-gray-100 p-2 rounded">
                            {user.departmentId}
                          </div>
                        </Card>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </TabsContent>

            {/* 活动信息 */}
            <TabsContent value="activity" className="space-y-4">
              <div className="space-y-4">
                <div>
                  <h4 className="font-semibold mb-4">时间信息</h4>
                  <div className="grid grid-cols-2 gap-4">
                    <Card className="p-4">
                      <Label className="text-xs">创建时间</Label>
                      <div className="mt-1.5 text-sm">{formatDate(user.createdAt)}</div>
                    </Card>
                    <Card className="p-4">
                      <Label className="text-xs">更新时间</Label>
                      <div className="mt-1.5 text-sm">{formatDate(user.updatedAt)}</div>
                    </Card>
                    <Card className="p-4">
                      <Label className="text-xs">最后登录时间</Label>
                      <div className="mt-1.5 text-sm">
                        {user.lastLoginAt ? formatDate(user.lastLoginAt) : '从未登录'}
                      </div>
                    </Card>
                    <Card className="p-4">
                      <Label className="text-xs">账户状态</Label>
                      <div className="mt-1.5">
                        {getStatusBadge(user.isActive)}
                      </div>
                    </Card>
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </ScrollArea>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}