import { useState } from 'react';

function TeamScores({ teams, myTeamId, isHost, onAdjustScore }) {
  const [editingTeam, setEditingTeam] = useState(null);
  const [adjustValue, setAdjustValue] = useState('');

  const handleAdjust = (teamId, amount) => {
    if (onAdjustScore) onAdjustScore(teamId, amount);
  };

  const handleCustomAdjust = (teamId) => {
    const val = parseInt(adjustValue);
    if (!isNaN(val) && val !== 0) {
      handleAdjust(teamId, val);
      setAdjustValue('');
      setEditingTeam(null);
    }
  };

  return (
    <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-2 md:gap-4 mb-4 md:mb-6">
      {teams.map((team, index) => {
        const isMe = team.id === myTeamId
        const colors = [
          'from-blue-600/30 to-blue-800/30 border-blue-400/30',
          'from-purple-600/30 to-purple-800/30 border-purple-400/30',
          'from-emerald-600/30 to-emerald-800/30 border-emerald-400/30',
          'from-amber-600/30 to-amber-800/30 border-amber-400/30',
          'from-rose-600/30 to-rose-800/30 border-rose-400/30',
          'from-cyan-600/30 to-cyan-800/30 border-cyan-400/30',
        ]
        const colorClass = colors[index % colors.length]

        return (
          <div
            key={team.id}
            className={`p-3 md:p-5 rounded-xl border backdrop-blur-sm transition-all duration-300 ${
              isMe
                ? 'bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border-blue-400/50 glow-blue scale-[1.02]'
                : `bg-gradient-to-br ${colorClass}`
            }`}
          >
            <h3 className="text-sm md:text-lg font-bold text-white mb-0.5 md:mb-1 truncate">
              {isMe && '⭐ '}{team.name}
            </h3>
            <p className="font-display text-xl md:text-3xl font-bold text-gradient-gold">{team.score}</p>
            <p className="text-[10px] md:text-xs text-gray-400">баллов</p>
            
            {isHost && (
              <div className="mt-2">
                {editingTeam === team.id ? (
                  <div className="flex flex-col gap-1.5">
                    <div className="flex gap-1">
                      {[-100, -50, 50, 100].map(val => (
                        <button key={val} onClick={() => handleAdjust(team.id, val)}
                          className={`flex-1 text-[10px] md:text-xs font-bold py-1 rounded-lg transition-all active:scale-90 ${
                            val < 0 
                              ? 'bg-red-500/30 hover:bg-red-500/50 text-red-300 border border-red-500/30' 
                              : 'bg-emerald-500/30 hover:bg-emerald-500/50 text-emerald-300 border border-emerald-500/30'
                          }`}>
                          {val > 0 ? '+' : ''}{val}
                        </button>
                      ))}
                    </div>
                    <div className="flex gap-1">
                      <input type="number" value={adjustValue} onChange={e => setAdjustValue(e.target.value)}
                        onKeyDown={e => e.key === 'Enter' && handleCustomAdjust(team.id)}
                        placeholder="±"
                        className="flex-1 bg-slate-800/80 border border-slate-600/50 rounded-lg px-2 py-1 text-xs text-white text-center focus:outline-none focus:border-blue-400 w-0" />
                      <button onClick={() => handleCustomAdjust(team.id)}
                        className="bg-blue-500/30 hover:bg-blue-500/50 text-blue-300 border border-blue-500/30 rounded-lg px-2 py-1 text-xs font-bold transition-all">
                        OK
                      </button>
                      <button onClick={() => { setEditingTeam(null); setAdjustValue(''); }}
                        className="bg-slate-600/30 hover:bg-slate-600/50 text-gray-300 border border-slate-500/30 rounded-lg px-2 py-1 text-xs transition-all">
                        ✕
                      </button>
                    </div>
                  </div>
                ) : (
                  <button onClick={() => setEditingTeam(team.id)}
                    className="w-full text-[10px] md:text-xs text-gray-400 hover:text-white bg-white/5 hover:bg-white/10 rounded-lg py-1 transition-all">
                    ✏️ Изменить
                  </button>
                )}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}

export default TeamScores