deckhearth/pages/decks.js

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

/* 2026-06-04 design-sweep pass: the Tailwind token classes that this
   page relied on (bg-bg-secondary, text-text-primary, border-border,
   bg-accent-ember, hover:bg-accent-ember-dark, focus:ring-accent-ember)
   are NOT defined in tailwind.config.js — they produced zero CSS,
   leaving the page visually unstyled (transparent backgrounds, no
   borders, no hover states). Sweep replaces those with inline
   style={{ ... CSS vars ... }} and the Button / SearchBar primitives
   so the page actually renders with the Liquid Glass + corner-border
   design system. `rounded-lg` → `rounded-xl` across the board to match
   the system standard. */

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

  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" style={{ color: 'var(--text-primary)' }}>
              Please log in to view your decks
            </h1>
            <Link href="/login" style={{ color: 'var(--accent-ember)' }} className="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"
            style={{ borderColor: 'var(--accent-ember)' }}
          />
        </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" 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>

        {/* Stats */}
        <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>
    </Layout>
  );
}