import { ShieldBar } from '#/components/ascii/ShieldBar'
import { GlyphIcon } from '#/components/ascii/GlyphIcon'
import { TerminalLine } from '#/components/ascii/TerminalLine'

interface FactionState {
  name: string
  abbreviation: string
  glyph: string
  colorCode: string
  shieldCapacity: number
  attack: number
  evasion: number
  activeEffects: Array<{
    name: string
    description: string
    remainingTicks: number
  }>
}

interface VenueDetail {
  name: string
  coordinates: string
  shieldModifier: number
  damageModifier: number
  evasionModifier: number
  tags: string[]
}

interface VersusArenaProps {
  home: FactionState
  away: FactionState
  kineticYield: number
  tick: number
  maxTicks: number
  venue: VenueDetail
}

export function VersusArena({
  home,
  away,
  kineticYield,
  tick,
  maxTicks,
  venue,
}: VersusArenaProps) {
  // Combine all active effects for display
  const allEffects = [
    ...home.activeEffects.map((e) => ({ ...e, faction: home.abbreviation })),
    ...away.activeEffects.map((e) => ({ ...e, faction: away.abbreviation })),
  ]

  return (
    <div className="border border-slate-900 bg-slate-950/20 p-4 font-mono text-xs select-none space-y-4 w-full">
      {/* Factions Headers */}
      <div className="flex justify-between items-center text-center">
        <div className="flex-1 flex flex-col items-center">
          <GlyphIcon glyph={home.glyph} colorCode={home.colorCode} size="lg" />
          <span className="font-bold text-slate-300 mt-1 uppercase text-sm">
            {home.name}
          </span>
          <span className="text-slate-500 font-bold">
            [{home.abbreviation}]
          </span>
        </div>

        <div className="px-4 text-slate-600 font-bold text-base shrink-0">
          ✦ VS ✦
        </div>

        <div className="flex-1 flex flex-col items-center">
          <GlyphIcon glyph={away.glyph} colorCode={away.colorCode} size="lg" />
          <span className="font-bold text-slate-300 mt-1 uppercase text-sm">
            {away.name}
          </span>
          <span className="text-slate-500 font-bold">
            [{away.abbreviation}]
          </span>
        </div>
      </div>

      <TerminalLine variant="dashed" />

      {/* Symmetrical Stats Grid */}
      <div className="grid grid-cols-3 gap-2 text-center items-center">
        {/* Home Stats */}
        <div className="space-y-1.5 text-right pr-4">
          <div className="text-slate-300 font-bold">{home.shieldCapacity}%</div>
          <div className="text-slate-400">{home.attack}</div>
          <div className="text-slate-400">{home.evasion}</div>
        </div>

        {/* Labels */}
        <div className="space-y-1.5 text-slate-500 text-[10px] font-bold">
          <div>SHIELDS</div>
          <div>ATTACK POWER</div>
          <div>EVASION CAP.</div>
        </div>

        {/* Away Stats */}
        <div className="space-y-1.5 text-left pl-4">
          <div className="text-slate-300 font-bold">{away.shieldCapacity}%</div>
          <div className="text-slate-400">{away.attack}</div>
          <div className="text-slate-400">{away.evasion}</div>
        </div>
      </div>

      {/* Symmetrical Shield Bar */}
      <div className="px-2">
        <ShieldBar
          homeShield={home.shieldCapacity}
          awayShield={away.shieldCapacity}
        />
      </div>

      <TerminalLine variant="dashed" />

      {/* Venue & Environment Telemetry */}
      <div className="grid grid-cols-2 gap-4 text-[10px] text-slate-500 leading-relaxed">
        <div className="space-y-1">
          <div>
            KINETIC YIELD:{' '}
            <span className="text-slate-300 font-bold">
              {kineticYield.toFixed(1)} TW
            </span>
          </div>
          <div>
            CYCLE TICK:{' '}
            <span className="text-slate-300 font-bold">
              {tick} / {maxTicks}
            </span>
          </div>
          <div>
            VENUE:{' '}
            <span className="text-slate-300 uppercase">{venue.name}</span>
          </div>
        </div>
        <div className="space-y-1 text-right">
          <div>
            COORD: <span className="text-slate-400">{venue.coordinates}</span>
          </div>
          <div>
            TAGS:{' '}
            <span className="text-slate-400 uppercase">
              [{venue.tags.join(', ')}]
            </span>
          </div>
          <div>
            SHD×:{' '}
            <span className="text-slate-400">
              {venue.shieldModifier.toFixed(2)}
            </span>{' '}
            | DMG×:{' '}
            <span className="text-slate-400">
              {venue.damageModifier.toFixed(2)}
            </span>{' '}
            | EVA×:{' '}
            <span className="text-slate-400">
              {venue.evasionModifier.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      {/* Active Effects Section */}
      {allEffects.length > 0 && (
        <div className="border border-slate-900 bg-slate-950/40 p-2 space-y-1 mt-3">
          <div className="text-[10px] text-slate-600 font-bold uppercase tracking-wider">
            &gt; ACTIVE EFFECTS IN SECTOR ARRAY
          </div>
          {allEffects.map((eff, idx) => (
            <div
              key={idx}
              className="text-[10px] text-amber-500 flex justify-between items-center"
            >
              <span>
                ⚡ {eff.name} ({eff.faction}) — {eff.description}
              </span>
              <span className="text-[9px] bg-slate-900 px-1 border border-slate-800 text-slate-500">
                [{eff.remainingTicks} TICKS REMAINING]
              </span>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
