import Link from 'next/link';
import DeckBuilderCardBrowser from './DeckBuilderCardBrowser';
import DeckBuilderDeckList from './DeckBuilderDeckList';
import DeckBuilderStatsBar from './DeckBuilderStatsBar';
import { computeDeckStats } from '../lib/deck-builder-stats';

export default function DeckBuilderView({
  addCardToDeck,
  clearFilters,
  deck,
  deckCards,
  filters,
  manaSymbolSettings,
  removeCardFromDeck,
  searchLoading,
  searchQuery,
  searchResults,
  selectedCard,
  setFilters,
  setManaSymbolSettings,
  setSearchQuery,
  setSelectedCard,
  setShowFilters,
  setShowSettings,
  setSidebarOpen,
  setViewMode,
  showFilters,
  showSettings,
  sidebarOpen,
  toggleColorFilter,
  viewMode,
}) {
  const stats = computeDeckStats(deckCards);

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <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
            type="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)]">
        <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
                type="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>

        <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>
  );
}