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

/* 2026-06-04 design-sweep pass: replaced broken Tailwind token
   classes (bg-bg-secondary, text-text-primary, bg-accent-ember, etc.
   — none of which are defined in tailwind.config.js and produced
   zero CSS) with inline style={{ ... CSS vars ... }} + the Button
   primitive + `glass-panel` + `rounded-2xl` so this view actually
   renders with the Liquid Glass design system. */

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="hover:underline"
              style={{ color: 'var(--accent-ember)' }}
            >
              ← Back to Decks
            </Link>
          </div>
          <h1 className="text-3xl font-bold mt-2" style={{ color: 'var(--text-primary)' }}>
            {deck.name}
          </h1>
          <p style={{ color: 'var(--text-secondary)' }}>
            {deck.format} • {stats.totalCards}/100 cards
          </p>
        </div>
        <div className="flex space-x-3">
          <Button type="button" variant="secondary">
            Save Deck
          </Button>
          <Link href={`/deck/${deck.id}`}>
            <Button variant="primary">View Deck</Button>
          </Link>
        </div>
      </div>

      <div className="flex gap-6 h-[calc(100vh-12rem)]">
        <div className="flex-1 transition-all duration-300">
          <div className="glass-panel rounded-2xl p-6 h-full flex flex-col">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
                Deck Cards ({stats.totalCards})
              </h2>
              <Button
                type="button"
                variant="primary"
                onClick={() => setSidebarOpen(!sidebarOpen)}
                trailingIcon={<span aria-hidden="true">{sidebarOpen ? '→' : '←'}</span>}
              >
                {sidebarOpen ? 'Hide' : 'Show'} Browser
              </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>
  );
}