'use client';

import { useState } from 'react';
import { User, UserCircle, LogOut } from 'lucide-react';
import { useAuth } from '@/components/auth/AuthContext';
import { toast } from 'sonner';
import { Button } from './ui/button';
import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';

interface UserProfileProps {
  onProfileClick?: () => void;
}

export function UserProfile({ onProfileClick }: UserProfileProps) {
  const { user, logout } = useAuth();
  const [showUserMenu, setShowUserMenu] = useState(false);

  const handleProfileClick = () => {
    if (onProfileClick) {
      onProfileClick();
    }
  };

  const handleLogout = () => {
    setShowUserMenu(false);
    logout();
    toast.success('已安全退出登录');
  };

  return (
    <Popover open={showUserMenu} onOpenChange={setShowUserMenu}>
      <PopoverTrigger asChild>
        <Button variant="ghost" className="gap-2">
          <User className="w-5 h-5" />
          <span className="text-sm hidden md:inline">{user?.realName || '用户'}</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-72 p-0" align="end">
        <div className="p-4 border-b bg-gradient-to-r from-green-50 to-blue-50">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 bg-green-600 rounded-full flex items-center justify-center text-white">
              <UserCircle className="w-6 h-6" />
            </div>
            <div className="flex-1">
              <h4 className="mb-1">{user?.realName}</h4>
              <p className="text-xs text-muted-foreground">{user?.is_superuser ? '系统管理员' : '普通用户'}</p>
            </div>
          </div>
        </div>
        <div className="p-2">
          <div className="p-3 space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">用户名:</span>
              <span>{user?.username}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">手机号:</span>
              <span>{user?.phone}</span>
            </div>
            {user?.enterpriseName && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">所属企业:</span>
                <span className="truncate max-w-[140px]" title={user?.enterpriseName}>
                  {user?.enterpriseName}
                </span>
              </div>
            )}
            {user?.department && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">部门:</span>
                <span>{user?.department}</span>
              </div>
            )}
            {user?.lastLoginTime && (
              <div className="flex justify-between text-xs">
                <span className="text-muted-foreground">上次登录:</span>
                <span className="text-muted-foreground">{user?.lastLoginTime}</span>
              </div>
            )}
          </div>
          <div className="border-t pt-2 mt-2">
            <Button
              variant="ghost"
              className="w-full justify-start text-sm"
              onClick={() => {
                setShowUserMenu(false);
                handleProfileClick();
              }}
            >
              <User className="w-4 h-4 mr-2" />
              个人中心
            </Button>
            <Button
              variant="ghost"
              className="w-full justify-start text-sm text-red-600 hover:text-red-700 hover:bg-red-50"
              onClick={() => {
                setShowUserMenu(false);
                handleLogout();
              }}
            >
              <LogOut className="w-4 h-4 mr-2" />
              退出登录
            </Button>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}