// SEAT LEGEND — 4 designs, tweakable. Unified blinking-dot "available" visual.
// Usage: <SeatLegend total={60} taken={taken} mySeat={boolean}/>

// Reusable dot that blinks green (same rhythm across all legends + seats)
function AvailableDot({ size=8, style={} }) {
  return (
    <span style={{
      display:'inline-block',width:size,height:size,borderRadius:'50%',
      background:'#10b981',
      boxShadow:'0 0 0 2px rgba(16,185,129,0.25), 0 0 10px rgba(16,185,129,0.65)',
      animation:'apex-avail-blink 1.4s ease-in-out infinite',
      flexShrink:0,
      ...style,
    }}/>
  );
}

// Taken swatch — purple filled block
function TakenSwatch({ size=10, radius=2 }) {
  return (
    <span style={{
      display:'inline-block',width:size,height:size,borderRadius:radius,
      background:'rgba(124,58,237,0.75)',
      boxShadow:'inset 0 0 0 1px rgba(124,58,237,0.9)',
      flexShrink:0,
    }}/>
  );
}

// Available swatch (white seat with tiny blinking green dot inside)
function AvailableSwatch({ size=12, radius=2 }) {
  return (
    <span style={{
      position:'relative',display:'inline-flex',alignItems:'center',justifyContent:'center',
      width:size,height:size,borderRadius:radius,
      background:'#fff',
      boxShadow:'inset 0 0 0 1px var(--border-strong)',
      flexShrink:0,
    }}>
      <AvailableDot size={Math.max(4, size-7)}/>
    </span>
  );
}

// ─────────────────────────────────────────────────────────
// Variant A — MINI BAR (compact pill: inline, above CTA)
// ─────────────────────────────────────────────────────────
function SeatLegendMini({ total, taken, tone='light' }) {
  const open = Math.max(0, total - taken);
  return (
    <div style={{
      display:'flex',alignItems:'center',justifyContent:'center',gap:14,
      padding:'8px 14px',marginTop:10,
      fontSize:11,color:'var(--mute)',fontWeight:700,letterSpacing:0.3,
      background:'var(--break-bg)',borderRadius:999,border:'1px solid var(--border)',
    }}>
      <span style={{display:'flex',alignItems:'center',gap:6}}>
        <AvailableSwatch size={13}/>
        <span style={{color:'var(--ink)'}}>{open} available</span>
      </span>
      <span style={{color:'var(--border-strong)'}}>·</span>
      <span style={{display:'flex',alignItems:'center',gap:6}}>
        <TakenSwatch size={11}/>
        <span>{taken} taken</span>
      </span>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Variant B — CARDS (two prominent cards side-by-side)
// ─────────────────────────────────────────────────────────
function SeatLegendCards({ total, taken }) {
  const open = Math.max(0, total - taken);
  return (
    <div style={{
      display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,
      marginTop:12,
    }}>
      <div style={{
        padding:'10px 12px',borderRadius:12,
        background:'linear-gradient(180deg,rgba(16,185,129,0.09),rgba(16,185,129,0.04))',
        border:'1.5px solid rgba(16,185,129,0.35)',
        display:'flex',alignItems:'center',gap:10,
      }}>
        <AvailableSwatch size={18} radius={3}/>
        <div style={{minWidth:0}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:1.5,textTransform:'uppercase',color:'#059669',lineHeight:1}}>Available</div>
          <div style={{fontSize:14,fontWeight:800,color:'var(--ink)',marginTop:3,lineHeight:1}}>{open} open · tap to claim</div>
        </div>
      </div>
      <div style={{
        padding:'10px 12px',borderRadius:12,
        background:'rgba(124,58,237,0.06)',
        border:'1.5px solid rgba(124,58,237,0.25)',
        display:'flex',alignItems:'center',gap:10,
      }}>
        <TakenSwatch size={16} radius={3}/>
        <div style={{minWidth:0}}>
          <div style={{fontSize:10,fontWeight:800,letterSpacing:1.5,textTransform:'uppercase',color:BRAND.purple,lineHeight:1}}>Claimed</div>
          <div style={{fontSize:14,fontWeight:800,color:'var(--ink)',marginTop:3,lineHeight:1}}>{taken} agents locked in</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Variant C — BANNER (horizontal w/ live ticker)
// ─────────────────────────────────────────────────────────
function SeatLegendBanner({ total, taken }) {
  const open = Math.max(0, total - taken);
  return (
    <div style={{
      display:'flex',alignItems:'center',gap:12,
      marginTop:12,padding:'10px 14px',
      background:BRAND.gradient,color:'#fff',borderRadius:12,
      boxShadow:'0 8px 24px rgba(124,58,237,0.25)',
      flexWrap:'wrap',justifyContent:'space-between',
    }}>
      <div style={{display:'flex',alignItems:'center',gap:8}}>
        <AvailableDot size={10}/>
        <div>
          <div style={{fontSize:13,fontWeight:800,lineHeight:1,letterSpacing:-0.2}}>
            {open} seats available
          </div>
          <div style={{fontSize:10.5,opacity:0.8,marginTop:3,letterSpacing:1.2,textTransform:'uppercase',fontWeight:700}}>
            Tap a seat to claim
          </div>
        </div>
      </div>
      <div style={{display:'flex',alignItems:'center',gap:6,opacity:0.85}}>
        <TakenSwatch size={9}/>
        <span style={{fontSize:11.5,fontWeight:700,letterSpacing:0.3}}>{taken}/{total} filled</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Variant D — FLOATING CAPSULE (prominent, floats above the stadium)
// ─────────────────────────────────────────────────────────
function SeatLegendFloat({ total, taken }) {
  const open = Math.max(0, total - taken);
  const pct = Math.min(100, Math.round((taken / total) * 100));
  return (
    <div style={{
      marginTop:12,padding:'12px 14px',
      background:'var(--card)',border:'1.5px solid var(--border-strong)',borderRadius:14,
      boxShadow:'0 12px 28px rgba(11,11,20,0.08)',
      display:'flex',flexDirection:'column',gap:10,
    }}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',gap:10}}>
        <span style={{display:'flex',alignItems:'center',gap:8}}>
          <AvailableSwatch size={16} radius={3}/>
          <span style={{fontSize:12.5,fontWeight:800,color:'var(--ink)'}}>{open} available</span>
          <span style={{
            fontSize:9.5,color:'#059669',background:'rgba(16,185,129,0.1)',
            padding:'2px 7px',borderRadius:999,fontWeight:800,letterSpacing:1.2,textTransform:'uppercase',
            border:'1px solid rgba(16,185,129,0.3)',
          }}>LIVE</span>
        </span>
        <span style={{display:'flex',alignItems:'center',gap:6,fontSize:12,color:'var(--mute)',fontWeight:700}}>
          <TakenSwatch size={12}/>
          {taken} taken
        </span>
      </div>
      {/* Progress bar */}
      <div style={{height:6,background:'var(--break-bg)',borderRadius:3,overflow:'hidden',position:'relative'}}>
        <div style={{
          height:'100%',width:`${pct}%`,background:BRAND.gradient,
          borderRadius:3,transition:'width 0.5s ease',
        }}/>
      </div>
      <div style={{fontSize:10.5,color:'var(--mute)',fontWeight:700,letterSpacing:1,textTransform:'uppercase',textAlign:'center'}}>
        {pct}% of room filled · tap a white seat to claim yours
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// Main router — reads tweak and picks a variant
// ─────────────────────────────────────────────────────────
function SeatLegend({ total, taken }) {
  const { tweaks } = useApp();
  const style = tweaks.seatLegend || 'cards';
  if (style === 'off')     return null;
  if (style === 'mini')    return <SeatLegendMini    total={total} taken={taken}/>;
  if (style === 'banner')  return <SeatLegendBanner  total={total} taken={taken}/>;
  if (style === 'float')   return <SeatLegendFloat   total={total} taken={taken}/>;
  return <SeatLegendCards total={total} taken={taken}/>;
}

Object.assign(window, { SeatLegend, AvailableDot, AvailableSwatch, TakenSwatch });