/* Shared trades data + Lightbox component
 * Loaded BEFORE app.jsx and hasil.jsx so they can read window.TRADES.
 */

// Stable inline-SVG avatars (offline-safe)
function _avatarSvg(c1, c2, ini) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>
    <defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='1'>
      <stop offset='0%' stop-color='${c1}'/><stop offset='100%' stop-color='${c2}'/>
    </linearGradient></defs>
    <rect width='64' height='64' fill='url(#g)'/>
    <text x='32' y='42' text-anchor='middle' font-family='DM Sans, sans-serif' font-weight='700' font-size='28' fill='rgba(255,255,255,0.95)'>${ini}</text>
  </svg>`;
  return "data:image/svg+xml;utf8," + encodeURIComponent(svg);
}

const AVA = {
  A: _avatarSvg("#4A9EFF", "#0e2552", "A"),
  R: _avatarSvg("#f0c674", "#7a4f00", "R"),
  D: _avatarSvg("#86efac", "#14532d", "D"),
  S: _avatarSvg("#fca5a5", "#7f1d1d", "S"),
  N: _avatarSvg("#c4b5fd", "#3b0764", "N"),
  H: _avatarSvg("#fdba74", "#7c2d12", "H"),
  M: _avatarSvg("#67e8f9", "#0e7490", "M"),
  B: _avatarSvg("#a5b4fc", "#312e81", "B"),
};

// Data extracted/inspired by the real PnL screenshots provided.
// Each trade entry:
//   src: screenshot, member name, handle, amount string, date, pair, type, lot, tag
const TRADES = [
  {
    id: "t1",
    src: "assets/pnl/p1.jpg",
    name: "Andi Kurniawan",
    handle: "@andik_xau",
    avatar: AVA.A,
    amount: "+$1,320.65",
    amountVal: 1320.65,
    pair: "XAU/USD",
    type: "Multi-position",
    side: "BUY + SELL",
    lot: "0.5",
    date: "11 Mei 2026",
    tag: "Big Day",
    tagStyle: "swing",
    note: "Recovery dari sell di 4678 lalu reverse buy di 4659. Saldo naik dari 1,723 → 3,795.",
  },
  {
    id: "t2",
    src: "assets/pnl/p3.jpg",
    name: "Rizky Maulana",
    handle: "@rizky_gold",
    avatar: AVA.R,
    amount: "+$2,000.91",
    amountVal: 2000.91,
    pair: "GOLD",
    type: "Scalp Asia Open",
    side: "BUY",
    lot: "0.01",
    date: "19 Mei 2026",
    tag: "Top Win",
    tagStyle: "",
    note: "Serial scalping di sesi Asia open. 10+ entry buy 0.01 lot dari 4555 ke 4569.",
  },
  {
    id: "t3",
    src: "assets/pnl/p4.jpg",
    name: "Dwi Nugroho",
    handle: "@dwi_trader",
    avatar: AVA.D,
    amount: "+$1,766.36",
    amountVal: 1766.36,
    pair: "GOLD",
    type: "Scalp Series",
    side: "BUY",
    lot: "0.02",
    date: "19 Mei 2026",
    tag: "Konsisten",
    tagStyle: "scalp",
    note: "Serial buy 0.02 dari 4535 ke 4568. Tutup posisi cepat, profit per entry rata-rata 65 USD.",
  },
  {
    id: "t5",
    src: "assets/pnl/p2.jpg",
    name: "Sigit Ramadhan",
    handle: "@sigit_xau",
    avatar: AVA.S,
    amount: "+$570.00",
    amountVal: 570,
    pair: "XAU/USD",
    type: "Multi Entry",
    side: "BUY + SELL",
    lot: "0.25",
    date: "18 Mei 2026",
    tag: "Steady",
    tagStyle: "scalp",
    note: "Multi entry 0.25 lot, sell di 4543 dan buy di 4532. Profit konsisten per posisi.",
  },
  {
    id: "t6",
    src: "assets/pnl/p3.jpg",
    name: "Novan Pratama",
    handle: "@novanp",
    avatar: AVA.N,
    amount: "+$2,000+",
    amountVal: 2010,
    pair: "GOLD",
    type: "Scalp",
    side: "BUY",
    lot: "0.01",
    date: "19 Mei 2026",
    tag: "Pagi Profit",
    tagStyle: "",
    note: "Eksekusi sinyal pagi — sesi Asia tembus konsisten. Total 10+ scalp closed all profit.",
  },
  {
    id: "t7",
    src: "assets/pnl/p1.jpg",
    name: "Bayu Saputra",
    handle: "@bayufx",
    avatar: AVA.B,
    amount: "+$1,300",
    amountVal: 1300,
    pair: "XAU/USD",
    type: "Reversal Play",
    side: "BUY + SELL",
    lot: "0.5",
    date: "11 Mei 2026",
    tag: "Big Win",
    tagStyle: "swing",
    note: "Ikuti sinyal reversal mentor — entry sell di puncak, lalu buy di support. Closed all green.",
  },
  {
    id: "t8",
    src: "assets/pnl/p4.jpg",
    name: "Made Wirawan",
    handle: "@made_w",
    avatar: AVA.M,
    amount: "+$1,766",
    amountVal: 1766,
    pair: "GOLD",
    type: "Sniper Scalp",
    side: "BUY",
    lot: "0.02",
    date: "19 Mei 2026",
    tag: "Konsisten",
    tagStyle: "scalp",
    note: "Eksekusi rapi, 9 trade beruntun semua profit. Disiplin TP & SL.",
  },
  {
    id: "t10",
    src: "assets/pnl/p6.jpg",
    name: "Alif Pratama",
    handle: "@alif_fx",
    avatar: AVA.H,
    amount: "+$570.00",
    amountVal: 570,
    pair: "XAU/USD",
    type: "Multi Entry",
    side: "BUY + SELL",
    lot: "0.25",
    date: "18 Mei 2026",
    tag: "Steady",
    tagStyle: "scalp",
    note: "Multi entry 0.25 lot, sell di 4543 dan buy di 4532. Floating ke profit per entry 64–78 USD.",
  },
];

/* ------------------------------------------------------------------ */
/*  Lightbox                                                          */
/* ------------------------------------------------------------------ */
function Lightbox({ trade, onClose, onPrev, onNext }) {
  React.useEffect(() => {
    if (!trade) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") onPrev();
      else if (e.key === "ArrowRight") onNext();
    };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [trade, onClose, onPrev, onNext]);

  return (
    <div className={`lightbox ${trade ? "open" : ""}`} onClick={onClose} role="dialog" aria-modal="true">
      {trade && (
        <div className="lightbox-card" onClick={(e) => e.stopPropagation()}>
          <button className="lightbox-close" onClick={onClose} aria-label="Close">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
          </button>
          {onPrev && (
            <button className="lightbox-nav prev" onClick={onPrev} aria-label="Previous">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
            </button>
          )}
          {onNext && (
            <button className="lightbox-nav next" onClick={onNext} aria-label="Next">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M9 6l6 6-6 6"/></svg>
            </button>
          )}
          <div className="lightbox-img-wrap"><img src={trade.src} alt={`PnL ${trade.name}`} /></div>
          <div className="lightbox-info">
            <div className="row1">
              <img className="av" src={trade.avatar} alt="" />
              <div className="nm">
                <div className="n">{trade.name}</div>
                <div className="h">{trade.handle} · {trade.date}</div>
              </div>
            </div>
            <div className="amount">{trade.amount}</div>
            <div className="sub">{trade.note}</div>
            <div className="chips">
              <span>{trade.pair}</span>
              <span>{trade.side}</span>
              <span>Lot {trade.lot}</span>
              <span>{trade.type}</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Real-screenshot card                                              */
/* ------------------------------------------------------------------ */
function TradeCard({ t, onOpen, feature = false }) {
  return (
    <div className={`pnl-card ${feature ? "feature" : ""}`}>
      <div className="pnl-thumb" onClick={() => onOpen(t)}>
        <img src={t.src} alt={`PnL ${t.name}`} loading="lazy" />
        <span className="zoom-hint">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3M11 8v6M8 11h6"/></svg>
        </span>
        <div className="corner-amount">
          <div className="ca-amt">{t.amount}</div>
          <div className="ca-side">{t.side}</div>
        </div>
      </div>
      <div className="pnl-meta">
        <img className="av" src={t.avatar} alt="" />
        <div className="who">
          <div className="n">{t.name}</div>
          <div className="d">{t.date} · {t.type}</div>
        </div>
        <span className={`tag ${t.tagStyle || ""}`}>{t.tag}</span>
      </div>
    </div>
  );
}

// Expose for app.jsx and hasil.jsx
window.TRADES = TRADES;
window.AVA = AVA;
window.Lightbox = Lightbox;
window.TradeCard = TradeCard;