// =============================================================
// Project editor — top bar: back nav, title, zoom, save, export menu.
// =============================================================
function ProjectTopbar({
  doc, setDoc, onBack, scale, toast,
  saving, isSaved, saveLabel, onSave,
  onUndo, onRedo, canUndo, canRedo,
  exporting, exportOpen, setExportOpen,
  onExport, onExportPdf, onExportZip,
}) {
  return (
    <div className="editor-topbar">
      <div className="editor-topbar-left">
        <button className="editor-back" onClick={onBack}>
          <Icons.ArrowLeft size={14} />
          All templates
        </button>
        <div style={{ width: 1, height: 24, background: "var(--line)" }}></div>
        <input
          className="editor-title-input"
          value={doc.name}
          onChange={(e) => setDoc({ ...doc, name: e.target.value })}
        />
        <div style={{ color: "var(--ink-3)", fontSize: 12 }}>· {doc.category || doc.platform} · {doc.width} × {doc.height}</div>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <button
          className="btn btn-sm btn-ghost"
          onClick={onUndo}
          disabled={!canUndo}
          title="Undo (Ctrl+Z)"
          style={{ padding: "6px 8px", opacity: canUndo ? 1 : 0.4 }}
        >
          <Icons.Undo size={14} />
        </button>
        <button
          className="btn btn-sm btn-ghost"
          onClick={onRedo}
          disabled={!canRedo}
          title="Redo (Ctrl+Shift+Z)"
          style={{ padding: "6px 8px", opacity: canRedo ? 1 : 0.4 }}
        >
          <Icons.Redo size={14} />
        </button>
        <div style={{ width: 1, height: 20, background: "var(--line)" }}></div>
        <div style={{ color: "var(--ink-3)", fontSize: 12, marginRight: 8 }}>
          {Math.round(scale * 100)}%
        </div>
        {toast && (
          <div style={{ color: "var(--ink)", fontSize: 12, background: "var(--line)", padding: "6px 12px", borderRadius: 8, marginRight: 4 }}>
            {toast}
          </div>
        )}
        <button
          className="btn btn-sm btn-ghost"
          onClick={onSave}
          disabled={saving}
        >
          {saving ? <span className="spinner" /> : isSaved ? <Icons.Check size={14} /> : <Icons.Layers size={14} />}
          {" "}{isSaved ? "Saved" : saveLabel}
        </button>
        <div style={{ position: "relative" }}>
          <button className="btn btn-sm btn-yellow" onClick={() => setExportOpen((o) => !o)} disabled={exporting}>
            {exporting ? <span className="spinner" /> : <Icons.Download size={14} />} Export
            <Icons.ChevronDown size={12} style={{ marginLeft: 2 }} />
          </button>
          {exportOpen && (
            <>
              <div style={{ position: "fixed", inset: 0, zIndex: 40 }} onClick={() => setExportOpen(false)} />
              <div style={{ position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 41, minWidth: 210, background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 12, padding: 6, boxShadow: "0 12px 32px rgba(0,0,0,0.3)" }}>
                <div style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--ink-3)", padding: "8px 10px 4px" }}>THIS SLIDE</div>
                <button className="export-item" onClick={() => onExport("png")}>PNG <span>lossless</span></button>
                <button className="export-item" onClick={() => onExport("jpeg")}>JPEG <span>smaller file</span></button>
                <div style={{ height: 1, background: "var(--line)", margin: "6px 4px" }} />
                <div style={{ fontSize: 10.5, letterSpacing: "0.08em", color: "var(--ink-3)", padding: "4px 10px 4px" }}>
                  {doc.slides.length > 1 ? `ALL ${doc.slides.length} SLIDES` : "DOCUMENT"}
                </div>
                <button className="export-item" onClick={onExportPdf}>PDF <span>{doc.slides.length > 1 ? `${doc.slides.length}-page` : "1-page"}</span></button>
                {doc.slides.length > 1 && (
                  <>
                    <button className="export-item" onClick={() => onExportZip("png")}>ZIP <span>PNG ×{doc.slides.length}</span></button>
                    <button className="export-item" onClick={() => onExportZip("jpeg")}>ZIP <span>JPEG ×{doc.slides.length}</span></button>
                  </>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.ProjectTopbar = ProjectTopbar;