const HistoryScreen = ({ onEdit, onDownload, userAvatarUrl }) => {
  const [items, setItems] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [busyId, setBusyId] = React.useState(null);
  const [confirmDeleteId, setConfirmDeleteId] = React.useState(null);
  const [previewItem, setPreviewItem] = React.useState(null);

  const load = React.useCallback(async () => {
    try {
      const res = await window.gtAPI.fetch("/thumbnails");
      setItems(res.items || []);
    } catch (e) {
      setError(e.message || "falha ao carregar galeria");
    }
  }, []);

  React.useEffect(() => { load(); }, [load]);

  // Poll while there are pending thumbnails so previews appear automatically.
  React.useEffect(() => {
    if (!items) return;
    if (!items.some((i) => i.status === "pending")) return;
    const t = setTimeout(load, 4000);
    return () => clearTimeout(t);
  }, [items, load]);

  const performDelete = async (id) => {
    setConfirmDeleteId(null);
    setBusyId(id);
    // Optimistic remove.
    const prev = items;
    setItems((curr) => curr.filter((i) => i.id !== id));
    try {
      await window.gtAPI.fetch(`/thumbnails/${id}`, { method: "DELETE" });
    } catch (e) {
      setItems(prev);
      alert(`Falha ao apagar: ${e.message}`);
    } finally {
      setBusyId(null);
    }
  };

  const handleDownload = async (item) => {
    if (busyId) return;
    setBusyId(item.id);
    try {
      const detail = await window.gtAPI.fetch(`/thumbnails/${item.id}`);
      const done = (detail.variations || []).find((v) => v.state === "completed");
      if (!done) throw new Error("nenhuma variação pronta");
      const { url, filename } = await window.gtAPI.fetch(
        `/thumbnails/${item.id}/variations/${done.id}/download`,
      );
      const a = document.createElement("a");
      a.href = url;
      a.download = filename;
      document.body.appendChild(a);
      a.click();
      a.remove();
      onDownload && onDownload("Thumb baixada");
    } catch (e) {
      alert(`Falha no download: ${e.message}`);
    } finally {
      setBusyId(null);
    }
  };

  return (
    <div className="fade-in">
      <div className="row-gap" style={{marginBottom: 22}}>
        <div>
          <div className="eyebrow"><span className="dot" />Galeria</div>
          <h1 className="display" style={{fontSize: 36, margin: "4px 0 0"}}>Suas thumbnails</h1>
          <div className="muted-2" style={{marginTop: 6}}>Tudo que você já gerou. Reabra, edite, baixe de novo.</div>
        </div>
        <div className="spacer" />
      </div>

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

      {items === null && !error && (
        <div className="muted" style={{padding: 40, textAlign: "center"}}>Carregando…</div>
      )}

      {items && items.length === 0 && !error && (
        <div className="card" style={{padding: 40, textAlign: "center"}}>
          <Icon name="image" size={32} />
          <div style={{marginTop: 12, fontSize: 16, fontWeight: 600}}>Nada por aqui ainda</div>
          <div className="muted-2" style={{marginTop: 6, fontSize: 13}}>Suas thumbnails aparecem aqui depois que você gerar a primeira.</div>
        </div>
      )}

      {items && items.length > 0 && (
        <div className="gal-grid">
          {items.map((item) => {
            const status = item.status;
            const isBusy = busyId === item.id;
            const isConfirming = confirmDeleteId === item.id;
            return (
              <div key={item.id} className="gal-card" style={{position: "relative"}}>
                <div className="gal-card-thumb" style={{position: "relative", background: "var(--bg-2)"}}>
                  {item.preview_url ? (
                    <window.ComposedThumb
                      imageUrl={item.preview_url}
                      imageUrlFull={item.preview_url_full}
                      subjectUrl={item.subject_url}
                      subjectUrlFull={item.subject_url_full}
                      avatarSubjectUrl={item.scene_only ? item.avatar_subject_url : null}
                      avatarSubjectUrlFull={item.scene_only ? item.avatar_subject_url_full : null}
                      avatarOverlay={item.avatar_overlay}
                      texts={item.texts}
                      overlay={item.text_overlay}
                    />
                  ) : (
                    <div style={{width: "100%", height: "100%", display: "grid", placeItems: "center", color: "var(--text-3)"}}>
                      {status === "pending"
                        ? <span className="ring" style={{width: 28, height: 28, borderWidth: 2, color: "var(--brand)"}} />
                        : <Icon name="image" size={28} />}
                    </div>
                  )}
                  {status !== "completed" && (
                    <span className="chip" style={{position: "absolute", top: 8, left: 8, fontSize: 10, height: 20, padding: "0 8px", zIndex: 3}}>
                      {status === "pending" ? "gerando…" : status === "failed" ? "falhou" : "parcial"}
                    </span>
                  )}

                  {/* Delete button — top-right floating, visible on hover. */}
                  <button
                    onClick={(e) => { e.stopPropagation(); setConfirmDeleteId(item.id); }}
                    disabled={isBusy}
                    title="Apagar thumbnail"
                    aria-label="Apagar thumbnail"
                    className="gal-card-delete"
                    style={{
                      position: "absolute", top: 8, right: 8, zIndex: 3,
                      width: 30, height: 30, borderRadius: 8,
                      background: "rgba(0,0,0,0.65)", color: "#fff",
                      border: 0, padding: 0, cursor: "pointer",
                      display: "grid", placeItems: "center",
                      backdropFilter: "blur(4px)",
                    }}
                  >
                    <Icon name="trash" size={14} />
                  </button>
                </div>
                <div className="gal-card-body">
                  <div className="gal-card-title" title={item.youtube_title || item.youtube_url}>
                    {item.youtube_title || item.youtube_url || "Sem título"}
                  </div>
                  <div className="gal-card-meta">
                    <span>{new Date(item.created_at).toLocaleDateString("pt-BR")}</span>
                    {item.variations_count > 1 && (
                      <>
                        <span>·</span>
                        <span style={{display: "inline-flex", gap: 4, alignItems: "center"}}>
                          <span style={{color: "#8B5CF6", display: "inline-flex"}}>
                            <Icon name="sparkles" size={11} />
                          </span>
                          <span style={{
                            background: "linear-gradient(90deg, #06B6D4, #8B5CF6, #EC4899)",
                            WebkitBackgroundClip: "text",
                            backgroundClip: "text",
                            color: "transparent",
                            fontWeight: 700,
                            letterSpacing: "0.02em",
                            textTransform: "uppercase",
                          }}>Teste A/B</span>
                        </span>
                      </>
                    )}
                  </div>
                </div>
                <div className="gal-card-actions">
                  <button className="btn btn-sm"
                          disabled={isBusy || status === "failed"}
                          onClick={() => onEdit({ thumbnailId: item.id })}>
                    <Icon name="edit" size={13} /> Editar
                  </button>
                  <button className="btn btn-sm" disabled={isBusy || !item.preview_url}
                          onClick={() => setPreviewItem(item)}
                          title="Preview no YouTube">
                    <Icon name="play" size={13} /> Preview
                  </button>
                  <button className="btn btn-sm btn-primary" disabled={isBusy || !item.preview_url}
                          onClick={() => handleDownload(item)}>
                    <Icon name="download" size={13} /> {isBusy ? "…" : "Baixar"}
                  </button>
                </div>

                {/* Inline confirmation overlay — keeps the destructive action obvious */}
                {isConfirming && (
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "rgba(0,0,0,0.78)", borderRadius: 14,
                    display: "grid", placeItems: "center", zIndex: 10,
                    color: "#fff", padding: 18, textAlign: "center",
                    backdropFilter: "blur(2px)",
                  }}>
                    <div>
                      <div style={{fontWeight: 600, fontSize: 14}}>Apagar essa thumbnail?</div>
                      <div className="muted-2" style={{fontSize: 12, marginTop: 4, color: "rgba(255,255,255,0.7)"}}>
                        Não dá pra desfazer.
                      </div>
                      <div className="row-gap" style={{gap: 8, marginTop: 14, justifyContent: "center"}}>
                        <button className="btn btn-sm" onClick={() => setConfirmDeleteId(null)}>Cancelar</button>
                        <button className="btn btn-sm" onClick={() => performDelete(item.id)}
                                style={{background: "var(--brand)", borderColor: "var(--brand)", color: "#fff"}}>
                          <Icon name="trash" size={12} /> Apagar
                        </button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}

      {previewItem && (
        <window.YouTubePreviewModal
          thumbnail={{
            imageUrl: previewItem.preview_url,
            imageUrlFull: previewItem.preview_url_full,
            subjectUrl: previewItem.subject_url,
            subjectUrlFull: previewItem.subject_url_full,
            avatarSubjectUrl: previewItem.scene_only ? previewItem.avatar_subject_url : null,
            avatarSubjectUrlFull: previewItem.scene_only ? previewItem.avatar_subject_url_full : null,
            avatarOverlay: previewItem.avatar_overlay,
            texts: previewItem.texts,
            overlay: previewItem.text_overlay,
            title: previewItem.youtube_title || "Sua thumbnail",
            channel: "Seu canal",
          }}
          userAvatarUrl={userAvatarUrl}
          onClose={() => setPreviewItem(null)}
        />
      )}
    </div>
  );
};

window.HistoryScreen = HistoryScreen;