// Result page after generation. Polls GET /thumbnails/:id until terminal state,
// then shows the variation images (1 = hero only, >1 = A/B grid + picked hero).

const POLL_INTERVAL_MS = 3000;

const ThumbResult = ({ result, onEdit, onDownload, onNew }) => {
  const thumbnailId = result?.thumbnailId;
  const [thumb, setThumb] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [picked, setPicked] = React.useState(0);
  const [downloading, setDownloading] = React.useState(false);

  // Sync local "picked" to the persisted selected_variation_id whenever the
  // thumb data refreshes — keeps Result, Editor, and gallery preview aligned.
  React.useEffect(() => {
    if (!thumb?.variations) return;
    if (!thumb.selected_variation_id) return;
    const idx = thumb.variations.findIndex((v) => v.id === thumb.selected_variation_id);
    if (idx >= 0) setPicked(idx);
  }, [thumb?.selected_variation_id, thumb?.variations]);

  const pickAndPersist = (i, variationId) => {
    setPicked(i);
    if (!variationId) return;
    window.gtAPI.fetch(`/thumbnails/${thumbnailId}`, {
      method: "PATCH",
      body: JSON.stringify({ selected_variation_id: variationId }),
    }).catch((e) => console.warn("save selected variation failed:", e));
  };

  // Poll until terminal status.
  React.useEffect(() => {
    if (!thumbnailId) return;
    let active = true;
    let timer = null;

    const tick = async () => {
      try {
        const t = await window.gtAPI.fetch(`/thumbnails/${thumbnailId}`);
        if (!active) return;
        setThumb(t);
        if (t.status === "pending") {
          timer = setTimeout(tick, POLL_INTERVAL_MS);
        }
      } catch (e) {
        if (!active) return;
        setError(e.message || "falha ao carregar");
      }
    };

    tick();
    return () => { active = false; if (timer) clearTimeout(timer); };
  }, [thumbnailId]);

  if (!thumbnailId) {
    return <div className="result-wrap fade-in"><div className="muted">Nada gerado ainda.</div></div>;
  }

  const variations = thumb?.variations ?? [];
  const isAB = (thumb?.variations_count ?? 1) > 1;
  const status = thumb?.status ?? "pending";
  const hero = variations[picked] ?? variations[0];

  const heroDownload = async () => {
    if (!hero || hero.state !== "completed" || downloading) return;
    setDownloading(true);
    try {
      const { url, filename } = await window.gtAPI.fetch(`/thumbnails/${thumbnailId}/variations/${hero.id}/download`);
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      onDownload && onDownload("Thumbnail baixada em PNG (1280×720)");
    } catch (e) {
      onDownload && onDownload(`Falha no download: ${e.message}`);
    } finally {
      setDownloading(false);
    }
  };

  const heroEdit = () => {
    // Edit works while pending — the editor polls and shows the image when
    // it's ready. Block only on hard failure.
    if (status === "failed") return;
    onEdit && onEdit({ thumbnailId, variationId: hero?.id, imageUrl: hero?.image_url });
  };

  return (
    <div className="result-wrap fade-in">
      {/* Header */}
      <div className="result-head">
        <div className="col-gap" style={{gap: 6, flex: 1, minWidth: 0}}>
          <div className="eyebrow" style={{color: "var(--brand)"}}>
            <span className="dot" style={{background: "var(--brand)"}} />
            {status === "pending" ? "Gerando…" :
             status === "failed" ? "Falhou" :
             status === "partial" ? `${variations.filter(v => v.state === "completed").length}/${variations.length} variações` :
             isAB ? `${variations.length} variações geradas` : "thumbnail pronta"}
          </div>
          <h1 style={{fontSize: 32, lineHeight: 1.15, margin: 0, fontFamily: "var(--font-display)", letterSpacing: "-0.02em"}}>
            {thumb?.youtube_title || "Sua thumbnail"}
          </h1>
          <div className="result-meta">
            {thumb?.youtube_author && <span><Icon name="youtube" size={13} /> {thumb.youtube_author}</span>}
            {thumb?.created_at && <span>· {new Date(thumb.created_at).toLocaleString("pt-BR")}</span>}
          </div>
        </div>
        <button className="btn" onClick={onNew}><Icon name="plus" size={14} /> Nova thumbnail</button>
      </div>

      {error && (
        <div className="card" style={{padding: 14, borderColor: "var(--brand)", color: "var(--brand)", marginTop: 16}}>
          {error}
        </div>
      )}

      {/* Hero preview */}
      <div className="result-hero">
        <div className="result-hero-thumb">
          <VariationView v={hero} large />
        </div>

        {/* Side panel */}
        <div className="result-side">
          <div className="result-cta-stack">
            <button className="btn btn-primary btn-lg" onClick={heroDownload}
                    disabled={!hero || hero.state !== "completed" || downloading}>
              <Icon name="download" size={16} /> {downloading ? "Baixando…" : "Baixar PNG"}
            </button>
            <button className="btn" onClick={heroEdit} disabled={status === "failed"}>
              <Icon name="edit" size={14} /> Editar
            </button>
          </div>

          <div className="divider" />

          {/* Recipe summary */}
          <div className="col-gap" style={{gap: 10}}>
            <div className="eyebrow">Como foi montada</div>
            <div className="result-recipe">
              <div className="recipe-row">
                <div className="recipe-icon"><Icon name="youtube" size={14} /></div>
                <div>
                  <div className="recipe-key">Vídeo</div>
                  <div className="recipe-val">{thumb?.youtube_title ?? thumb?.youtube_url ?? "—"}</div>
                </div>
              </div>
              <div className="recipe-row">
                <div className="recipe-icon"><Icon name="image" size={14} /></div>
                <div>
                  <div className="recipe-key">Aspect ratio</div>
                  <div className="recipe-val">{thumb?.aspect_ratio ?? "16:9"}</div>
                </div>
              </div>
              <div className="recipe-row">
                <div className="recipe-icon"><Icon name="sparkles" size={14} /></div>
                <div>
                  <div className="recipe-key">Variações</div>
                  <div className="recipe-val">{variations.length} solicitadas</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* A/B variations strip */}
      {isAB && variations.length > 1 && (
        <div className="result-ab">
          <div className="eyebrow" style={{marginBottom: 10}}><Icon name="sparkles" size={12} /> Teste A/B — escolha a vencedora</div>
          <div className="result-ab-grid">
            {variations.map((v, i) => (
              <button key={v.id}
                      className={"result-ab-card " + (picked === i ? "active" : "")}
                      onClick={() => pickAndPersist(i, v.id)}>
                <div className="result-ab-thumb">
                  <VariationView v={v} />
                </div>
                <div className="result-ab-meta">
                  <span className="mono" style={{fontSize: 10, color: "var(--text-3)"}}>VAR {String(i+1).padStart(2, "0")}</span>
                  <span className="mono" style={{fontSize: 10, color: "var(--text-3)"}}>{v.state}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const VariationView = ({ v, large }) => {
  const spinnerSize = large ? 48 : 22;
  const spinner = <span className="ring" style={{width: spinnerSize, height: spinnerSize, borderWidth: large ? 3 : 2, color: "var(--brand)"}} />;
  if (!v) {
    return <div style={{width: "100%", height: "100%", display: "grid", placeItems: "center", background: "var(--bg-2)"}}>{spinner}</div>;
  }
  if (v.state === "completed" && v.image_url) {
    return <img src={v.image_url} alt="" style={{width: "100%", height: "100%", objectFit: "cover", display: "block"}} />;
  }
  if (v.state === "failed") {
    return <div style={{width: "100%", height: "100%", display: "grid", placeItems: "center", background: "var(--bg-2)", color: "var(--text-3)", fontSize: large ? 14 : 11, padding: 12, textAlign: "center"}}>
      <div>
        <Icon name="close" size={large ? 24 : 14} />
        <div style={{marginTop: 6}}>{v.failure_reason || "falhou"}</div>
      </div>
    </div>;
  }
  return <div style={{width: "100%", height: "100%", display: "grid", placeItems: "center", background: "var(--bg-2)"}}>{spinner}</div>;
};

window.ThumbResult = ThumbResult;