import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import api from '../api/axios';

function Picker() {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  const [activeSession, setActiveSession] = useState(null);
  const [allGames, setAllGames] = useState([]);
  const [selectedGame, setSelectedGame] = useState(null);
  const [loading, setLoading] = useState(true);
  const [picking, setPicking] = useState(false);
  const [error, setError] = useState('');

  // Filters
  const [playerCount, setPlayerCount] = useState('');
  const [drawingFilter, setDrawingFilter] = useState('both');
  const [lengthFilter, setLengthFilter] = useState('');
  const [familyFriendlyFilter, setFamilyFriendlyFilter] = useState('');

  // Manual game selection
  const [showManualSelect, setShowManualSelect] = useState(false);
  const [manualGameId, setManualGameId] = useState('');

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login');
      return;
    }
    loadData();
  }, [isAuthenticated, navigate]);

  const loadData = async () => {
    try {
      // Load active session or create one
      try {
        const sessionResponse = await api.get('/sessions/active');
        setActiveSession(sessionResponse.data);
      } catch (err) {
        // No active session, create one
        const newSession = await api.post('/sessions', {});
        setActiveSession(newSession.data);
      }

      // Load all games for manual selection
      const gamesResponse = await api.get('/games');
      setAllGames(gamesResponse.data);
    } catch (err) {
      setError('Failed to load session data');
    } finally {
      setLoading(false);
    }
  };

  const handlePickGame = async () => {
    if (!activeSession) return;

    setPicking(true);
    setError('');

    try {
      const response = await api.post('/pick', {
        sessionId: activeSession.id,
        playerCount: playerCount ? parseInt(playerCount) : undefined,
        drawing: drawingFilter !== 'both' ? drawingFilter : undefined,
        length: lengthFilter || undefined,
        familyFriendly: familyFriendlyFilter ? familyFriendlyFilter === 'yes' : undefined
      });

      setSelectedGame(response.data.game);
    } catch (err) {
      setError(err.response?.data?.error || 'Failed to pick a game');
      setSelectedGame(null);
    } finally {
      setPicking(false);
    }
  };

  const handleAcceptGame = async () => {
    if (!selectedGame || !activeSession) return;

    try {
      await api.post(`/sessions/${activeSession.id}/games`, {
        game_id: selectedGame.id,
        manually_added: false
      });

      // Reload data
      await loadData();
      setSelectedGame(null);
      setError('');
    } catch (err) {
      setError('Failed to add game to session');
    }
  };

  const handleAddManualGame = async () => {
    if (!manualGameId || !activeSession) return;

    try {
      await api.post(`/sessions/${activeSession.id}/games`, {
        game_id: parseInt(manualGameId),
        manually_added: true
      });

      // Reload data
      await loadData();
      setManualGameId('');
      setShowManualSelect(false);
      setError('');
    } catch (err) {
      setError('Failed to add game to session');
    }
  };

  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-xl text-gray-600">Loading...</div>
      </div>
    );
  }

  if (!activeSession) {
    return (
      <div className="max-w-4xl mx-auto">
        <div className="bg-red-100 border border-red-400 text-red-700 p-4 rounded">
          Failed to load or create session. Please try again.
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-6xl mx-auto">
      <h1 className="text-4xl font-bold mb-8 text-gray-800">Game Picker</h1>

      <div className="grid md:grid-cols-3 gap-6">
        {/* Filters Panel */}
        <div className="md:col-span-1">
          <div className="bg-white rounded-lg shadow-lg p-6">
            <h2 className="text-2xl font-semibold mb-4 text-gray-800">Filters</h2>

            <div className="space-y-4">
              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Player Count
                </label>
                <input
                  type="number"
                  min="1"
                  max="100"
                  value={playerCount}
                  onChange={(e) => setPlayerCount(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                  placeholder="Any"
                />
              </div>

              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Drawing Games
                </label>
                <select
                  value={drawingFilter}
                  onChange={(e) => setDrawingFilter(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <option value="both">Both</option>
                  <option value="only">Only Drawing</option>
                  <option value="exclude">No Drawing</option>
                </select>
              </div>

              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Game Length
                </label>
                <select
                  value={lengthFilter}
                  onChange={(e) => setLengthFilter(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <option value="">Any</option>
                  <option value="short">Short (≤15 min)</option>
                  <option value="medium">Medium (16-25 min)</option>
                  <option value="long">Long (>25 min)</option>
                </select>
              </div>

              <div>
                <label className="block text-gray-700 font-semibold mb-2">
                  Family Friendly
                </label>
                <select
                  value={familyFriendlyFilter}
                  onChange={(e) => setFamilyFriendlyFilter(e.target.value)}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <option value="">Any</option>
                  <option value="yes">Yes</option>
                  <option value="no">No</option>
                </select>
              </div>

              <button
                onClick={handlePickGame}
                disabled={picking}
                className="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400 disabled:cursor-not-allowed font-semibold text-lg"
              >
                {picking ? 'Rolling...' : '🎲 Roll the Dice'}
              </button>

              <button
                onClick={() => setShowManualSelect(!showManualSelect)}
                className="w-full bg-gray-600 text-white py-2 rounded-lg hover:bg-gray-700 transition"
              >
                {showManualSelect ? 'Cancel' : 'Manual Selection'}
              </button>
            </div>
          </div>
        </div>

        {/* Results Panel */}
        <div className="md:col-span-2">
          {error && (
            <div className="bg-red-100 border border-red-400 text-red-700 p-4 rounded mb-4">
              {error}
            </div>
          )}

          {selectedGame && (
            <div className="bg-white rounded-lg shadow-lg p-8 mb-6">
              <h2 className="text-3xl font-bold mb-4 text-gray-800">
                {selectedGame.title}
              </h2>
              <p className="text-xl text-gray-600 mb-4">{selectedGame.pack_name}</p>

              <div className="grid grid-cols-2 gap-4 mb-6">
                <div>
                  <span className="font-semibold text-gray-700">Players:</span>
                  <span className="ml-2 text-gray-600">
                    {selectedGame.min_players}-{selectedGame.max_players}
                  </span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Length:</span>
                  <span className="ml-2 text-gray-600">
                    {selectedGame.length_minutes ? `${selectedGame.length_minutes} min` : 'Unknown'}
                  </span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Type:</span>
                  <span className="ml-2 text-gray-600">
                    {selectedGame.game_type || 'N/A'}
                  </span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Family Friendly:</span>
                  <span className="ml-2 text-gray-600">
                    {selectedGame.family_friendly ? 'Yes' : 'No'}
                  </span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Play Count:</span>
                  <span className="ml-2 text-gray-600">{selectedGame.play_count}</span>
                </div>
                <div>
                  <span className="font-semibold text-gray-700">Popularity:</span>
                  <span className="ml-2 text-gray-600">
                    {selectedGame.popularity_score > 0 ? '+' : ''}
                    {selectedGame.popularity_score}
                  </span>
                </div>
              </div>

              <div className="flex gap-4">
                <button
                  onClick={handleAcceptGame}
                  className="flex-1 bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition font-semibold"
                >
                  ✓ Play This Game
                </button>
                <button
                  onClick={handlePickGame}
                  className="flex-1 bg-yellow-600 text-white py-3 rounded-lg hover:bg-yellow-700 transition font-semibold"
                >
                  🎲 Re-roll
                </button>
              </div>
            </div>
          )}

          {showManualSelect && (
            <div className="bg-white rounded-lg shadow-lg p-6 mb-6">
              <h3 className="text-xl font-semibold mb-4 text-gray-800">
                Manual Game Selection
              </h3>
              <div className="flex gap-4">
                <select
                  value={manualGameId}
                  onChange={(e) => setManualGameId(e.target.value)}
                  className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                >
                  <option value="">Select a game...</option>
                  {allGames.map((game) => (
                    <option key={game.id} value={game.id}>
                      {game.title} ({game.pack_name})
                    </option>
                  ))}
                </select>
                <button
                  onClick={handleAddManualGame}
                  disabled={!manualGameId}
                  className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 transition disabled:bg-gray-400"
                >
                  Add
                </button>
              </div>
            </div>
          )}

          {/* Session info and games */}
          <SessionInfo sessionId={activeSession.id} />
        </div>
      </div>
    </div>
  );
}

function SessionInfo({ sessionId }) {
  const [games, setGames] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadGames();
  }, [sessionId]);

  const loadGames = async () => {
    try {
      const response = await api.get(`/sessions/${sessionId}/games`);
      setGames(response.data);
    } catch (err) {
      console.error('Failed to load session games');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-lg p-6">
      <h3 className="text-xl font-semibold mb-4 text-gray-800">
        Games Played This Session ({games.length})
      </h3>
      {loading ? (
        <p className="text-gray-500">Loading...</p>
      ) : games.length === 0 ? (
        <p className="text-gray-500">No games played yet. Pick a game to get started!</p>
      ) : (
        <div className="space-y-2 max-h-96 overflow-y-auto">
          {games.map((game, index) => (
            <div key={game.id} className="flex items-center justify-between p-3 bg-gray-50 rounded">
              <div>
                <span className="font-semibold text-gray-700">
                  {index + 1}. {game.title}
                </span>
                <span className="text-gray-500 ml-2 text-sm">({game.pack_name})</span>
                {game.manually_added === 1 && (
                  <span className="ml-2 text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded">
                    Manual
                  </span>
                )}
              </div>
              <span className="text-sm text-gray-500">
                {new Date(game.played_at).toLocaleTimeString()}
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Picker;