'use client';

import { useUser } from './user-context';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ROLE_LABELS } from '@/lib/constants';
import { User, Settings, Crown, Briefcase } from 'lucide-react';

const roleIcons = {
  owner: Crown,
  pm: Briefcase,
  member: User,
};

export function UserSwitcher() {
  const { currentUser, users, setCurrentUserId, isLoading } = useUser();

  if (isLoading || users.length === 0) {
    return null;
  }

  return (
    <div className="fixed bottom-4 left-4 z-50">
      <div className="bg-white rounded-lg shadow-lg border p-3 min-w-[220px]">
        <div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
          <Settings className="h-3 w-3" />
          <span>当前用户视角</span>
        </div>
        <Select value={currentUser?.id || ''} onValueChange={setCurrentUserId}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="选择用户" />
          </SelectTrigger>
          <SelectContent>
            {users.map((user) => {
              const Icon = roleIcons[user.role];
              return (
                <SelectItem key={user.id} value={user.id}>
                  <div className="flex items-center gap-2">
                    <Avatar className="h-6 w-6">
                      <AvatarFallback className="text-xs bg-slate-100">
                        {user.name.charAt(0)}
                      </AvatarFallback>
                    </Avatar>
                    <span>{user.name}</span>
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <Icon className="h-3 w-3" />
                      {ROLE_LABELS[user.role]}
                    </span>
                  </div>
                </SelectItem>
              );
            })}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}