export default function ServerCard({ server, onClick }) {
  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)

  const getProgressColor = (percent) => {
    if (percent > 80) return 'progress-bar-danger'
    if (percent > 60) return 'progress-bar-warning'
    return 'progress-bar-success'
  }

  return (
    <div
      className="card card-clickable p-5"
      onClick={onClick}
    >
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-white">
          {server.name}
        </h3>
        <span className={server.running ? 'badge badge-success' : 'badge badge-destructive'}>
          {server.running ? 'Online' : 'Offline'}
        </span>
      </div>

      {/* Metrics */}
      <div className="space-y-3">
        {/* CPU */}
        <div>
          <div className="flex justify-between text-sm mb-1">
            <span className="text-neutral-400">CPU</span>
            <span className="text-white">{server.metrics.cpu.toFixed(1)}%</span>
          </div>
          <div className="progress">
            <div
              className={'progress-bar ' + getProgressColor(cpuPercent)}
              style={{ width: cpuPercent + '%' }}
            />
          </div>
        </div>

        {/* RAM */}
        <div>
          <div className="flex justify-between text-sm mb-1">
            <span className="text-neutral-400">Memory</span>
            <span className="text-white">
              {server.metrics.memoryUsed?.toFixed(1) || 0} / {server.metrics.memoryTotal?.toFixed(1) || 0} {server.metrics.memoryUnit}
            </span>
          </div>
          <div className="progress">
            <div
              className={'progress-bar ' + getProgressColor(memPercent)}
              style={{ width: memPercent + '%' }}
            />
          </div>
        </div>
      </div>

      {/* Footer Stats */}
      <div className="flex items-center justify-between mt-4 pt-4 border-t border-neutral-800 text-sm">
        <div className="text-neutral-400">
          <span className="text-white font-medium">{server.players.online}</span>
          {server.players.max ? ' / ' + server.players.max : ''} players
        </div>
        {server.running && (
          <div className="text-neutral-400">
            Uptime: <span className="text-white">{formatUptime(server.metrics.uptime)}</span>
          </div>
        )}
      </div>

      {/* Players List */}
      {server.players?.list?.length > 0 && (
        <div className="mt-3 pt-3 border-t border-neutral-800">
          <div className="flex flex-wrap gap-1.5">
            {server.players.list.map((player, i) => (
              <span key={i} className="badge badge-secondary">
                {player}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}