import { useState } from 'react'

export default function ServerCard({ server, onClick }) {
  const [isHovered, setIsHovered] = useState(false)

  const formatUptime = (seconds) => {
    const hours = Math.floor(seconds / 3600)
    if (hours > 24) {
      const days = Math.floor(hours / 24)
      return days + 'd ' + (hours % 24) + 'h'
    }
    const minutes = Math.floor((seconds % 3600) / 60)
    return hours + 'h ' + minutes + 'm'
  }

  const cpuPercent = Math.min(server.metrics.cpu, 100)
  const memPercent = Math.min(server.metrics.memory, 100)

  return (
    <div
      className="card-matrix rounded-lg p-6 cursor-pointer transition-all duration-300 border border-[#00ff41]/30 hover:border-[#00ff41]/60 hover:bg-[#00ff41]/5"
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-5">
        <h2 className="text-xl font-bold text-[#00ff41] font-mono">
          {server.name.toUpperCase()}
        </h2>
        <div className="flex items-center gap-2">
          <span className={`w-2 h-2 rounded-full ${server.running ? 'status-online' : 'status-offline'}`} />
          <span className={`text-sm font-mono ${server.running ? 'text-[#00ff41]' : 'text-red-500'}`}>
            {server.running ? 'ONLINE' : 'OFFLINE'}
          </span>
        </div>
      </div>

      {/* CPU & RAM Bars */}
      <div className="space-y-4 mb-5">
        {/* CPU */}
        <div>
          <div className="flex justify-between text-sm font-mono mb-1">
            <span className="text-[#00ff41]/60">CPU</span>
            <span className="text-[#00ff41]">{server.metrics.cpu.toFixed(1)}%</span>
          </div>
          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
            <div
              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
              style={{ width: cpuPercent + '%', boxShadow: '0 0 8px #00ff41' }}
            />
          </div>
        </div>

        {/* RAM */}
        <div>
          <div className="flex justify-between text-sm font-mono mb-1">
            <span className="text-[#00ff41]/60">RAM</span>
            <span className="text-[#00ff41]">
              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
            </span>
          </div>
          <div className="h-2 bg-black/50 rounded-full border border-[#00ff41]/20">
            <div
              className="h-full rounded-full bg-gradient-to-r from-[#008f11] to-[#00ff41] transition-all duration-500"
              style={{ width: memPercent + '%', boxShadow: '0 0 8px #00ff41' }}
            />
          </div>
        </div>
      </div>

      {/* Stats Row */}
      <div className="flex justify-between font-mono text-sm border-t border-[#00ff41]/20 pt-4">
        <div className="text-center">
          <div className="text-[#00ff41] text-lg font-bold">{server.players.online}</div>
          <div className="text-[#00ff41]/50 text-xs">PLAYERS</div>
        </div>
        {server.running && (
          <div className="text-center">
            <div className="text-[#00ff41] text-lg font-bold">{formatUptime(server.metrics.uptime)}</div>
            <div className="text-[#00ff41]/50 text-xs">UPTIME</div>
          </div>
        )}
        <div className="text-center">
          <div className="text-[#00ff41] text-lg font-bold">{server.metrics.cpuCores}</div>
          <div className="text-[#00ff41]/50 text-xs">CORES</div>
        </div>
      </div>

      {/* Players List */}
      {server.players?.list?.length > 0 && (
        <div className="mt-4 pt-4 border-t border-[#00ff41]/20">
          <div className="flex flex-wrap gap-2">
            {server.players.list.map((player, i) => (
              <span key={i} className="bg-[#00ff41]/10 text-[#00ff41] px-2 py-1 rounded font-mono text-xs">
                {player}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Click Indicator */}
      <div className={`mt-4 text-center text-[#00ff41]/40 text-xs font-mono transition-opacity duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
        CLICK FOR DETAILS
      </div>
    </div>
  )
}