// share-image.jsx — Genereer een PNG van het wisselplan (WhatsApp-ready)
const { useState: useState_SI, useRef: useRef_SI, useEffect: useEffect_SI } = React;

function ShareImageButton() {
  const { state } = useStore();
  const [open, setOpen] = useState_SI(false);
  const [imgUrl, setImgUrl] = useState_SI(null);
  const [busy, setBusy] = useState_SI(false);
  const stageRef = useRef_SI(null);

  const generate = async () => {
    setBusy(true);
    setImgUrl(null);
    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
    try {
      const node = stageRef.current;
      const dataUrl = await window.htmlToImage.toPng(node, {
        pixelRatio: 2,
        backgroundColor: "#ffffff",
        cacheBust: true,
      });
      setImgUrl(dataUrl);
    } catch (e) {
      console.error(e);
      alert("Afbeelding maken mislukt: " + e.message);
    }
    setBusy(false);
  };

  useEffect_SI(() => {
    if (open) generate();
    else setImgUrl(null);
  }, [open]);

  const download = () => {
    if (!imgUrl) return;
    const a = document.createElement("a");
    const teamSlug = (state.match.isUserHomeTeam ? state.match.homeTeam : state.match.awayTeam)
      .replace(/[^a-z0-9]+/gi, "-").toLowerCase() || "wedstrijd";
    a.href = imgUrl;
    a.download = `${teamSlug}-wisselplan.png`;
    document.body.appendChild(a);
    a.click();
    a.remove();
  };

  const copyToClipboard = async () => {
    if (!imgUrl) return;
    try {
      const blob = await (await fetch(imgUrl)).blob();
      await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
      alert("Afbeelding gekopieerd — plak in WhatsApp.");
    } catch (e) {
      alert("Kopiëren mislukt. Gebruik Download.");
    }
  };

  return (
    <>
      <button className="btn primary" onClick={() => setOpen(true)}>
        <span className="btn-ic">⤴</span> Deel als afbeelding
      </button>
      {open && (
        <div className="share-backdrop" onClick={() => setOpen(false)}>
          <div className="share-modal" onClick={(e) => e.stopPropagation()}>
            <header className="share-h">
              <div>
                <div className="share-eyebrow">EXPORT</div>
                <h3>Deelbaar wisselplan</h3>
              </div>
              <button className="icon-btn ghost" onClick={() => setOpen(false)}>×</button>
            </header>
            <div className="share-preview">
              <div className="share-stage-frame">
                <ShareStage ref={stageRef} state={state} />
              </div>
              <div className="share-render">
                {busy && <div className="share-busy">Bezig…</div>}
                {imgUrl && !busy && <img src={imgUrl} alt="Wisselplan" className="share-img" />}
              </div>
            </div>
            <footer className="share-footer">
              <button className="btn ghost" onClick={generate} disabled={busy}>↻ Opnieuw</button>
              <div style={{ flex: 1 }} />
              <button className="btn ghost" onClick={copyToClipboard} disabled={!imgUrl}>⧉ Kopiëren</button>
              <button className="btn primary" onClick={download} disabled={!imgUrl}>↓ Download</button>
            </footer>
          </div>
        </div>
      )}
    </>
  );
}

const ShareStage = React.forwardRef(function ShareStage({ state }, ref) {
  const { match, players, formation, gamePlan, positionLabels } = state;
  const us = match.isUserHomeTeam ? match.homeTeam : match.awayTeam;
  const them = match.isUserHomeTeam ? match.awayTeam : match.homeTeam;
  const halfMinutes = match.periodMinutes / 2;
  const stats = computePlayerStats(state);
  const fairnessMin = computeFairMinutes(state);
  const instructions = computeSubInstructions(state).filter((x) => x.events.length > 0);

  const columns = [];
  for (let p = 0; p < match.periods; p++) {
    columns.push({ p, h: 0 });
    columns.push({ p, h: 1 });
  }

  const playerName = (id) => players.find((p) => p.id === id)?.name || "—";

  // Bench per half for the share image
  const benchPerHalf = [];
  for (let p = 0; p < match.periods; p++) {
    for (let h = 0; h < 2; h++) {
      const cell = gamePlan?.[p]?.[h] || {};
      const playing = new Set(Object.values(cell));
      benchPerHalf.push({ p, h, bench: players.filter((pl) => !playing.has(pl.id)) });
    }
  }

  return (
    <div ref={ref} className="share-stage">
      <div className="ss-banner">
        <div className="ss-banner-l">
          <div className="ss-eyebrow">WISSELPLAN · {match.periods} × {match.periodMinutes}m</div>
          <div className="ss-headline">
            <span className="ss-us">{us}</span>
            <span className="ss-vs">tegen</span>
            <span className="ss-them">{them}</span>
            {match.location && <span className="ss-loc">({match.location})</span>}
          </div>
        </div>
        <div className="ss-banner-r">
          <div className="ss-fact"><span className="mono">{players.length}</span><span className="ss-fact-l">spelers</span></div>
          <div className="ss-fact"><span className="mono">{formation.length}</span><span className="ss-fact-l">op veld</span></div>
          <div className="ss-fact"><span className="mono">{fairnessMin}m</span><span className="ss-fact-l">eerlijk</span></div>
        </div>
      </div>

      <div className="ss-grid-card">
        <table className="ss-table">
          <thead>
            <tr>
              <th className="ss-th-pos">POS</th>
              {columns.map(({ p, h }) => (
                <th key={`${p}-${h}`} className={"ss-th " + (h === 0 ? "first" : "second")}>
                  <div className="ss-th-period">P{p + 1}</div>
                  <div className="ss-th-half">H{h + 1}</div>
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {formation.map((pos) => (
              <tr key={pos}>
                <th className="ss-row-h">
                  <span className="ss-pos-num">{pos}</span>
                  {positionLabels[pos] && <span className="ss-pos-role">{positionLabels[pos]}</span>}
                </th>
                {columns.map(({ p, h }) => {
                  const pid = getAssignment(gamePlan, p, h, pos);
                  return (
                    <td key={`${p}-${h}-${pos}`} className={"ss-cell " + (h === 0 ? "first" : "second") + (pid ? " filled" : "")}>
                      {pid ? playerName(pid) : "—"}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="ss-bottom">
        <div className="ss-bottom-l">
          <div className="ss-section-h">SPEELMINUTEN · eerlijk {fairnessMin}m</div>
          <div className="ss-load-grid">
            {players.map((p) => {
              const m = stats[p.id].totalMinutes;
              const below = m < fairnessMin;
              return (
                <div key={p.id} className={"ss-load-row " + (below ? "below" : "")}>
                  <span className="ss-load-name">{p.name}</span>
                  <span className="ss-load-mins mono">{m}m</span>
                  <span className="ss-load-bar">
                    <span className="ss-load-fill" style={{ width: `${Math.min(100, (m / Math.max(1, fairnessMin * 1.4)) * 100)}%` }}/>
                  </span>
                </div>
              );
            })}
          </div>
        </div>
        <div className="ss-bottom-r">
          <div className="ss-section-h">WISSELS</div>
          {instructions.length === 0 ? (
            <div className="ss-no-subs">Geen wissels gepland</div>
          ) : (
            <div className="ss-subs">
              {instructions.map(({ periodIdx, halfIdx, events }, i) => {
                const { swaps, standaloneIns, standaloneOuts, switches } = pairEvents(events);
                return (
                  <div key={i} className="ss-sub-col">
                    <div className="ss-sub-col-h">
                      <span className="mono">@{(periodIdx * 2 + halfIdx) * halfMinutes}m</span>
                      <span>P{periodIdx + 1} · H{halfIdx + 1}</span>
                    </div>
                    <ul>
                      {swaps.map((s, j) => (
                        <li key={"sw" + j} className="ss-swap">
                          <span className="ss-swap-in"><b>IN</b> {s.in.name} <span className="mono">[{s.in.toPos}]</span></span>
                          <span className="ss-swap-arr">⇄</span>
                          <span className="ss-swap-out"><b>UIT</b> {s.out.name} <span className="mono">[{s.out.fromPos}]</span></span>
                        </li>
                      ))}
                      {switches.map((e, j) => (
                        <li key={"sx" + j} className="ss-sub ss-sub-switch">
                          <span className="ss-sub-tag">VERPL</span>
                          <span className="ss-sub-name">{e.name}</span>
                          <span className="ss-sub-pos mono">{e.fromPos}→{e.toPos}</span>
                        </li>
                      ))}
                      {standaloneIns.map((e, j) => (
                        <li key={"in" + j} className="ss-sub ss-sub-in">
                          <span className="ss-sub-tag">IN</span>
                          <span className="ss-sub-name">{e.name}</span>
                          <span className="ss-sub-pos mono">[{e.toPos}]</span>
                        </li>
                      ))}
                      {standaloneOuts.map((e, j) => (
                        <li key={"ou" + j} className="ss-sub ss-sub-out">
                          <span className="ss-sub-tag">UIT</span>
                          <span className="ss-sub-name">{e.name}</span>
                          <span className="ss-sub-pos mono">[{e.fromPos}]</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="ss-bench-card">
        <div className="ss-section-h">BANK PER HELFT</div>
        <div className="ss-bench-grid">
          {benchPerHalf.map(({ p, h, bench }) => (
            <div key={`${p}-${h}`} className="ss-bench-col">
              <div className="ss-bench-col-h">
                P{p + 1} · H{h + 1} <span className="mono">({bench.length})</span>
              </div>
              <ul className="ss-bench-list">
                {bench.length === 0 ? <li className="dim">—</li>
                  : bench.map((pl) => <li key={pl.id}>{pl.name}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="ss-footer">
        <span>Wisselplanner</span>
        <span className="mono">{new Date().toLocaleDateString("nl-BE")}</span>
      </div>
    </div>
  );
});

Object.assign(window, { ShareImageButton });