import Link from 'next/link';
import DeckDetailCardList from './DeckDetailCardList';
import DeckDetailStatsSidebar from './DeckDetailStatsSidebar';
import { Button } from './ui';
import { getDeckFormatIcon } from '../lib/deck-format-utils.js';

export default function DeckDetailView({
  deck,
  groupBy,
  groupedCards,
  isOwner,
  setGroupBy,
  stats,
}) {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <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>
  );
}