deckhearth/pages/deck-builder.js

/* eslint-disable @next/next/no-img-element -- External or generated image URLs; next/image migration is out of scope. */
import { useState, useEffect, useRef } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Layout from '../components/Layout';
import DeckBuilderCardBrowser from '../components/DeckBuilderCardBrowser';
import DeckBuilderDeckList from '../components/DeckBuilderDeckList';
import DeckBuilderStatsBar from '../components/DeckBuilderStatsBar';
import { useAuth } from '../lib/use-auth';
import { computeDeckStats, isBasicLand } from '../lib/deck-builder-stats';

export default function DeckBuilder() {
  const { user } = useAuth();
  const router = useRouter();
  const { deck: deckId } = router.query;
  
  const [deck, setDeck] = useState(null);
  const [deckCards, setDeckCards] = useState([]);
  const [searchResults, setSearchResults] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [loading, setLoading] = useState(true);
  const [searchLoading, setSearchLoading] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [selectedCard, setSelectedCard] = useState(null);
  const [showFilters, setShowFilters] = useState(false);
  const [showSettings, setShowSettings] = useState(false);
  const [viewMode, setViewMode] = useState('list'); // 'list' or 'thumbnail'
  const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
  const [filters, setFilters] = useState({
    colors: [],
    types: [],
    cmc: '',
    rarity: ''
  });
  
  const searchTimeoutRef = useRef(null);

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

      if (response.ok) {
        const data = await response.json();
        setDeck(data);
        setDeckCards(data.cards || []);
      } else {
        console.error('Failed to fetch deck');
        router.push('/decks');
      }
    } catch (error) {
      console.error('Error fetching deck:', error);
      router.push('/decks');
    } finally {
      setLoading(false);
    }
  };

  const searchCards = async () => {
    setSearchLoading(true);
    try {
      const token = localStorage.getItem('auth_token');
      const params = new URLSearchParams({
        game: 'MTG',
        limit: '50'
      });

      // Only add search if there's a query
      if (searchQuery.trim()) {
        params.append('search', searchQuery);
      }

      if (filters.colors.length > 0) {
        params.append('colors', filters.colors.join(','));
      }
      if (filters.types.length > 0) {
        params.append('types', filters.types.join(','));
      }
      if (filters.cmc) {
        params.append('cmc', filters.cmc);
      }
      if (filters.rarity) {
        params.append('rarity', filters.rarity);
      }

      const response = await fetch(`/api/cards/search?${params}`, {
        headers: {
          'Authorization': `Bearer ${token}`
        }
      });

      if (response.ok) {
        const data = await response.json();
        setSearchResults(data.cards || []);
      }
    } catch (error) {
      console.error('Error searching cards:', error);
    } finally {
      setSearchLoading(false);
    }
  };

  useEffect(() => {
    if (user && deckId) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- load deck when route id or user changes
      fetchDeck();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- load deck when route id or user changes
  }, [user, deckId]);

  // Load initial cards when component mounts
  useEffect(() => {
    if (user) {
      // eslint-disable-next-line react-hooks/set-state-in-effect -- initial catalog load once user is known
      searchCards();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps -- initial catalog load once user is known
  }, [user]);

  useEffect(() => {
    if (searchTimeoutRef.current) {
      clearTimeout(searchTimeoutRef.current);
    }
    searchTimeoutRef.current = setTimeout(() => {
      searchCards();
    }, 300);

    return () => {
      if (searchTimeoutRef.current) {
        clearTimeout(searchTimeoutRef.current);
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps -- debounced search; searchCards reads latest filter state
  }, [searchQuery, filters]);

  const addCardToDeck = async (card, quantity = 1) => {
    // Commander format validation
    if (deck.format === 'Commander') {
      const existingCard = deckCards.find(dc => dc.card_id === card.id);
      const currentQuantity = existingCard ? existingCard.quantity : 0;
      
      // Check singleton rule (except basic lands)
      if (!isBasicLand(card) && currentQuantity + quantity > 1) {
        alert('Commander format allows only 1 copy of each non-basic land card.');
        return;
      }

      // Check total deck size
      const totalCards = deckCards.reduce((sum, dc) => sum + dc.quantity, 0);
      if (totalCards + quantity > 100) {
        alert('Commander decks can have a maximum of 100 cards.');
        return;
      }
    }

    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`/api/decks/${deckId}/cards`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          cardId: card.id,
          quantity
        })
      });

      if (response.ok) {
        // Refresh deck cards
        fetchDeck();
      } else {
        console.error('Failed to add card to deck');
      }
    } catch (error) {
      console.error('Error adding card to deck:', error);
    }
  };

  const removeCardFromDeck = async (cardId, quantity = 1) => {
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`/api/decks/${deckId}/cards`, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`
        },
        body: JSON.stringify({
          cardId,
          quantity
        })
      });

      if (response.ok) {
        // Refresh deck cards
        fetchDeck();
      } else {
        console.error('Failed to remove card from deck');
      }
    } catch (error) {
      console.error('Error removing card from deck:', error);
    }
  };

  const toggleColorFilter = (color) => {
    setFilters(prev => ({
      ...prev,
      colors: prev.colors.includes(color)
        ? prev.colors.filter(c => c !== color)
        : [...prev.colors, color]
    }));
  };

  const clearFilters = () => {
    setFilters({
      colors: [],
      types: [],
      cmc: '',
      rarity: ''
    });
  };

  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 use the deck builder</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>
    );
  }

  if (!deck) {
    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">Deck not found</h1>
            <Link href="/decks" className="text-accent-ember hover:underline">
              Back to My Decks
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  const stats = computeDeckStats(deckCards);

  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-6">
          <div>
            <div className="flex items-center space-x-3">
              <Link href="/decks" className="text-accent-ember hover:underline">
                ← Back to Decks
              </Link>
            </div>
            <h1 className="text-3xl font-bold text-text-primary mt-2">{deck.name}</h1>
            <p className="text-text-secondary">
              {deck.format} • {stats.totalCards}/100 cards
            </p>
          </div>
          <div className="flex space-x-3">
            <button className="bg-bg-secondary text-text-primary px-4 py-2 rounded-lg hover:bg-bg-tertiary transition-colors">
              Save Deck
            </button>
            <Link
              href={`/deck/${deck.id}`}
              className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
            >
              View Deck
            </Link>
          </div>
        </div>

        <div className="flex gap-6 h-[calc(100vh-12rem)]">
          {/* Main Deck View - Left Side */}
          <div className={`flex-1 transition-all duration-300`}>
            <div className="bg-bg-secondary rounded-lg p-6 h-full flex flex-col">
              <div className="flex justify-between items-center mb-6">
                <h2 className="text-xl font-semibold text-text-primary">
                  Deck Cards ({stats.totalCards})
                </h2>
                <button
                  onClick={() => setSidebarOpen(!sidebarOpen)}
                  className="bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors flex items-center space-x-2"
                >
                  <span>{sidebarOpen ? 'Hide' : 'Show'} Browser</span>
                  <span>{sidebarOpen ? '→' : '←'}</span>
                </button>
              </div>

              <DeckBuilderStatsBar stats={stats} />

              <DeckBuilderDeckList
                deckCards={deckCards}
                sidebarOpen={sidebarOpen}
                onOpenSidebar={() => setSidebarOpen(true)}
                manaSymbolSettings={manaSymbolSettings}
                onAddCard={(card, quantity) => addCardToDeck(card, quantity)}
                onRemoveCard={(cardId, quantity) => removeCardFromDeck(cardId, quantity)}
              />
            </div>
          </div>

          {/* Full Height Right Sidebar - Card Browser */}
          <div className={`transition-all duration-300 ${sidebarOpen ? 'w-96' : 'w-0 overflow-hidden'}`}>
            <DeckBuilderCardBrowser
              selectedCard={selectedCard}
              onSelectCard={setSelectedCard}
              onClearSelectedCard={() => setSelectedCard(null)}
              viewMode={viewMode}
              onViewModeChange={setViewMode}
              showSettings={showSettings}
              onToggleSettings={() => setShowSettings(!showSettings)}
              onCollapseSidebar={() => setSidebarOpen(false)}
              searchQuery={searchQuery}
              onSearchQueryChange={setSearchQuery}
              showFilters={showFilters}
              onToggleFilters={() => setShowFilters(!showFilters)}
              filters={filters}
              onFiltersChange={setFilters}
              onClearFilters={clearFilters}
              onToggleColorFilter={toggleColorFilter}
              searchLoading={searchLoading}
              searchResults={searchResults}
              manaSymbolSettings={manaSymbolSettings}
              onManaSymbolSettingsChange={setManaSymbolSettings}
              onAddCardToDeck={(card) => {
                addCardToDeck(card);
                setSelectedCard(null);
              }}
            />
          </div>
        </div>
      </div>
    </Layout>
  );
}