import DecksCreateModal from './DecksCreateModal';
import DecksEditModal from './DecksEditModal';
import DecksGrid from './DecksGrid';
import { Button } from './ui';

export default function DecksPageView({
  decks,
  editingDeck,
  handleCreateDeck,
  handleDeleteDeck,
  handleEditDeck,
  newDeck,
  setEditingDeck,
  setNewDeck,
  setShowCreateModal,
  showCreateModal,
}) {
  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-8">
        <div>
          <h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
            My Decks
          </h1>
          <p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
            Build and manage your MTG decks
          </p>
        </div>
        <Button variant="primary" onClick={() => setShowCreateModal(true)}>
          Create New Deck
        </Button>
      </div>

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

      <DecksGrid
        decks={decks}
        onEditDeck={setEditingDeck}
        onDeleteDeck={handleDeleteDeck}
        onCreateDeck={() => setShowCreateModal(true)}
      />

      <DecksCreateModal
        isOpen={showCreateModal}
        onClose={() => setShowCreateModal(false)}
        newDeck={newDeck}
        setNewDeck={setNewDeck}
        onCreate={handleCreateDeck}
      />

      <DecksEditModal
        editingDeck={editingDeck}
        setEditingDeck={setEditingDeck}
        onClose={() => setEditingDeck(null)}
        onEdit={handleEditDeck}
      />
    </div>
  );
}