/* iBD Coliseum — card detail modal (explanation, optional link/skill file, optional output screenshot) */

function useOutputScreenshot(cardId) {
  const [hasScreenshot, setHasScreenshot] = React.useState(false);

  React.useEffect(() => {
    const slotId = "output-" + cardId;
    const check = () => {
      if (window.IMAGE_SLOT && window.IMAGE_SLOT.hasImage(slotId)) {
        setHasScreenshot(true);
        return;
      }
      const el = document.querySelector('image-slot[id="' + slotId + '"]');
      setHasScreenshot(!!(el && el.hasAttribute("data-filled")));
    };

    let unsub = null;
    let observer = null;
    const ready = window.IMAGE_SLOT && window.IMAGE_SLOT.whenReady
      ? window.IMAGE_SLOT.whenReady()
      : Promise.resolve();

    ready.then(() => {
      check();
      if (window.IMAGE_SLOT && window.IMAGE_SLOT.subscribe) {
        unsub = window.IMAGE_SLOT.subscribe(check);
      }
      const el = document.querySelector('image-slot[id="' + slotId + '"]');
      if (el) {
        observer = new MutationObserver(check);
        observer.observe(el, { attributes: true, attributeFilter: ["data-filled"] });
      }
    });

    return () => {
      if (unsub) unsub();
      if (observer) observer.disconnect();
    };
  }, [cardId]);

  return hasScreenshot;
}

function DetailModal({ card, onClose }) {
  const { CATEGORIES, DETAILS, SKILL, avatarColor, initials, classifyEntryShareFromCard } = window.COLISEUM_DATA;
  const cat = CATEGORIES.find((c) => c.id === card.cat) || { color: "var(--accent)", label: card.cat };
  const detail = card.detail || DETAILS[card.id] || DETAILS.default;
  const share = classifyEntryShareFromCard(card);
  const outputImage = (detail.outputImage || "").trim();
  const slotHasImage = useOutputScreenshot(card.id);
  const hasScreenshot = !!outputImage || slotHasImage;
  const [copied, setCopied] = React.useState(false);

  const explanation = (detail.prompt || "").trim() || (card.desc || "").trim();
  const explanationLabel = (detail.prompt || "").trim() ? "How to reproduce" : "About this";
  const openLabel = share.type === "link" && /claude\.ai/i.test(share.href) ? "Open in Claude" : "Open link";

  const copyShare = () => {
    if (share.type === "none") return;
    const done = () => { setCopied(true); setTimeout(() => setCopied(false), 1600); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(share.value).then(done, done);
    } else { done(); }
  };

  return (
    <div className="overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal detail-modal" role="dialog" aria-modal="true" style={{ "--cat": cat.color }}>
        <div className="mhead">
          <div>
            <div className="eyebrow" style={{ color: cat.color }}>{cat.label}</div>
            <h2>{card.title}</h2>
            <div className="dm-author">
              <span className="av" style={{ background: avatarColor(card.author) }}>{initials(card.author)}</span>
              <span>{card.author} · {card.team}</span>
            </div>
          </div>
          <button className="x" onClick={onClose} aria-label="Close"><Icon name="x" className="ic" style={{ width: 16, height: 16 }} /></button>
        </div>

        <div className="mbody">
          {share.type === "link" &&
            <div className="dm-block">
              <div className="dm-label">
                <span><Icon name="link" className="ic" />Shared link</span>
                <button className="dm-copy" onClick={copyShare}>
                  <Icon name={copied ? "check" : "copy"} className="ic" />{copied ? "Copied" : "Copy link"}
                </button>
              </div>
              <a className="dm-skill" href={share.href} target="_blank" rel="noopener noreferrer">
                <span className="dm-skill-ic"><Icon name="link" className="ic" /></span>
                <span className="dm-skill-main">
                  <span className="dm-skill-url">{share.value}</span>
                </span>
                <span className="dm-skill-go">Open<Icon name="external" className="ic" /></span>
              </a>
            </div>}

          {share.type === "download" &&
            <div className="dm-block">
              <div className="dm-label">
                <span><Icon name="download" className="ic" />{share.downloadExt === "skill" ? "Skill file" : "File download"}</span>
                <button className="dm-copy" onClick={copyShare}>
                  <Icon name={copied ? "check" : "copy"} className="ic" />{copied ? "Copied" : "Copy URL"}
                </button>
              </div>
              <div className="dm-output-cap">
                <span className="cap-text">{share.downloadName}</span>
              </div>
              {share.downloadExt === "skill" &&
                <p className="muted" style={{ margin: "8px 0 0", fontSize: "var(--fs-small)" }}>{SKILL.note}</p>}
            </div>}

          {share.type === "link" && hasScreenshot && explanation && <div className="dm-arrow"><span>produces</span></div>}

          {explanation &&
            <div className="dm-block">
              <div className="dm-label"><span><Icon name="sparkle" className="ic" />{explanationLabel}</span></div>
              <div className="dm-output-cap"><span className="cap-text" style={{ whiteSpace: "pre-wrap" }}>{explanation}</span></div>
            </div>}

          {hasScreenshot &&
            <div className="dm-block">
              <div className="dm-label"><span><Icon name="sparkle" className="ic" />What Claude produced</span></div>
              <figure className="dm-shot">
                <div className="dm-shot-bar"><i></i><i></i><i></i><span>Claude · output</span></div>
                {outputImage
                  ? <img className="dm-shot-img" src={outputImage} alt="Screenshot of Claude's output" />
                  : <image-slot
                    id={"output-" + card.id}
                    shape="rect"
                    fit="cover"
                    placeholder="Drop a screenshot of Claude's output"
                    style={{ display: "block", width: "100%", height: "210px" }}
                  ></image-slot>}
              </figure>
              {detail.output &&
                <div className="dm-output-cap"><span className="cap-tag">Example result</span><span className="cap-text">{detail.output}</span></div>}
            </div>}
        </div>

        {(share.type === "link" || share.type === "download") &&
          <div className="mfoot dm-foot">
            {share.type === "link" &&
              <a className="btn btn-primary" href={share.href} target="_blank" rel="noopener noreferrer">
                {openLabel}<Icon name="external" className="ic" />
              </a>}
            {share.type === "download" &&
              <a className="btn btn-primary" href={share.href} download={share.downloadName} title={share.downloadExt === "skill" ? SKILL.note : "Download the file and open it locally."}>
                <Icon name="download" className="ic" />{share.downloadLabel}
              </a>}
          </div>}
      </div>
    </div>
  );
}

window.DetailModal = DetailModal;