import { Battery, Cpu, MonitorSmartphone, Wifi, Usb, Radio } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import type { Device } from '../hooks/use-devices'

interface Props {
  device: Device
  isSelected: boolean
  isProfiled: boolean
  onSelect: (id: string) => void
  onProfile: (id: string | null) => void
  onDisconnect: (id: string) => void
}

const statusColor: Record<string, string> = {
  online: 'bg-green-500',
  offline: 'bg-zinc-500',
  unauthorized: 'bg-yellow-500',
  recovery: 'bg-orange-500',
}

export function DeviceCard({ device, isSelected, isProfiled, onSelect, onProfile, onDisconnect }: Props) {
  const isOnline = device.status === 'online'

  function handleProfileToggle(e: React.MouseEvent) {
    e.stopPropagation()
    onProfile(isProfiled ? null : device.id)
  }

  function handleDisconnect(e: React.MouseEvent) {
    e.stopPropagation()
    onDisconnect(device.id)
  }

  return (
    <div
      onClick={() => isOnline && onSelect(device.id)}
      className={[
        'rounded-lg border p-3 transition-colors',
        isOnline ? 'cursor-pointer hover:bg-accent' : 'opacity-60',
        isSelected ? 'border-primary bg-accent' : 'border-border',
      ].join(' ')}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="flex items-center gap-2.5 min-w-0">
          <MonitorSmartphone className="shrink-0 text-muted-foreground" size={18} />
          <div className="min-w-0">
            <p className="font-medium text-sm truncate">
              {device.model || device.product || device.id}
            </p>
            <p className="text-xs text-muted-foreground font-mono truncate">{device.id}</p>
          </div>
        </div>

        <div className="flex items-center gap-1.5 shrink-0">
          <span className={`inline-block w-2 h-2 rounded-full ${statusColor[device.status] ?? 'bg-zinc-500'}`} />
          <span className="text-xs text-muted-foreground capitalize">{device.status}</span>
        </div>
      </div>

      {isOnline && (
        <div className="mt-2.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
          <Badge variant="secondary" className="gap-1 text-[10px]">
            {device.connectionType === 'wifi' ? <Wifi size={9} /> : <Usb size={9} />}
            {device.connectionType.toUpperCase()}
          </Badge>
          {device.androidVersion && (
            <Badge variant="secondary" className="text-[10px]">Android {device.androidVersion}</Badge>
          )}
          {device.abi && (
            <Badge variant="secondary" className="gap-1 text-[10px]">
              <Cpu size={9} />
              {device.abi}
            </Badge>
          )}
          {device.batteryLevel > 0 && (
            <Badge variant="secondary" className="gap-1 text-[10px]">
              <Battery size={9} />
              {device.batteryLevel}%
            </Badge>
          )}
        </div>
      )}

      {device.status === 'unauthorized' && (
        <p className="mt-1.5 text-xs text-yellow-400">
          Accept the USB debugging prompt on device.
        </p>
      )}

      {isOnline && (
        <div className="mt-2.5 flex items-center justify-between gap-2">
          {/* Profile toggle */}
          <button
            onClick={handleProfileToggle}
            className={[
              'flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors',
              isProfiled
                ? 'bg-green-500/15 text-green-400 hover:bg-green-500/25'
                : 'text-muted-foreground hover:bg-accent hover:text-foreground',
            ].join(' ')}
          >
            <Radio size={11} className={isProfiled ? 'animate-pulse' : ''} />
            {isProfiled ? 'Profiling' : 'Profile'}
          </button>

          {device.connectionType === 'wifi' && (
            <Button
              variant="ghost"
              size="sm"
              className="h-6 px-2 text-xs text-destructive hover:text-destructive"
              onClick={handleDisconnect}
            >
              Disconnect
            </Button>
          )}
        </div>
      )}
    </div>
  )
}
