import { useActiveSessionStore } from '../../stores/activeSessionStore';

const PRESETS = [60, 90, 120, 180];

export function RestTimer() {
  const { timerSeconds, timerTarget, startTimer, stopTimer } = useActiveSessionStore();
  const isRunning = timerSeconds > 0;

  const progress = timerTarget > 0 ? ((timerTarget - timerSeconds) / timerTarget) * 100 : 0;

  const formatTime = (s: number) => {
    const mins = Math.floor(s / 60);
    const secs = s % 60;
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  };

  return (
    <div className="bg-gray-900 border border-gray-800 rounded-xl p-4">
      <h3 className="text-sm font-semibold text-gray-400 mb-3">Pause-Timer</h3>

      {isRunning ? (
        <div className="text-center space-y-3">
          <div className="text-4xl font-bold text-blue-400 font-mono">
            {formatTime(timerSeconds)}
          </div>
          <div className="w-full bg-gray-800 rounded-full h-2">
            <div
              className="bg-blue-500 h-2 rounded-full transition-all duration-1000"
              style={{ width: `${progress}%` }}
            />
          </div>
          <button
            onClick={stopTimer}
            className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-gray-200 min-h-[44px]"
          >
            Stopp
          </button>
        </div>
      ) : (
        <div className="flex flex-wrap gap-2 justify-center">
          {PRESETS.map((s) => (
            <button
              key={s}
              onClick={() => startTimer(s)}
              className="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg text-gray-200 min-h-[44px] min-w-[44px] font-mono"
            >
              {formatTime(s)}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
