import React from 'react';
import { ARCHETYPE_META } from '../engine/assetEngine';
import './AssetInfoPopup.css';

export default function AssetInfoPopup({ instance, def, onActivate, onClose }) {
  if (!instance || !def) return null;
  const meta = ARCHETYPE_META[def.archetype];
  const isManualCharge = def.trigger.type === 'manual_charge';
  const ready = isManualCharge && instance.charge >= 1;

  return (
    <div className="asset-popup-overlay" onClick={onClose}>
      <div className="asset-popup" onClick={e => e.stopPropagation()}>
        <div className="asset-popup-header">
          <span className={`asset-popup-grade grade-${def.grade}`}>{def.grade}</span>
          <span className="asset-popup-archetype">{meta.icon} {meta.label}</span>
          <button className="close-btn" onClick={onClose}>&times;</button>
        </div>

        <h3 className="asset-popup-name">{def.name}</h3>
        <p className="asset-popup-desc">{def.description}</p>

        {def.growth && (
          <div className="asset-popup-stat">
            현재 숙련 스택: <strong>{instance.stack || 0}</strong> (매 {def.growth.per}회마다 추가 발동)
          </div>
        )}

        {isManualCharge && (
          <div className="asset-popup-stat">
            {ready ? '충전 완료 — 발동 가능' : `충전 대기 중 (${def.trigger.params.chargeEvery}건마다 충전)`}
          </div>
        )}

        {ready && (
          <button className="asset-popup-activate" onClick={onActivate}>발동</button>
        )}

        <p className="asset-popup-flavor">{def.flavor}</p>
      </div>
    </div>
  );
}