import { Link } from '@tanstack/react-router'
import { GlyphIcon } from '#/components/ascii/GlyphIcon'
import { StatusBadge } from '#/components/ascii/StatusBadge'
import { ShieldBar } from '#/components/ascii/ShieldBar'
import { TerminalLine } from '#/components/ascii/TerminalLine'
import { PriceTag } from '#/components/ascii/PriceTag'

interface FactionDetail {
  abbreviation: string
  name: string
  glyph: string
  colorCode: string
  shieldCapacity: number
  oddsPrice: number
}

export interface MatchData {
  id: string
  name: string
  quadrant: 'alpha' | 'beta' | 'gamma' | 'delta'
  status: 'LIVE' | 'PRE' | 'RES'
  tick: number
  maxTicks: number
  kineticYield: number
  homeFaction: FactionDetail
  awayFaction: FactionDetail
  marketsOpenCount: number
  commencingIn?: string
}

interface MatchCardProps {
  match: MatchData
}

export function MatchCard({ match }: MatchCardProps) {
  const isLive = match.status === 'LIVE'
  const isPre = match.status === 'PRE'

  // Format quadrant letter glyph
  const quadGlyph = {
    alpha: 'α',
    beta: 'β',
    gamma: 'γ',
    delta: 'δ',
  }[match.quadrant]

  return (
    <div className="border border-slate-900 bg-slate-950/40 p-3 font-mono text-xs select-none hover:border-slate-800 transition-all flex flex-col justify-between">
      <div>
        {/* Header: Venue + Status + Quadrant */}
        <div className="flex justify-between items-center mb-2">
          <span className="font-bold text-slate-300 truncate max-w-[260px] uppercase">
            {match.name}
          </span>
          <div className="flex items-center gap-2 shrink-0">
            <StatusBadge status={match.status} />
            <span className="text-[10px] text-slate-500 bg-slate-900 px-1 border border-slate-800 uppercase font-bold">
              {quadGlyph}
            </span>
          </div>
        </div>

        {/* Combat Factions Layout */}
        <div className="space-y-2 my-3">
          {/* Home Faction */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5 min-w-0">
              <GlyphIcon
                glyph={match.homeFaction.glyph}
                colorCode={match.homeFaction.colorCode}
              />
              <span className="font-bold text-slate-400 truncate">
                {match.homeFaction.name}
              </span>
            </div>
            {isLive && (
              <span className="text-slate-500 font-bold shrink-0">
                {match.homeFaction.shieldCapacity}%
              </span>
            )}
          </div>

          {/* Away Faction */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1.5 min-w-0">
              <GlyphIcon
                glyph={match.awayFaction.glyph}
                colorCode={match.awayFaction.colorCode}
              />
              <span className="font-bold text-slate-400 truncate">
                {match.awayFaction.name}
              </span>
            </div>
            {isLive && (
              <span className="text-slate-500 font-bold shrink-0">
                {match.awayFaction.shieldCapacity}%
              </span>
            )}
          </div>

          {/* Dual Shield Bar for Live Match */}
          {isLive && (
            <div className="mt-1">
              <ShieldBar
                homeShield={match.homeFaction.shieldCapacity}
                awayShield={match.awayFaction.shieldCapacity}
              />
            </div>
          )}
        </div>
      </div>

      <div>
        <TerminalLine variant="dashed" />

        {/* Footer info: Telemetry details + Action Button */}
        <div className="flex justify-between items-center text-[10px] text-slate-500">
          <div>
            {isLive ? (
              <div className="space-y-0.5">
                <div>
                  KY:{' '}
                  <span className="text-slate-400">
                    {match.kineticYield.toFixed(1)} TW
                  </span>{' '}
                  | TICK:{' '}
                  <span className="text-slate-400">
                    {match.tick}/{match.maxTicks}
                  </span>
                </div>
                <div className="flex items-center gap-1">
                  <span>ODDS:</span>
                  <span className="text-slate-400">
                    {match.homeFaction.abbreviation}
                  </span>
                  <PriceTag price={match.homeFaction.oddsPrice} />
                  <span>|</span>
                  <span className="text-slate-400">
                    {match.awayFaction.abbreviation}
                  </span>
                  <PriceTag price={match.awayFaction.oddsPrice} />
                </div>
              </div>
            ) : isPre ? (
              <div className="space-y-0.5">
                <div className="text-amber-500/80 font-bold">
                  COMMENCING IN: {match.commencingIn}
                </div>
                <div>PRE-MATCH ODDS AVAILABLE</div>
              </div>
            ) : (
              <div>MATCH IN RESOLUTION PHASE</div>
            )}
          </div>

          <Link
            to="/quadrants/$sectorId"
            params={{ sectorId: match.id }}
            search={(prev: any) => ({
              ...prev,
              quadrant: match.quadrant,
              currency: prev.currency || 'Latinum',
            })}
            className="border border-slate-900 hover:border-amber-500/50 bg-slate-950 px-2 py-1 text-slate-400 hover:text-amber-400 font-bold tracking-wider shrink-0 transition-all cursor-pointer"
          >
            [VIEW] →
          </Link>
        </div>

        <div className="text-[9px] text-slate-600 mt-2">
          ▸ {match.marketsOpenCount} MARKETS OPEN
        </div>
      </div>
    </div>
  )
}
