import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Layout from '../../components/Layout';
import DeckDetailCardList from '../../components/DeckDetailCardList';
import DeckDetailStatsSidebar from '../../components/DeckDetailStatsSidebar';
import { Button } from '../../components/ui';
import { computeDeckStats } from '../../lib/deck-builder-stats.js';
import { groupDeckCards } from '../../lib/deck-detail-grouping.js';
import { getDeckFormatIcon } from '../../lib/deck-format-utils.js';
import { useAuth } from '../../lib/use-auth';

/* 2026-06-04 design-sweep pass: this page used the broken Tailwind
   token classes (bg-bg-*, text-text-*, bg-accent-ember,
   hover:bg-accent-ember-dark, border-accent-ember) that don't
   resolve in tailwind.config.js. Sweep replaces them with inline
   CSS variables + Button primitive + glass-panel surface + the
   nav-item-active / nav-item-hover utilities so the page renders
   with the Liquid Glass design system. */

export default function DeckDetail() {
  const { user } = useAuth();
  const router = useRouter();
  const { id: deckId } = router.query;
  
  const [deck, setDeck] = useState(null);
  const [loading, setLoading] = useState(true);
  const [groupBy, setGroupBy] = useState('type');

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

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

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

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

  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"
              style={{ color: 'var(--text-primary)' }}
            >
              Deck not found
            </h1>
            <Link
              href="/decks"
              className="hover:underline"
              style={{ color: 'var(--accent-ember)' }}
            >
              Back to Decks
            </Link>
          </div>
        </div>
      </Layout>
    );
  }

  const stats = computeDeckStats(deck.cards || []);
  const groupedCards = groupDeckCards(deck.cards, groupBy);
  const isOwner = user && deck.user_id === user.userId;

  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-start mb-8">
          <div>
            <div className="flex items-center space-x-3 mb-2">
              <Link
                href="/decks"
                className="hover:underline"
                style={{ color: 'var(--accent-ember)' }}
              >
                ← Back to Decks
              </Link>
            </div>
            <div className="flex items-center space-x-3 mb-2">
              <span className="text-3xl">{getDeckFormatIcon(deck.format)}</span>
              <h1
                className="text-3xl font-bold"
                style={{ color: 'var(--text-primary)' }}
              >
                {deck.name}
              </h1>
              {deck.is_public && (
                <span
                  className="px-2 py-1 rounded-full text-xs font-medium"
                  style={{
                    backgroundColor: 'var(--bg-tertiary)',
                    color: 'var(--accent-ember)',
                  }}
                >
                  Public
                </span>
              )}
            </div>
            <p className="mb-2" style={{ color: 'var(--text-secondary)' }}>
              by {deck.creator_username} • {deck.format} • {stats.totalCards} cards
            </p>
            {deck.description && (
              <p
                className="max-w-2xl"
                style={{ color: 'var(--text-secondary)' }}
              >
                {deck.description}
              </p>
            )}
          </div>

          {isOwner && (
            <div className="flex space-x-3">
              <Link href={`/deck-builder?deck=${deck.id}`}>
                <Button variant="primary">Edit Deck</Button>
              </Link>
            </div>
          )}
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          <DeckDetailStatsSidebar
            deck={deck}
            stats={stats}
            groupBy={groupBy}
            onGroupByChange={setGroupBy}
          />

          <DeckDetailCardList cards={deck.cards} groupedCards={groupedCards} />
        </div>
      </div>
    </Layout>
  );
}