import { DoorOpen, Users } from 'lucide-react'
import Link from 'next/link'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface UserRoom {
  id: number
  name: string
  state: string
  users: number
  usersMax: number
}

interface UserRoomsProps {
  rooms: UserRoom[]
}

const stateColors: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
  open: 'default',
  locked: 'secondary',
  password: 'destructive',
  invisible: 'outline',
}

export function UserRooms({ rooms }: UserRoomsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <DoorOpen className="h-4 w-4" />
          Rooms ({rooms.length})
        </CardTitle>
      </CardHeader>
      <CardContent>
        {rooms.length === 0 ? (
          <p className="text-sm text-muted-foreground">This user doesn&apos;t own any rooms.</p>
        ) : (
          <div className="grid gap-2 sm:grid-cols-2">
            {rooms.map((room) => (
              <Link
                key={room.id}
                href={`/admin/rooms/${room.id}`}
                className="flex items-center gap-3 rounded-lg border px-3 py-2.5 hover:bg-muted/50 transition-colors"
              >
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{room.name}</p>
                  <div className="flex items-center gap-2 mt-0.5">
                    <Badge variant={stateColors[room.state] || 'outline'} className="text-[10px]">
                      {room.state}
                    </Badge>
                    <span className="text-xs text-muted-foreground flex items-center gap-1">
                      <Users className="h-3 w-3" />
                      {room.users}/{room.usersMax}
                    </span>
                  </div>
                </div>
                <span className="text-xs font-mono text-muted-foreground">#{room.id}</span>
              </Link>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}