// Dashboard + Folder view
const { Button: BtnB, Info: InfoB, Ic: IcB, FileIcon: FIB } = window.UI;
const { useState: uSD, useEffect: uED, useCallback: uCB } = React;

function DashboardScreen({ t, lang, search, onOpenFolder, onNewFolder, onUpload, onHelp, onRefreshNeeded }) {
  const ConfirmModal = window.ConfirmModal;
  const [folders, setFolders]     = uSD([]);
  const [loading, setLoading]     = uSD(true);
  const [gridKey, setGridKey]     = uSD(0);
  const [menuOpen, setMenuOpen]     = uSD(null);
  const [renaming, setRenaming]     = uSD(null);
  const [renameVal, setRenameVal]   = uSD("");
  const [confirmState, setConfirm]  = uSD(null);

  const load = uCB(() => {
    setLoading(true);
    window.API_CLIENT.apiGet("/folders")
      .then((data) => { setFolders(data || []); setGridKey((k) => k + 1); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  uED(() => { load(); }, [load]);

  uED(() => {
    if (onRefreshNeeded) onRefreshNeeded(load);
  }, [onRefreshNeeded, load]);

  uED(() => {
    if (!menuOpen) return;
    const close = () => setMenuOpen(null);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [menuOpen]);

  const deleteFolder = async (id) => {
    try { await window.API_CLIENT.apiDelete("/folders/" + id); load(); } catch {}
  };

  const saveRename = async (id) => {
    const name = renameVal.trim();
    if (!name) return;
    try { await window.API_CLIENT.apiPut("/folders/" + id, { name }); setRenaming(null); load(); } catch {}
  };

  const filtered = folders.filter((f) =>
    f.status !== "archived" && f.status !== "deleted" &&
    (!search || f.name.toLowerCase().includes(search.toLowerCase()))
  );

  return (
    <div className="main">
      <div className="page-head">
        <div>
          <h1 className="page-title">{t.dashboard.title_a} <em>{t.dashboard.title_b}</em>.</h1>
          <p className="page-sub">{t.dashboard.sub}</p>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <span data-tour="upload" style={{ display: "inline-flex" }}>
            <BtnB icon={<IcB.upload />} onClick={onUpload}>{t.dashboard.upload}</BtnB>
          </span>
          <span data-tour="create" style={{ display: "inline-flex" }}>
            <BtnB variant="primary" icon={<IcB.folderPlus />} onClick={onNewFolder}>{t.dashboard.new_folder}</BtnB>
          </span>
        </div>
      </div>


      {loading && (
        <div style={{ padding: 40, textAlign: "center", color: "var(--ink-soft)" }}>
          <IcB.cloud />
          <div style={{ marginTop: 8 }}>{lang === "it" ? "Caricamento…" : "Loading…"}</div>
        </div>
      )}

      {!loading && filtered.length === 0 && (
        <div style={{ padding: 60, textAlign: "center", color: "var(--ink-soft)" }}>
          <IcB.folder />
          <div style={{ marginTop: 8, fontWeight: 500, color: "var(--ink)" }}>{t.dashboard.empty_t}</div>
          <div style={{ fontSize: 13, marginTop: 4 }}>{t.dashboard.empty_d}</div>
        </div>
      )}

      {!loading && filtered.length > 0 && (
        <div className="grid-folders" key={gridKey}>
          {filtered.map((f, i) => (
            <div className="folder-card" key={f.id} style={{"--card-i": i}}
              onClick={() => { if (renaming !== f.id) onOpenFolder(f.id); }}>
              <div className="top">
                <div className="ic"><IcB.folder /></div>
                <div style={{ position: "relative" }}>
                  <button className="iconbtn" aria-label="more"
                    onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === f.id ? null : f.id); }}>
                    <IcB.more />
                  </button>
                  {menuOpen === f.id && (
                    <div className="folder-menu" onClick={(e) => e.stopPropagation()}>
                      <button className="folder-menu-item" onClick={() => {
                        setMenuOpen(null); setRenaming(f.id); setRenameVal(f.name);
                      }}>
                        <IcB.pencil /> {lang === "it" ? "Rinomina" : "Rename"}
                      </button>
                      <button className="folder-menu-item" onClick={(e) => {
                        e.stopPropagation(); setMenuOpen(null); onOpenFolder(f.id);
                      }}>
                        <IcB.folder /> {lang === "it" ? "Apri cartella" : "Open folder"}
                      </button>
                      <hr />
                      <button className="folder-menu-item danger" onClick={(e) => {
                        e.stopPropagation(); setMenuOpen(null);
                        setConfirm({
                          title: lang === "it" ? "Elimina cartella" : "Delete folder",
                          message: lang === "it" ? "Tutti i file contenuti verranno rimossi definitivamente. L'operazione non può essere annullata." : "All files inside will be permanently removed. This cannot be undone.",
                          confirmLabel: lang === "it" ? "Elimina" : "Delete",
                          danger: true,
                          onOk: () => deleteFolder(f.id),
                        });
                      }}>
                        <IcB.trash /> {lang === "it" ? "Elimina cartella" : "Delete folder"}
                      </button>
                    </div>
                  )}
                </div>
              </div>
              <div>
                {renaming === f.id ? (
                  <div onClick={(e) => e.stopPropagation()} style={{ display: "flex", gap: 6, alignItems: "center" }}>
                    <input className="input" autoFocus
                      style={{ fontSize: 14, fontWeight: 500, padding: "4px 8px", height: 32, flex: 1 }}
                      value={renameVal}
                      onChange={(e) => setRenameVal(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") saveRename(f.id);
                        if (e.key === "Escape") setRenaming(null);
                      }} />
                    <button className="iconbtn" style={{ color: "#1F7A4D" }} onClick={() => saveRename(f.id)}><IcB.check /></button>
                    <button className="iconbtn" onClick={() => setRenaming(null)}><IcB.x /></button>
                  </div>
                ) : (
                  <div className="name">{f.name}</div>
                )}
                <div className="meta" style={{ marginTop: 4 }}>
                  <span><b>{f.files}</b> {lang === "it" ? "file" : "files"}</span>
                  <span>·</span>
                  <span>{f.size}</span>
                  {f.subfolders > 0 && <><span>·</span><span>{f.subfolders} {lang === "it" ? "sottocartelle" : "subfolders"}</span></>}
                </div>
              </div>
              <div style={{ marginTop: 4 }}>
                <span className="tag"><IcB.clock /> {t.dashboard.updated(f.updated[lang])}</span>
              </div>
            </div>
          ))}
        </div>
      )}

      {confirmState && (
        <ConfirmModal open lang={lang}
          title={confirmState.title}
          message={confirmState.message}
          confirmLabel={confirmState.confirmLabel}
          danger={confirmState.danger}
          onConfirm={() => { confirmState.onOk(); setConfirm(null); }}
          onCancel={() => setConfirm(null)} />
      )}
    </div>
  );
}

function FolderScreen({ t, lang, folderId, search, onBack, onOpenFolder, onUpload, onNewSubfolder, onRefreshNeeded }) {
  const ConfirmModal = window.ConfirmModal;
  const [folder, setFolder] = uSD(null);
  const [loading, setLoading] = uSD(true);
  const [showNoteFor, setShowNoteFor] = uSD(null);
  const [confirmState, setConfirm] = uSD(null);
  const [draftNote, setDraftNote]     = uSD("");
  const [savingNote, setSavingNote]   = uSD(false);
  const [folderNote, setFolderNote]   = uSD("");
  const [savingFolderNote, setSavingFolderNote] = uSD(false);
  const [noteSaved, setNoteSaved]     = uSD(false);
  const [previewFile, setPreviewFile] = uSD(null);
  const [previewBlobUrl, setPreviewBlobUrl] = uSD(null);
  const [previewLoading, setPreviewLoading] = uSD(false);
  const [parents, setParents]              = uSD([]);
  const [subMenuOpen, setSubMenuOpen]     = uSD(null);
  const [renamingSub, setRenamingSub]     = uSD(null);
  const [renameSubVal, setRenameSubVal]   = uSD("");

  uED(() => {
    if (!previewFile) { setPreviewBlobUrl(null); return; }
    let revoked = false;
    setPreviewLoading(true);
    setPreviewBlobUrl(null);
    const token = localStorage.getItem('bt_token') || '';
    fetch('/api/folders/' + folderId + '/files/' + previewFile.id + '/download?inline=1', {
      headers: { 'Authorization': 'Bearer ' + token },
    })
      .then((r) => r.ok ? r.blob() : Promise.reject(r.status))
      .then((blob) => {
        if (revoked) return;
        setPreviewBlobUrl(URL.createObjectURL(blob));
      })
      .catch(() => {})
      .finally(() => { if (!revoked) setPreviewLoading(false); });
    return () => {
      revoked = true;
      setPreviewBlobUrl((u) => { if (u) URL.revokeObjectURL(u); return null; });
    };
  }, [previewFile, folderId]);

  const load = uCB(async () => {
    if (!folderId) return;
    setLoading(true);
    try {
      const data = await window.API_CLIENT.apiGet("/folders/" + folderId);
      setFolder(data);
      setFolderNote(data.note || "");
      const chain = [];
      let pid = data.parent_id;
      while (pid) {
        try {
          const p = await window.API_CLIENT.apiGet("/folders/" + pid);
          chain.unshift({ id: p.id, name: p.name });
          pid = p.parent_id;
        } catch { break; }
      }
      setParents(chain);
    } catch {}
    setLoading(false);
  }, [folderId]);

  uED(() => { load(); }, [load]);
  uED(() => { if (onRefreshNeeded) onRefreshNeeded(load); }, [onRefreshNeeded, load]);

  const saveFileNote = async () => {
    if (showNoteFor === null || !folder) return;
    setSavingNote(true);
    try {
      const fileId = filteredItems[showNoteFor]?.id;
      if (fileId) {
        await window.API_CLIENT.apiPut("/folders/" + folderId + "/files/" + fileId, { note: draftNote });
        load();
      }
    } catch {}
    setSavingNote(false);
    setShowNoteFor(null);
  };

  const saveFolderNote = async () => {
    if (!folder) return;
    setSavingFolderNote(true);
    try {
      await window.API_CLIENT.apiPut("/folders/" + folderId, { note: folderNote });
      load();
      setNoteSaved(true);
      setTimeout(() => setNoteSaved(false), 2000);
    } catch (err) {
      console.error("saveFolderNote:", err);
    }
    setSavingFolderNote(false);
  };

  const deleteFile = async (fileId) => {
    try {
      await window.API_CLIENT.apiDelete("/folders/" + folderId + "/files/" + fileId);
      load();
    } catch {}
  };

  uED(() => {
    if (!subMenuOpen) return;
    const close = () => setSubMenuOpen(null);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [subMenuOpen]);

  const deleteSubfolder = async (id) => {
    try { await window.API_CLIENT.apiDelete("/folders/" + id); load(); } catch {}
  };

  const saveRenameSub = async (id) => {
    const name = renameSubVal.trim();
    if (!name) return;
    try { await window.API_CLIENT.apiPut("/folders/" + id, { name }); setRenamingSub(null); load(); } catch {}
  };

  if (loading || !folder) {
    return (
      <div className="main" style={{ display: "flex", alignItems: "center", justifyContent: "center", minHeight: 300 }}>
        <div style={{ textAlign: "center", color: "var(--ink-soft)" }}>
          <IcB.cloud />
          <div style={{ marginTop: 8 }}>{lang === "it" ? "Caricamento…" : "Loading…"}</div>
        </div>
      </div>
    );
  }

  const subs = (folder.subfolderList || []).filter(s =>
    !search || s.name.toLowerCase().includes(search.toLowerCase())
  );
  const filteredItems = (folder.items || []).filter(f =>
    !search || f.name.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="main">
      <div className="crumb" style={{ marginBottom: 14 }}>
        <a onClick={onBack}>{t.nav.dashboard}</a>
        {parents.map((p) => (
          <React.Fragment key={p.id}>
            <span className="sep">/</span>
            <a onClick={() => onOpenFolder && onOpenFolder(p.id)}>{p.name}</a>
          </React.Fragment>
        ))}
        <span className="sep">/</span>
        <span className="cur">{folder.name}</span>
      </div>

      <div className="page-head">
        <div>
          <h1 className="page-title" style={{ fontSize: 36 }}>{folder.name}</h1>
          <p className="page-sub">
            <b style={{ color: "var(--ink-2)" }}>{folder.files} {lang === "it" ? "file" : "files"}</b> · {folder.size} · {t.dashboard.updated(folder.updated[lang])}
          </p>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <BtnB icon={<IcB.folderPlus />} onClick={onNewSubfolder}>{t.folder.add_subfolder}</BtnB>
          <BtnB variant="primary" icon={<IcB.upload />} onClick={onUpload}>{t.folder.upload}</BtnB>
        </div>
      </div>

      <div className="folder-layout" style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) 320px", gap: 24, alignItems: "start" }}>
        <div className="col">
          {subs.length > 0 && (
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10, color: "var(--ink-soft)", fontSize: 11.5, textTransform: "uppercase", letterSpacing: "0.06em" }}>
                {lang === "it" ? "Sottocartelle" : "Subfolders"}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 10, marginBottom: 8 }}>
                {subs.map((s) => (
                  <div key={s.id} className="folder-card card-hover" style={{ padding: 14, gap: 8 }}
                    onClick={() => {
                      if (renamingSub !== s.id && subMenuOpen !== s.id) onOpenFolder && onOpenFolder(s.id);
                    }}>
                    <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
                      <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                        <div className="ic" style={{ width: 32, height: 32, borderRadius: 8 }}><IcB.folder /></div>
                        <div style={{ minWidth: 0 }}>
                          {renamingSub === s.id ? (
                            <div onClick={(e) => e.stopPropagation()} style={{ display: "flex", gap: 4, alignItems: "center" }}>
                              <input className="input" autoFocus
                                style={{ fontSize: 13, fontWeight: 500, padding: "3px 6px", height: 28, flex: 1, minWidth: 80 }}
                                value={renameSubVal}
                                onChange={(e) => setRenameSubVal(e.target.value)}
                                onKeyDown={(e) => {
                                  if (e.key === "Enter") saveRenameSub(s.id);
                                  if (e.key === "Escape") setRenamingSub(null);
                                }} />
                              <button className="iconbtn" style={{ color: "#1F7A4D", width: 24, height: 24 }} onClick={() => saveRenameSub(s.id)}><IcB.check /></button>
                              <button className="iconbtn" style={{ width: 24, height: 24 }} onClick={() => setRenamingSub(null)}><IcB.x /></button>
                            </div>
                          ) : (
                            <>
                              <div className="name" style={{ fontSize: 13.5 }}>{s.name}</div>
                              <div className="meta"><span>{s.files} {lang === "it" ? "file" : "files"}</span><span>·</span><span>{s.size}</span></div>
                            </>
                          )}
                        </div>
                      </div>
                      <div style={{ position: "relative", flexShrink: 0 }}>
                        <button className="iconbtn" aria-label="more"
                          style={{ width: 28, height: 28 }}
                          onClick={(e) => { e.stopPropagation(); setSubMenuOpen(subMenuOpen === s.id ? null : s.id); }}>
                          <IcB.more />
                        </button>
                        {subMenuOpen === s.id && (
                          <div className="folder-menu" onClick={(e) => e.stopPropagation()}>
                            <button className="folder-menu-item" onClick={() => {
                              setSubMenuOpen(null); setRenamingSub(s.id); setRenameSubVal(s.name);
                            }}>
                              <IcB.pencil /> {lang === "it" ? "Rinomina" : "Rename"}
                            </button>
                            <button className="folder-menu-item" onClick={(e) => {
                              e.stopPropagation(); setSubMenuOpen(null); onOpenFolder && onOpenFolder(s.id);
                            }}>
                              <IcB.folder /> {lang === "it" ? "Apri cartella" : "Open folder"}
                            </button>
                            <hr />
                            <button className="folder-menu-item danger" onClick={(e) => {
                              e.stopPropagation(); setSubMenuOpen(null);
                              setConfirm({
                                title: lang === "it" ? "Elimina sottocartella" : "Delete subfolder",
                                message: lang === "it" ? "Tutti i file contenuti verranno rimossi definitivamente. L'operazione non può essere annullata." : "All files inside will be permanently removed. This cannot be undone.",
                                confirmLabel: lang === "it" ? "Elimina" : "Delete",
                                danger: true,
                                onOk: () => deleteSubfolder(s.id),
                              });
                            }}>
                              <IcB.trash /> {lang === "it" ? "Elimina" : "Delete"}
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10, color: "var(--ink-soft)", fontSize: 11.5, textTransform: "uppercase", letterSpacing: "0.06em" }}>
              File
            </div>
            <div className="file-table">
              <div className="file-row head">
                <span></span>
                <span>{t.folder.th.name}</span>
                <span>{t.folder.th.size}</span>
                <span className="col-added">{t.folder.th.added}</span>
                <span>{t.folder.th.status}</span>
                <span></span>
              </div>
              {filteredItems.map((f, i) => (
                <div className="file-row" key={f.id || i}>
                  <FIB ext={f.ext} />
                  <div className="file-name">
                    <div style={{ minWidth: 0 }}>
                      <div className="n">{f.name}</div>
                      {f.note && (
                        <div className="note">
                          <IcB.pencil /> <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.note[lang]}</span>
                        </div>
                      )}
                    </div>
                  </div>
                  <span style={{ fontSize: 12.5, color: "var(--ink-soft)" }}>{f.size}</span>
                  <span className="col-added" style={{ fontSize: 12.5, color: "var(--ink-soft)" }}>{f.added[lang]}</span>
                  <span>
                    {f.status === "uploaded" && <span className="badge" data-tone="ok"><IcB.check /> {t.folder.status.uploaded}</span>}
                    {f.status === "review"   && <span className="badge" data-tone="wait">{t.folder.status.review}</span>}
                  </span>
                  <div className="file-actions">
                    {["jpg","jpeg","png","gif","webp","svg","bmp","heic","heif","avif","tiff","tif","ico","apng","jfif","mp4","webm","mov","m4v","avi","mkv","3gp","3g2","mpg","mpeg","ogv","ogg","wmv","flv","mts","m2ts","pdf"].includes((f.ext||"").toLowerCase()) && (
                      <button className="file-act prev"
                        title={lang === "it" ? "Anteprima" : "Preview"}
                        onClick={() => setPreviewFile(f)}>
                        <IcB.eye />
                      </button>
                    )}
                    <button className="file-act"
                      title={lang === "it" ? "Aggiungi nota" : "Add note"}
                      onClick={() => { setShowNoteFor(i); setDraftNote(f.note ? f.note[lang] : ""); }}>
                      <IcB.pencil />
                    </button>
                    <a className="file-act dl"
                      href="#"
                      title={lang === "it" ? "Scarica" : "Download"}
                      onClick={async (e) => {
                        e.preventDefault();
                        e.stopPropagation();
                        if (e.currentTarget.dataset.busy) return;
                        e.currentTarget.dataset.busy = "1";
                        const el = e.currentTarget;
                        try {
                          const { token, name } = await window.API_CLIENT.apiPost(
                            "/folders/" + folderId + "/files/" + f.id + "/dl-token");
                          const a = document.createElement("a");
                          a.href = "/api/file-download?token=" + token;
                          a.download = name || f.name;
                          document.body.appendChild(a);
                          a.click();
                          a.remove();
                        } catch {}
                        delete el.dataset.busy;
                      }}>
                      <IcB.download />
                    </a>
                    <button className="file-act del"
                      title={lang === "it" ? "Elimina" : "Delete"}
                      onClick={() => setConfirm({
                        title: lang === "it" ? "Elimina file" : "Delete file",
                        message: lang === "it" ? "Il file verrà rimosso definitivamente e non potrà essere recuperato." : "The file will be permanently removed and cannot be recovered.",
                        confirmLabel: lang === "it" ? "Elimina" : "Delete",
                        danger: true,
                        onOk: () => deleteFile(f.id),
                      })}>
                      <IcB.trash />
                    </button>
                  </div>
                </div>
              ))}
              {filteredItems.length === 0 && (
                <div style={{ padding: 40, textAlign: "center", color: "var(--ink-soft)" }}>
                  <IcB.cloud />
                  <div style={{ marginTop: 8, fontWeight: 500, color: "var(--ink)" }}>
                    {lang === "it" ? "Cartella vuota" : "Empty folder"}
                  </div>
                  <div style={{ fontSize: 13, marginTop: 4 }}>
                    {lang === "it" ? "Carica i primi file per iniziare." : "Upload your first files to get started."}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        <div className="notes-panel" data-tour="notes">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <h3 style={{ margin: 0, fontSize: 15, fontWeight: 500 }}>{t.folder.notes_title}</h3>
              <InfoB>{lang === "it" ? "Le note aiutano il team Dugongo a capire il contesto del progetto." : "Notes help the Dugongo team understand project context."}</InfoB>
            </div>
            <p style={{ margin: "4px 0 0", color: "var(--ink-soft)", fontSize: 12.5 }}>{t.folder.notes_sub}</p>
          </div>

          <textarea className="input" placeholder={t.folder.notes_ph}
            value={folderNote} onChange={(e) => setFolderNote(e.target.value)} />
          <BtnB size="sm" variant={noteSaved ? "ghost" : "primary"} icon={noteSaved ? <IcB.check /> : <IcB.plus />} onClick={saveFolderNote} disabled={savingFolderNote || noteSaved}>
            {savingFolderNote ? (lang === "it" ? "Salvataggio…" : "Saving…") : noteSaved ? (lang === "it" ? "Salvato ✓" : "Saved ✓") : t.folder.add_note}
          </BtnB>
        </div>
      </div>

      {/* File note modal */}
      {showNoteFor !== null && (
        <div className="modal-veil" onClick={() => setShowNoteFor(null)}>
          <div className="modal" style={{ maxWidth: 460 }} onClick={(e) => e.stopPropagation()}>
            <div className="modal-head">
              <div>
                <h3>{t.folder.file_note}</h3>
                <p>{filteredItems[showNoteFor]?.name}</p>
              </div>
              <button className="iconbtn" onClick={() => setShowNoteFor(null)}><IcB.x /></button>
            </div>
            <div className="modal-body">
              <textarea className="input" value={draftNote} onChange={(e) => setDraftNote(e.target.value)}
                placeholder={lang === "it" ? "Es. \"Da privilegiare i primi 12 secondi.\"" : "E.g. \"Focus on first 12 seconds.\""} />
            </div>
            <div className="modal-foot">
              <BtnB variant="ghost" onClick={() => setShowNoteFor(null)}>{t.common.cancel}</BtnB>
              <BtnB variant="primary" onClick={saveFileNote} disabled={savingNote}>{t.common.save}</BtnB>
            </div>
          </div>
        </div>
      )}

      {previewFile && (() => {
        const ext = (previewFile.ext || "").toLowerCase();
        const isImg = ["jpg","jpeg","png","gif","webp","svg","bmp","heic","heif","avif","tiff","tif","ico","apng","jfif"].includes(ext);
        const isVid = ["mp4","webm","mov","m4v","avi","mkv","3gp","3g2","mpg","mpeg","ogv","ogg","wmv","flv","mts","m2ts"].includes(ext);
        return (
          <div className="modal-veil" onClick={() => setPreviewFile(null)}>
            <div className="modal modal-preview" onClick={(e) => e.stopPropagation()}>
              <div className="modal-head">
                <div>
                  <h3>{lang === "it" ? "Anteprima" : "Preview"}</h3>
                  <p>{previewFile.name}</p>
                </div>
                <button className="iconbtn" onClick={() => setPreviewFile(null)}><IcB.x /></button>
              </div>
              <div className="modal-body preview-body">
                {previewLoading && <span style={{ color: "var(--ink-soft)", fontSize: 13 }}>{lang === "it" ? "Caricamento…" : "Loading…"}</span>}
                {!previewLoading && previewBlobUrl && isImg && <img src={previewBlobUrl} alt={previewFile.name} className="preview-media" />}
                {!previewLoading && previewBlobUrl && isVid && <video src={previewBlobUrl} controls className="preview-media" />}
                {!previewLoading && previewBlobUrl && ext === "pdf" && <iframe src={previewBlobUrl} title={previewFile.name} className="preview-pdf" />}
              </div>
            </div>
          </div>
        );
      })()}

      {confirmState && (
        <ConfirmModal open lang={lang}
          title={confirmState.title}
          message={confirmState.message}
          confirmLabel={confirmState.confirmLabel}
          danger={confirmState.danger}
          onConfirm={() => { confirmState.onOk(); setConfirm(null); }}
          onCancel={() => setConfirm(null)} />
      )}
    </div>
  );
}

window.DashboardScreen = DashboardScreen;
window.FolderScreen = FolderScreen;