import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Layout from '../components/Layout';
import { Modal, Input, Button } from '../components/ui';
import { useAuth } from '../lib/use-auth';

export default function Decks() {
  const { user } = useAuth();
  const router = useRouter();
  const [decks, setDecks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingDeck, setEditingDeck] = useState(null);
  const [newDeck, setNewDeck] = useState({
    name: '',
    description: '',
    format: 'Commander',
    is_public: false
  });

  const fetchDecks = async () => {
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch('/api/decks', {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        const data = await response.json();
        setDecks(data);
      } else {
        console.error('Failed to fetch decks');
      }
    } catch (error) {
      console.error('Error fetching decks:', error);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (user) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- load decks when user is available
      fetchDecks();
    }
  }, [user]);

;

  const handleCreateDeck = async (e) => {
    e.preventDefault();
    
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch('/api/decks', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(newDeck)
      });

      if (response.ok) {
        const createdDeck = await response.json();
        setDecks([createdDeck, ...decks]);
        setShowCreateModal(false);
        setNewDeck({ name: '', description: '', format: 'Commander', is_public: false });
        
        // Navigate to deck builder for the new deck
        router.push(`/deck-builder?deck=${createdDeck.id}`);
      } else {
        console.error('Failed to create deck');
      }
    } catch (error) {
      console.error('Error creating deck:', error);
    }
  };

  const handleEditDeck = async (e) => {
    e.preventDefault();
    
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`/api/decks/${editingDeck.id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify(editingDeck)
      });

      if (response.ok) {
        const updatedDeck = await response.json();
        setDecks(decks.map(deck => deck.id === updatedDeck.id ? updatedDeck : deck));
        setEditingDeck(null);
      } else {
        console.error('Failed to update deck');
      }
    } catch (error) {
      console.error('Error updating deck:', error);
    }
  };

  const handleDeleteDeck = async (deckId) => {
    if (!confirm('Are you sure you want to delete this deck? This action cannot be undone.')) {
      return;
    }

    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`/api/decks/${deckId}`, {
        method: 'DELETE',
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        setDecks(decks.filter(deck => deck.id !== deckId));
      } else {
        console.error('Failed to delete deck');
      }
    } catch (error) {
      console.error('Error deleting deck:', error);
    }
  };

  const getFormatIcon = (format) => {
    switch (format) {
      case 'Commander':
        return '⚔️';
      case 'Standard':
        return '🏆';
      case 'Modern':
        return '🔥';
      case 'Legacy':
        return '💎';
      default:
        return '🃏';
    }
  };

  const getFormatColor = (format) => {
    switch (format) {
      case 'Commander':
        return 'bg-purple-100 text-purple-800';
      case 'Standard':
        return 'bg-blue-100 text-blue-800';
      case 'Modern':
        return 'bg-red-100 text-red-800';
      case 'Legacy':
        return 'bg-yellow-100 text-yellow-800';
      default:
        return 'bg-gray-100 text-gray-800';
    }
  };

  if (!user) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="text-center">
            <h1 className="text-2xl font-bold mb-4">Please log in to view your decks</h1>
            <Link href="/login" className="text-accent-ember hover:underline">
              Go to Login
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  if (loading) {
    return (
      <Layout user={user}>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-accent-ember"></div>
        </div>
      </Layout>
    );
  }

  return (
    <Layout user={user}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Header */}
        <div className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-3xl font-bold text-text-primary">My Decks</h1>
            <p className="text-text-secondary mt-2">
              Build and manage your MTG decks
            </p>
          </div>
          <button
            onClick={() => setShowCreateModal(true)}
            className="bg-accent-ember text-white px-6 py-3 rounded-lg hover:bg-accent-ember-dark transition-colors"
          >
            Create New Deck
          </button>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <div className="bg-bg-secondary rounded-lg p-6">
            <div className="text-2xl font-bold text-text-primary">{decks.length}</div>
            <div className="text-text-secondary">Total Decks</div>
          </div>
          <div className="bg-bg-secondary rounded-lg p-6">
            <div className="text-2xl font-bold text-text-primary">
              {decks.filter(d => d.format === 'Commander').length}
            </div>
            <div className="text-text-secondary">Commander</div>
          </div>
          <div className="bg-bg-secondary rounded-lg p-6">
            <div className="text-2xl font-bold text-text-primary">
              {decks.filter(d => d.is_public).length}
            </div>
            <div className="text-text-secondary">Public</div>
          </div>
          <div className="bg-bg-secondary rounded-lg p-6">
            <div className="text-2xl font-bold text-text-primary">
              {decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
            </div>
            <div className="text-text-secondary">Total Cards</div>
          </div>
        </div>

        {/* Decks Grid */}
        {decks.length === 0 ? (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">🃏</div>
            <h3 className="text-xl font-semibold text-text-primary mb-2">No decks yet</h3>
            <p className="text-text-secondary mb-6">Create your first deck to get started</p>
            <button
              onClick={() => setShowCreateModal(true)}
              className="bg-accent-ember text-white px-6 py-3 rounded-lg hover:bg-accent-ember-dark transition-colors"
            >
              Create Your First Deck
            </button>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {decks.map((deck) => (
              <div key={deck.id} className="bg-bg-secondary rounded-lg p-6 hover:shadow-lg transition-shadow">
                <div className="flex justify-between items-start mb-4">
                  <div className="flex items-center space-x-2">
                    <span className="text-2xl">{getFormatIcon(deck.format)}</span>
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getFormatColor(deck.format)}`}>
                      {deck.format}
                    </span>
                  </div>
                  <div className="flex space-x-2">
                    <button
                      onClick={() => setEditingDeck({...deck})}
                      className="text-text-secondary hover:text-accent-ember transition-colors"
                    >
                      ✏️
                    </button>
                    <button
                      onClick={() => handleDeleteDeck(deck.id)}
                      className="text-text-secondary hover:text-red-500 transition-colors"
                    >
                      🗑️
                    </button>
                  </div>
                </div>

                <h3 className="text-xl font-bold text-text-primary mb-2">{deck.name}</h3>
                
                {deck.description && (
                  <p className="text-text-secondary text-sm mb-4 line-clamp-2">{deck.description}</p>
                )}

                <div className="flex justify-between items-center text-sm text-text-secondary mb-4">
                  <span>{deck.card_count || 0} cards</span>
                  {deck.is_public && <span className="text-green-600">Public</span>}
                </div>

                <div className="flex space-x-2">
                  <Link
                    href={`/deck-builder?deck=${deck.id}`}
                    className="flex-1 bg-accent-ember text-white text-center py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
                  >
                    Edit Deck
                  </Link>
                  <Link
                    href={`/deck/${deck.id}`}
                    className="flex-1 bg-bg-tertiary text-text-primary text-center py-2 rounded-lg hover:bg-bg-primary transition-colors"
                  >
                    View
                  </Link>
                </div>
              </div>
            ))}
          </div>
        )}

        <Modal
          open={showCreateModal}
          onClose={() => setShowCreateModal(false)}
          title="Create New Deck"
          size="md"
        >
          <form onSubmit={handleCreateDeck} className="space-y-4">
            <Input
              label="Deck Name *"
              required
              value={newDeck.name}
              onChange={(e) => setNewDeck({ ...newDeck, name: e.target.value })}
              placeholder="Enter deck name"
            />
            <div>
              <label
                className="block text-sm font-medium mb-2"
                style={{ color: 'var(--text-primary)' }}
                htmlFor="create-deck-format"
              >
                Format
              </label>
              <select
                id="create-deck-format"
                value={newDeck.format}
                onChange={(e) => setNewDeck({ ...newDeck, format: e.target.value })}
                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
              >
                <option value="Commander">Commander</option>
                <option value="Standard">Standard</option>
                <option value="Modern">Modern</option>
                <option value="Legacy">Legacy</option>
              </select>
            </div>
            <div>
              <label
                className="block text-sm font-medium mb-2"
                style={{ color: 'var(--text-primary)' }}
                htmlFor="create-deck-description"
              >
                Description
              </label>
              <textarea
                id="create-deck-description"
                value={newDeck.description}
                onChange={(e) => setNewDeck({ ...newDeck, description: e.target.value })}
                className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
                rows="3"
                placeholder="Describe your deck strategy..."
              />
            </div>
            <label className="flex items-center">
              <input
                type="checkbox"
                checked={newDeck.is_public}
                onChange={(e) => setNewDeck({ ...newDeck, is_public: e.target.checked })}
                className="mr-2"
                style={{ accentColor: 'var(--accent-ember)' }}
              />
              <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                Make deck public
              </span>
            </label>
            <div className="flex space-x-3 pt-2">
              <Button
                type="button"
                variant="secondary"
                onClick={() => setShowCreateModal(false)}
                className="flex-1"
              >
                Cancel
              </Button>
              <Button type="submit" variant="primary" className="flex-1">
                Create Deck
              </Button>
            </div>
          </form>
        </Modal>

        <Modal
          open={!!editingDeck}
          onClose={() => setEditingDeck(null)}
          title="Edit Deck"
          size="md"
        >
          {editingDeck && (
            <form onSubmit={handleEditDeck} className="space-y-4">
              <Input
                label="Deck Name *"
                required
                value={editingDeck.name}
                onChange={(e) =>
                  setEditingDeck({ ...editingDeck, name: e.target.value })
                }
              />
              <div>
                <label
                  className="block text-sm font-medium mb-2"
                  style={{ color: 'var(--text-primary)' }}
                  htmlFor="edit-deck-format"
                >
                  Format
                </label>
                <select
                  id="edit-deck-format"
                  value={editingDeck.format}
                  onChange={(e) =>
                    setEditingDeck({ ...editingDeck, format: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
                >
                  <option value="Commander">Commander</option>
                  <option value="Standard">Standard</option>
                  <option value="Modern">Modern</option>
                  <option value="Legacy">Legacy</option>
                </select>
              </div>
              <div>
                <label
                  className="block text-sm font-medium mb-2"
                  style={{ color: 'var(--text-primary)' }}
                  htmlFor="edit-deck-description"
                >
                  Description
                </label>
                <textarea
                  id="edit-deck-description"
                  value={editingDeck.description || ''}
                  onChange={(e) =>
                    setEditingDeck({ ...editingDeck, description: e.target.value })
                  }
                  className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
                  rows="3"
                />
              </div>
              <label className="flex items-center">
                <input
                  type="checkbox"
                  checked={editingDeck.is_public}
                  onChange={(e) =>
                    setEditingDeck({ ...editingDeck, is_public: e.target.checked })
                  }
                  className="mr-2"
                  style={{ accentColor: 'var(--accent-ember)' }}
                />
                <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                  Make deck public
                </span>
              </label>
              <div className="flex space-x-3 pt-2">
                <Button
                  type="button"
                  variant="secondary"
                  onClick={() => setEditingDeck(null)}
                  className="flex-1"
                >
                  Cancel
                </Button>
                <Button type="submit" variant="primary" className="flex-1">
                  Save Changes
                </Button>
              </div>
            </form>
          )}
        </Modal>
      </div>
    </Layout>
  );
}