import { Link } from '@tanstack/react-router'
import { MarketSelection } from '#/components/panels/MarketSelection'

export interface SelectionData {
  id: string
  name: string
  price: number
  factionGlyph: string
}

export interface MarketItem {
  id: string
  templateId: string
  name: string
  category: 'primary' | 'secondary' | 'exotic'
  selections: SelectionData[]
}

interface MarketGridProps {
  matchId: string
  matchName: string
  markets: MarketItem[]
  currentCategory: 'primary' | 'secondary' | 'exotic' | 'all'
}

export function MarketGrid({
  matchId,
  matchName,
  markets,
  currentCategory,
}: MarketGridProps) {
  // Filter tabs config
  const tabs = [
    { id: 'all', label: 'ALL MARKETS' },
    { id: 'primary', label: 'PRIMARY' },
    { id: 'secondary', label: 'SECONDARY' },
    { id: 'exotic', label: 'EXOTIC' },
  ] as const

  // Filter markets by current category
  const filteredMarkets =
    currentCategory === 'all'
      ? markets
      : markets.filter((m) => m.category === currentCategory)

  return (
    <div className="space-y-4 font-mono text-xs select-none w-full">
      {/* Category Tabs */}
      <div className="flex gap-1.5 border border-slate-900 p-1.5 bg-slate-950/20">
        {tabs.map((tab) => (
          <Link
            key={tab.id}
            to="."
            search={(prev: any) => ({ ...prev, marketCategory: tab.id })}
            className={`flex-1 text-center py-1.5 border font-bold uppercase transition-all cursor-pointer ${
              currentCategory === tab.id
                ? 'border-emerald-500/50 text-emerald-400 bg-emerald-950/20'
                : 'border-slate-950 text-slate-500 hover:text-slate-400 hover:border-slate-800 bg-black/40'
            }`}
          >
            {tab.label}
          </Link>
        ))}
      </div>

      {/* Markets List */}
      <div className="space-y-3.5 max-h-[420px] overflow-y-auto pr-1">
        {filteredMarkets.length === 0 ? (
          <div className="p-8 border border-dashed border-slate-900 text-center italic text-slate-600">
            No active markets available in this category sector.
          </div>
        ) : (
          filteredMarkets.map((market) => (
            <div key={market.id} className="space-y-2">
              {/* Market Header: Title + Category Tag */}
              <div className="flex justify-between items-center text-[10px] text-slate-500 font-bold px-0.5">
                <span className="uppercase tracking-wide">{market.name}</span>
                <span className="bg-slate-900 px-1 border border-slate-800 text-slate-500">
                  [{market.category}]
                </span>
              </div>

              {/* Selections Selection Grid (moneyline has 2 columns, others can wrap) */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                {market.selections.map((sel) => (
                  <MarketSelection
                    key={sel.id}
                    matchId={matchId}
                    matchName={matchName}
                    marketId={sel.id}
                    selectionName={sel.name}
                    price={sel.price}
                    factionGlyph={sel.factionGlyph}
                  />
                ))}
              </div>
            </div>
          ))
        )}
      </div>
    </div>
  )
}
