import { useEffect, useState } from 'react'
import type { Card, ClientMessage } from '../types'
import { fetchCatalog } from '../api'
import { CardView } from './CardView'

interface Props {
  canGrant: boolean // shop phase — grants only land then
  pack: string // active pack, so the catalog matches the game
  send: (msg: ClientMessage) => void
}

// DebugPanel is a testing aid (server DEBUG mode only): a collapsible drawer
// listing every card in the active pack, tier by tier. Clicking one drops it
// into your deck for free, off-turn.
export function DebugPanel({ canGrant, pack, send }: Props) {
  const [open, setOpen] = useState(false)
  const [catalog, setCatalog] = useState<Card[]>([])

  useEffect(() => {
    fetchCatalog(pack)
      .then(setCatalog)
      .catch(() => setCatalog([]))
  }, [pack])

  const tiers = [...new Set(catalog.map((c) => c.tier ?? 0))].sort((a, b) => a - b)

  return (
    <div className={`debug-panel ${open ? 'is-open' : ''}`}>
      <button className="debug-toggle" onClick={() => setOpen((o) => !o)}>
        🐛 {open ? '›' : '‹'} Debug
      </button>
      {open && (
        <div className="debug-body">
          <div className="debug-head">
            Buy any card
            {!canGrant && <span className="muted"> · only in the shop</span>}
          </div>
          {tiers.map((tier) => (
            <div key={tier} className="debug-tier">
              <div className="debug-tier-label">Tier {tier}</div>
              <div className="debug-grid">
                {catalog
                  .filter((c) => (c.tier ?? 0) === tier)
                  .map((c) => (
                    <CardView
                      key={c.id}
                      card={c}
                      size="sm"
                      disabled={!canGrant}
                      onClick={canGrant ? () => send({ type: 'debugAdd', name: c.name }) : undefined}
                    />
                  ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}