"use client"

import * as React from "react"
import { X, UserCircle } from "lucide-react"
import { cn } from "@/lib/utils"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"

export interface User {
  id: string
  name: string
  avatar?: string
}

export interface UserSelectorProps {
  users: User[]
  value?: string
  onChange: (userId: string) => void
  placeholder: string
  className?: string
}

export function UserSelector({
  users,
  value,
  onChange,
  placeholder,
  className,
}: UserSelectorProps) {
  const selectedUser = users.find((user) => user.id === value)

  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation()
    onChange("")
  }

  return (
    <div className="relative">
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger className={cn("w-full", className)}>
          <SelectValue placeholder={placeholder}>
            {selectedUser && (
              <div className="flex items-center gap-2">
                <Avatar className="size-6">
                  {selectedUser.avatar && (
                    <AvatarImage src={selectedUser.avatar} alt={selectedUser.name} />
                  )}
                  <AvatarFallback />
                </Avatar>
                <span className="truncate">{selectedUser.name}</span>
              </div>
            )}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {users.map((user) => (
            <SelectItem key={user.id} value={user.id}>
              <div className="flex items-center gap-2">
                <Avatar className="size-6">
                  {user.avatar && (
                    <AvatarImage src={user.avatar} alt={user.name} />
                  )}
                  <AvatarFallback />
                </Avatar>
                <span className="truncate">{user.name}</span>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      {value && (
        <button
          type="button"
          onClick={handleClear}
          className="absolute end-10 top-1/2 -translate-y-1/2 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
          aria-label="Clear selection"
        >
          <X className="size-4" />
        </button>
      )}
    </div>
  )
}