// card-special.jsx — Null Card, Fan Card, Coach Card.
// Visually distinct from Player Card while sharing the same dimensions + tokens.

// ─── shared ─────────────────────────────────────────────────────────────────
const SPECIAL_I18N = {
  fa: {
    nullName: 'کارت آزاد',
    nullType: 'وایلدکارد',
    fanName: 'هوادار',
    fanType: 'کارت هواداری',
    fanBonus: 'بنوس',
    coachName: 'مربی',
    coachType: 'کارت مربی',
    coachMult: 'ضریب',
    anyPos: '★',
  },
  en: {
    nullName: 'Null Card',
    nullType: 'WILDCARD',
    fanName: 'Fan',
    fanType: 'FAN CARD',
    fanBonus: 'BONUS',
    coachName: 'Coach',
    coachType: 'COACH CARD',
    coachMult: 'MULTIPLIER',
    anyPos: '★',
  },
  ar: {
    nullName: 'بطاقة فارغة',
    nullType: 'وايلدكارد',
    fanName: 'مشجع',
    fanType: 'بطاقة مشجع',
    fanBonus: 'مكافأة',
    coachName: 'مدرب',
    coachType: 'بطاقة مدرب',
    coachMult: 'مضاعف',
    anyPos: '★',
  },
};

// ─── Null Card ──────────────────────────────────────────────────────────────
// Wildcard, eligible for any position. Has its own tier (matches Player Card tier system).
// Visual: blank team jersey on hanger — conveys "any player slot".
// Background: deep indigo/violet (distinct from player/fan/coach palettes).
const NULL_FIELD = 'radial-gradient(ellipse 90% 70% at 50% 42%, #3D2980 0%, #1F1455 45%, #0E0830 80%, #06051A 100%)';
const NULL_RIM   = 'rgba(168, 130, 255, 0.45)';
const NULL_BASE  = '#A88CFF';
function NullCard({
  tier = 'platinum',
  locale = 'fa',
  overall = 90,
  size = 'full',
  image = 'assets/null.webp',
  imageScale = 1.4,
  imageOffsetY = 95,
  onDetails,
}) {
  const tt = TIER[tier];
  const ll = SPECIAL_I18N[locale];
  const baseLL = I18N[locale];
  const compact = size === 'compact';
  const overallStr = toLocaleDigits(overall, locale);
  const [detailsOpen, setDetailsOpen] = React.useState(false);

  const externalOpen = onDetails ||
    (typeof window !== 'undefined' && window.__openCardDetails);
  const handleDetails = () => {
    if (externalOpen && typeof window.toInventoryItem === 'function'
        && typeof window.nullCardPropsToCard === 'function') {
      const card = window.nullCardPropsToCard({ tier, overall, image });
      externalOpen(window.toInventoryItem(card, 'null'), locale);
    } else {
      setDetailsOpen(true);
    }
  };
  const useEmbedded = !externalOpen;

  return (
    <div className={`pc ${compact ? 'pc--compact' : ''}`} style={{
      boxShadow: `
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 0 0 1px rgba(255,255,255,0.04),
        0 0 0 1px ${NULL_RIM} inset,
        0 20px 60px -10px rgba(140,110,240,0.30),
        0 30px 80px -20px rgba(0,0,0,0.6)
      `,
    }}>
      <div className="pc-field" style={{ background: NULL_FIELD }}></div>
      <div className="pc-frame"></div>

      {/* Top-right: WILD badge (always English) */}
      <div className="pc-tier-badge" style={{
        borderColor: tt.pillStroke,
        background: tt.pillBg,
        color: tt.overallColor,
      }}>
        <span>WILD</span>
      </div>
      <div className="pc-corner-sparkle" style={{ color: tt.accentText }}>
        <IconSparkle size={compact ? 28 : 48} />
      </div>

      {/* Blank jersey — use real webp asset, framed like player */}
      <div className="pc-player">
        <img className="pc-player-img"
             src={image}
             alt={ll.nullName}
             style={{
               filter: tt.imageFilter,
               transform: `translateY(${compact ? imageOffsetY * 0.5 : imageOffsetY}px) scale(${imageScale})`,
             }}
             onError={(e) => { e.target.style.opacity = '0.25'; }}/>
      </div>

      <div className="pc-bottom">
        <div className="pc-stats">
          <div className="pc-pill" style={{
            backgroundImage: tt.pillBg,
            borderColor: tt.pillStroke,
            boxShadow: `0 8px 24px ${tt.glow.replace('0.55','0.30')}, inset 0 1px 0 rgba(255,255,255,0.18)`,
          }}>
            <div className="pc-pill-glow" style={{
              background: `radial-gradient(ellipse 70% 65% at 50% 60%, ${tt.glow} 0%, transparent 70%)`
            }}></div>
            <span className="pc-pill-overall" style={{ color: tt.overallColor }}>{overallStr}</span>
            <span className="pc-pill-label" style={{ color: tt.accentText }}>{I18N[locale].overall}</span>
          </div>
          <div className="pc-panel">
            <PanelBackground compact={compact} />
            <div className="pc-panel-content">
              <div className="pc-panel-row" style={{ justifyContent: 'center' }}>
                <span className="pc-panel-label" style={{ color: tt.accentText, fontSize: compact ? 11 : 14 }}>
                  {ll.nullType}
                </span>
              </div>
              <div className="pc-panel-body">
                <div className="pc-panel-name">{ll.nullName}</div>
                <button className="pc-panel-cta" onClick={handleDetails}
                        aria-label={baseLL.details} title={baseLL.details}
                        style={{ borderColor: tt.pillStroke, color: tt.overallColor }}>
                  <IconArrow />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {useEmbedded && (
        <CardDetailsModal
          open={detailsOpen}
          onClose={() => setDetailsOpen(false)}
          locale={locale}
          accent={tt.base}
          title={ll.nullName}
          subtitle={ll.nullType}
          fields={[
            { label: baseLL.overall, value: overallStr },
            { label: baseLL.tier, value: tt.name[locale] },
            { label: baseLL.position, value: ll.anyPos + ' (' + (locale === 'en' ? 'Any' : locale === 'ar' ? 'أي' : 'هر') + ')' },
          ]}
        />
      )}

    </div>
  );
}

// ─── Fan Card ───────────────────────────────────────────────────────────────
// Bonus card, not a player. Adds flat bonus to Final Score. NO tier system; uses a
// distinct purple/brand accent. Visual: jersey/scarf placeholder + bonus number.
function FanCard({
  locale = 'fa',
  bonusValue = 250,
  team = 'آرژانتین',
  sponsorLabel = null,           // optional sponsor mark
  size = 'full',
  image = 'assets/fan.webp',
  imageScale = 2.03,
  imageOffsetY = 275,
  onDetails,
}) {
  const ll = SPECIAL_I18N[locale];
  const baseLL = I18N[locale];
  const compact = size === 'compact';
  const bonusStr = toLocaleDigits(bonusValue, locale);
  const [detailsOpen, setDetailsOpen] = React.useState(false);

  const externalOpen = onDetails ||
    (typeof window !== 'undefined' && window.__openCardDetails);
  const handleDetails = () => {
    if (externalOpen && typeof window.toInventoryItem === 'function'
        && typeof window.fanCardPropsToCard === 'function') {
      const card = window.fanCardPropsToCard({ bonusValue, team, image });
      externalOpen(window.toInventoryItem(card, 'fan'), locale);
    } else {
      setDetailsOpen(true);
    }
  };
  const useEmbedded = !externalOpen;

  // Fan card brand palette — deep red
  const PA = {
    base: '#EF4444',
    glow: 'rgba(239,68,68,0.55)',
    rim:  'rgba(239,68,68,0.45)',
    field: 'radial-gradient(ellipse 90% 70% at 50% 42%, #7A1C1C 0%, #3D0E0E 45%, #1A0606 80%, #0A0303 100%)',
    pillBg: 'linear-gradient(180deg, rgba(255,140,140,0.24) 0%, rgba(140,30,30,0.18) 100%)',
    pillStroke: 'rgba(255,160,160,0.45)',
    overallColor: '#FFB8B8',
    accentText: '#F08585',
    watermark: 'rgba(255,140,140,0.07)',
  };

  return (
    <div className={`pc ${compact ? 'pc--compact' : ''}`} style={{
      boxShadow: `
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 0 0 1px rgba(255,255,255,0.04),
        0 0 0 1px ${PA.rim} inset,
        0 20px 60px -10px ${PA.glow.replace('0.55','0.30')},
        0 30px 80px -20px rgba(0,0,0,0.6)
      `,
    }}>
      <div className="pc-field" style={{ background: PA.field }}></div>
      <div className="pc-frame"></div>

      {/* Top-right: FAN badge (always English) */}
      <div className="pc-tier-badge" style={{
        borderColor: PA.pillStroke,
        background: PA.pillBg,
        color: PA.overallColor,
      }}>
        <span>FAN</span>
      </div>
      <div className="pc-corner-sparkle" style={{ color: PA.accentText }}>
        <IconSparkle size={compact ? 28 : 48} />
      </div>

      <div className="pc-watermark" style={{ color: PA.watermark }}>{team}</div>

      {/* Fan image — action-figure render */}
      <div className="pc-player">
        <img className="pc-player-img"
             src={image}
             alt={ll.fanName}
             style={{ transform: `translateY(${compact ? imageOffsetY * 0.5 : imageOffsetY}px) scale(${imageScale})` }}
             onError={(e) => { e.target.style.opacity = '0.25'; }}/>
      </div>

      <div className="pc-bottom">
        <div className="pc-stats">
          <div className="pc-pill" style={{
            backgroundImage: PA.pillBg,
            borderColor: PA.pillStroke,
            boxShadow: `0 8px 24px ${PA.glow.replace('0.55','0.30')}, inset 0 1px 0 rgba(255,255,255,0.18)`,
          }}>
            <div className="pc-pill-glow" style={{
              background: `radial-gradient(ellipse 70% 65% at 50% 60%, ${PA.glow} 0%, transparent 70%)`
            }}></div>
            <span className="pc-pill-overall" style={{ color: PA.overallColor, fontSize: compact ? 22 : 32 }}>+{bonusStr}</span>
            <span className="pc-pill-label" style={{ color: PA.accentText }}>{ll.fanBonus}</span>
          </div>

          <div className="pc-panel">
            <PanelBackground compact={compact} />
            <div className="pc-panel-content">
              <div className="pc-panel-row">
                <div className="pc-panel-side pc-panel-side--start">
                  <span className="pc-panel-label" style={{ color: PA.accentText }}>{team}</span>
                </div>
                <div className="pc-panel-side pc-panel-side--end">
                  <span className="pc-panel-label" style={{ color: PA.accentText, fontSize: compact ? 10 : 12 }}>
                    {sponsorLabel || ll.fanType}
                  </span>
                </div>
              </div>
              <div className="pc-panel-body">
                <div className="pc-panel-name">{ll.fanName}</div>
                <button className="pc-panel-cta" onClick={handleDetails}
                        aria-label={baseLL.details} title={baseLL.details}
                        style={{ borderColor: PA.pillStroke, color: PA.overallColor }}>
                  <IconArrow />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {useEmbedded && (
        <CardDetailsModal
          open={detailsOpen}
          onClose={() => setDetailsOpen(false)}
          locale={locale}
          accent={PA.base}
          title={ll.fanName + ' · ' + team}
          subtitle={ll.fanType}
          fields={[
            { label: ll.fanBonus, value: '+' + bonusStr },
            { label: baseLL.team, value: team },
            ...(sponsorLabel ? [{ label: ll.fanType, value: sponsorLabel }] : []),
          ]}
        />
      )}

    </div>
  );
}

// ─── Coach Card ─────────────────────────────────────────────────────────────
// Multiplier card, unlocked via specific deck conditions. Color: warm gold/amber,
// distinct from any Player tier. Shows multiplier prominently.
function CoachCard({
  locale = 'fa',
  multiplier = 1.5,
  coachName = 'مربی آرژانتین',
  condition = 'دک کامل آرژانتین',
  size = 'full',
  image = 'assets/coach.webp',
  imageScale = 2.03,
  imageOffsetY = 275,
  onDetails,
}) {
  const ll = SPECIAL_I18N[locale];
  const baseLL = I18N[locale];
  const compact = size === 'compact';
  const [detailsOpen, setDetailsOpen] = React.useState(false);

  const externalOpen = onDetails ||
    (typeof window !== 'undefined' && window.__openCardDetails);
  const handleDetails = () => {
    if (externalOpen && typeof window.toInventoryItem === 'function'
        && typeof window.coachCardPropsToCard === 'function') {
      const card = window.coachCardPropsToCard({ multiplier, coachName, condition, image });
      externalOpen(window.toInventoryItem(card, 'coach'), locale);
    } else {
      setDetailsOpen(true);
    }
  };
  const useEmbedded = !externalOpen;

  // Coach palette — deep forest green (matches benchmark)
  const CO = {
    base: '#22C55E',
    glow: 'rgba(34,197,94,0.55)',
    rim:  'rgba(34,197,94,0.45)',
    field: 'radial-gradient(ellipse 90% 70% at 50% 42%, #2D5A3E 0%, #1A3326 45%, #0C1812 80%, #060A07 100%)',
    pillBg: 'linear-gradient(180deg, rgba(150,240,180,0.24) 0%, rgba(30,100,60,0.18) 100%)',
    pillStroke: 'rgba(160,240,190,0.48)',
    overallColor: '#B8F2CD',
    accentText: '#85D8A6',
    watermark: 'rgba(140,240,170,0.07)',
  };

  // Display multiplier as ×1.5 (use locale digits)
  const multStr = toLocaleDigits(String(multiplier), locale);

  return (
    <div className={`pc ${compact ? 'pc--compact' : ''}`} style={{
      boxShadow: `
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 0 0 1px rgba(255,255,255,0.04),
        0 0 0 1px ${CO.rim} inset,
        0 20px 60px -10px ${CO.glow.replace('0.55','0.30')},
        0 30px 80px -20px rgba(0,0,0,0.6)
      `,
    }}>
      <div className="pc-field" style={{ background: CO.field }}></div>
      <div className="pc-frame"></div>

      {/* Top-right: COACH badge (always English) */}
      <div className="pc-tier-badge" style={{
        borderColor: CO.pillStroke,
        background: CO.pillBg,
        color: CO.overallColor,
      }}>
        <span>COACH</span>
      </div>
      <div className="pc-corner-sparkle" style={{ color: CO.accentText }}>
        <IconSparkle size={compact ? 28 : 48} />
      </div>

      {/* Coach image — action-figure render */}
      <div className="pc-player">
        <img className="pc-player-img"
             src={image}
             alt={coachName}
             style={{ transform: `translateY(${compact ? imageOffsetY * 0.5 : imageOffsetY}px) scale(${imageScale})` }}
             onError={(e) => { e.target.style.opacity = '0.25'; }}/>
      </div>

      <div className="pc-bottom">
        <div className="pc-stats">
          <div className="pc-pill" style={{
            backgroundImage: CO.pillBg,
            borderColor: CO.pillStroke,
            boxShadow: `0 8px 24px ${CO.glow.replace('0.55','0.30')}, inset 0 1px 0 rgba(255,255,255,0.18)`,
          }}>
            <div className="pc-pill-glow" style={{
              background: `radial-gradient(ellipse 70% 65% at 50% 60%, ${CO.glow} 0%, transparent 70%)`
            }}></div>
            <span className="pc-pill-overall" style={{ color: CO.overallColor, fontSize: compact ? 22 : 32, letterSpacing: '-0.04em' }}>×{multStr}</span>
            <span className="pc-pill-label" style={{ color: CO.accentText }}>{ll.coachMult}</span>
          </div>

          <div className="pc-panel">
            <PanelBackground compact={compact} />
            <div className="pc-panel-content">
              <div className="pc-panel-row" style={{ justifyContent: 'center', textAlign: 'center' }}>
                <span className="pc-panel-label" style={{ color: CO.accentText, fontSize: compact ? 10 : 13, fontWeight: 500, opacity: 0.9, lineHeight: 1.3 }}>
                  {condition}
                </span>
              </div>
              <div className="pc-panel-body">
                <div className="pc-panel-name">{coachName}</div>
                <button className="pc-panel-cta" onClick={handleDetails}
                        aria-label={baseLL.details} title={baseLL.details}
                        style={{ borderColor: CO.pillStroke, color: CO.overallColor }}>
                  <IconArrow />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      {useEmbedded && (
        <CardDetailsModal
          open={detailsOpen}
          onClose={() => setDetailsOpen(false)}
          locale={locale}
          accent={CO.base}
          title={coachName}
          subtitle={ll.coachType}
          fields={[
            { label: ll.coachMult, value: '×' + toLocaleDigits(String(multiplier), locale) },
            { label: locale === 'en' ? 'Condition' : locale === 'ar' ? 'الشرط' : 'شرط فعال‌سازی', value: condition },
          ]}
        />
      )}

    </div>
  );
}

Object.assign(window, { NullCard, FanCard, CoachCard, SPECIAL_I18N });