// Médiathèque — files grid with drag-drop upload zone & filters
// Type guesser for fake uploads
function guessTypeFromName(name) {
  const ext = name.toLowerCase().split(".").pop();
  if (["pdf"].includes(ext)) return "pdf";
  if (["pptx", "ppt", "key"].includes(ext)) return "ppt";
  if (["xlsx", "xls", "csv"].includes(ext)) return "xls";
  if (["mp4", "mov", "webm", "avi"].includes(ext)) return "vid";
  if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) return "img";
  return "txt";
}
function fakeSize() {
  const mb = (Math.random() * 30 + 0.5).toFixed(1);
  return `${mb} Mo`;
}
let __mediaNextId = 100;
function newMediaId() { return "u" + (++__mediaNextId); }

const TYPE_META = {
  pdf: { label: "PDF", letter: "P", cls: "pdf", iconBg: "#7c1f1f" },
  ppt: { label: "PPTX", letter: "P", cls: "ppt", iconBg: "#9a4b1b" },
  xls: { label: "XLSX", letter: "X", cls: "xls", iconBg: "#1f5f3f" },
  vid: { label: "Vidéo", letter: "V", cls: "vid", iconBg: "#3f2868" },
  img: { label: "Image", letter: "I", cls: "img", iconBg: "#1f3f6f" },
  kpi: { label: "KPI live", letter: "K", cls: "kpi", iconBg: "#7a5810" },
  soc: { label: "Réseau social", letter: "@", cls: "soc", iconBg: "#0d556e" },
  txt: { label: "Annonce", letter: "T", cls: "txt", iconBg: "#3a4258" },
  yt: { label: "YouTube", letter: "▶", cls: "yt", iconBg: "#7a1e3a" },
  met: { label: "Météo", letter: "M", cls: "met", iconBg: "#0d5a6e" },
  web: { label: "Page web", letter: "W", cls: "web", iconBg: "#6e1d5a" },
};

function TypeTag({ type }) {
  const m = TYPE_META[type] || TYPE_META.txt;
  return (
    <span className="tag-type">
      <span className={"tag-type__sq tag-type__sq--" + m.cls}>{m.letter}</span>
      {m.label}
    </span>
  );
}

function MediaThumb({ type, name }) {
  const m = TYPE_META[type] || TYPE_META.txt;
  // Render type-specific placeholder graphics
  if (type === "img") {
    return (
      <div className="media-thumb" style={{
        background: "linear-gradient(135deg, #1f3458, #2c4570), radial-gradient(circle at 30% 40%, #4a6aa0 0%, transparent 60%)"
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(circle at 30% 40%, rgba(150,180,220,0.5) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(80,110,160,0.4) 0%, transparent 60%)"
        }} />
      </div>
    );
  }
  if (type === "vid" || type === "yt") {
    return (
      <div className="media-thumb media-thumb--video">
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(135deg, #1a1a2e, #16213e)",
          backgroundImage: "radial-gradient(circle at 50% 50%, rgba(120,80,140,0.3) 0%, transparent 70%)"
        }} />
        <div className="media-thumb__play"><Icon.Play size={18} /></div>
        {type === "yt" && <div className="media-thumb__corner" style={{ background: "#FF0000", color: "#fff" }}>YT</div>}
      </div>
    );
  }
  if (type === "pdf" || type === "ppt") {
    return (
      <div className="media-thumb media-thumb--doc">
        <div className="media-thumb__doc-page">
          <div className="media-thumb__doc-line" style={{ width: "60%" }} />
          <div className="media-thumb__doc-line" style={{ width: "85%" }} />
          <div className="media-thumb__doc-line" style={{ width: "72%" }} />
          <div className="media-thumb__doc-line" style={{ width: "40%" }} />
          <div className="media-thumb__doc-block" />
        </div>
        <div className="media-thumb__corner" style={{ background: m.iconBg }}>{m.label}</div>
      </div>
    );
  }
  if (type === "xls") {
    return (
      <div className="media-thumb media-thumb--xls">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gridTemplateRows: "repeat(4, 1fr)", gap: 1, padding: 8, height: "100%" }}>
          {Array.from({ length: 20 }).map((_, i) => (
            <div key={i} style={{
              background: i < 5 ? "rgba(52,211,153,0.4)" : "rgba(255,255,255,0.06)",
              borderRadius: 1,
            }} />
          ))}
        </div>
        <div className="media-thumb__corner" style={{ background: m.iconBg }}>XLSX</div>
      </div>
    );
  }
  if (type === "kpi") {
    return (
      <div className="media-thumb" style={{ background: "linear-gradient(135deg, #2a1f0f, #1a1408)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 800, color: "var(--elsia-yellow)" }}>247</div>
        <div style={{ fontSize: 9, color: "var(--text-muted)", textTransform: "uppercase", letterSpacing: 0.5 }}>Jours sans accident</div>
        <div className="media-thumb__corner" style={{ background: m.iconBg, color: "#fff" }}>LIVE</div>
      </div>
    );
  }
  if (type === "soc") {
    return (
      <div className="media-thumb" style={{ background: "linear-gradient(135deg, #0a2540, #061a2e)", padding: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 4, color: "#60A5FA", fontSize: 9, fontWeight: 700 }}>
          <Icon.Linkedin size={10} /> LinkedIn
        </div>
        <div style={{ fontSize: 10, color: "#fff", marginTop: 6, lineHeight: 1.3 }}>« Nous sommes fiers d'avoir livré le pont... »</div>
        <div className="media-thumb__corner" style={{ background: m.iconBg, color: "#fff" }}>LIVE</div>
      </div>
    );
  }
  if (type === "met") {
    return (
      <div className="media-thumb" style={{ background: "linear-gradient(135deg, #0d3d4a, #061a24)", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
        <Icon.Sun size={28} />
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: "#67E8F9" }}>21°</div>
          <div style={{ fontSize: 9, color: "var(--text-muted)" }}>Bordeaux</div>
        </div>
        <div className="media-thumb__corner" style={{ background: m.iconBg, color: "#fff" }}>LIVE</div>
      </div>
    );
  }
  // text annonce
  return (
    <div className="media-thumb" style={{ background: "linear-gradient(135deg, #2a3142, #1a1f2c)", padding: 12, display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center" }}>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 700, color: "#fff", lineHeight: 1.2 }}>
        {name.length > 30 ? name.slice(0, 30) + "…" : name}
      </div>
    </div>
  );
}

function Media({ mediaFiles, setMediaFiles, setPlaylists, playlists = [], pushActivity }) {
  const [view, setView] = useState("grid"); // grid | list
  const [filter, setFilter] = useState("all");
  const [search, setSearch] = useState("");
  const [dragOver, setDragOver] = useState(false);
  const [selected, setSelected] = useState({});
  const [toast, setToast] = useState(null);
  const [confirmDel, setConfirmDel] = useState(null);
  const [playlistPicker, setPlaylistPicker] = useState(false);
  const [pickerPlaylist, setPickerPlaylist] = useState(playlists[0]?.id);
  const [pickerZone, setPickerZone] = useState("A");
  const [creatingPlaylist, setCreatingPlaylist] = useState(false);
  const fileInputRef = React.useRef(null);

  const flashToast = (text, icon) => {
    setToast({ text, icon });
    setTimeout(() => setToast(null), 2400);
  };

  const addFakeFile = (name, type) => {
    const id = newMediaId();
    const finalType = type || guessTypeFromName(name);
    const newFile = {
      id, name, type: finalType,
      size: fakeSize(),
      duration: finalType === "vid" ? "1 min 24" : (finalType === "img" ? "15 s" : "30 s"),
      added: "À l'instant",
      author: "Alexis P.",
      pages: 1, thumb: finalType, tags: ["Nouveau"]
    };
    setMediaFiles(prev => [newFile, ...prev]);
    return newFile;
  };

  const handleImport = () => fileInputRef.current?.click();
  const handleFiles = (fileList) => {
    const files = Array.from(fileList || []);
    if (files.length === 0) {
      // Fallback when no real File API — add a sample
      addFakeFile(`Nouveau document ${new Date().toLocaleTimeString("fr-FR")}.pdf`);
      flashToast(`1 média ajouté`, <Icon.Check size={13} />);
      return;
    }
    files.forEach(f => addFakeFile(f.name));
    pushActivity?.({ action: "a importé", target: files.length > 1 ? `${files.length} médias` : files[0].name, type: "upload" });
    flashToast(`${files.length} média${files.length > 1 ? "s ajoutés" : " ajouté"}`, <Icon.Check size={13} />);
    // Upload réel vers le backend (en parallèle de l'UI optimiste)
    if (window.ELSIA_API) {
      Promise.all(files.map(f => window.ELSIA_API.uploadMedia(f, { author: "Alexis P." })))
        .then(() => console.log(`[api] ${files.length} média(s) persistés`))
        .catch(err => console.error("[api] upload échec:", err));
    }
  };

  const deleteFiles = (ids) => {
    const namesToDelete = mediaFiles.filter(f => ids.includes(f.id)).map(f => f.name);
    setMediaFiles(prev => prev.filter(f => !ids.includes(f.id)));
    // Also remove these from all playlists
    if (setPlaylists) {
      setPlaylists(prev => prev.map(p => ({
        ...p,
        zones: Object.fromEntries(
          Object.entries(p.zones || {}).map(([z, arr]) => [
            z,
            (arr || []).filter(it => !ids.includes(it.mediaId))
          ])
        )
      })));
    }
    setSelected({});
    setConfirmDel(null);
    pushActivity?.({ action: "a supprimé", target: ids.length > 1 ? `${ids.length} médias` : namesToDelete[0], type: "alert" });
    flashToast(`${ids.length} média${ids.length > 1 ? "s supprimés" : " supprimé"}`, <Icon.Trash size={13} />);
    // Suppression réelle en backend
    if (window.ELSIA_API) {
      ids.forEach(id => {
        if (id.startsWith("u") || id.startsWith("m_")) {
          window.ELSIA_API.deleteMedia(id).catch(err => console.error("[api] delete échec:", err));
        }
      });
    }
  };

  // Add selected media to a playlist's zone
  const addToPlaylistZone = () => {
    const filesToAdd = mediaFiles.filter(f => selectedIds.includes(f.id));
    if (filesToAdd.length === 0 || !pickerPlaylist) return;
    setPlaylists(prev => prev.map(p => {
      if (p.id !== pickerPlaylist) return p;
      const newItems = filesToAdd.map(f => ({
        id: "i" + Date.now() + "-" + Math.random().toString(36).slice(2, 6),
        mediaId: f.id, title: f.name, type: f.type, duration: f.duration
      }));
      return {
        ...p,
        zones: { ...p.zones, [pickerZone]: [...(p.zones[pickerZone] || []), ...newItems] }
      };
    }));
    const plName = playlists.find(p => p.id === pickerPlaylist)?.name;
    pushActivity?.({ action: `a ajouté ${filesToAdd.length} média${filesToAdd.length > 1 ? "s" : ""} à`, target: plName, type: "upload" });
    flashToast(`${filesToAdd.length} média${filesToAdd.length > 1 ? "s ajoutés" : " ajouté"} à « ${plName} »`, <Icon.Check size={13} />);
    setPlaylistPicker(false);
    setSelected({});
  };

  // Create a new playlist inline (from the Add-to-playlist modal)
  const createPlaylistInline = (data) => {
    const id = "p" + Date.now();
    const newPl = {
      id, name: data.name, schedule: data.schedule, color: data.color,
      layout: data.layout, active: false, lastUsed: "Jamais utilisée",
      items: 0, duration: "—",
      zones: { A: [], B: [], C: [], D: [] },
    };
    setPlaylists(prev => [newPl, ...prev]);
    setPickerPlaylist(id);
    setPickerZone("A");
    setCreatingPlaylist(false);
    flashToast(`Playlist « ${data.name} » créée`, <Icon.Check size={13} />);
  };

  const filters = [
    { id: "all", label: "Tous", count: mediaFiles.length },
    { id: "pdf", label: "PDF", count: mediaFiles.filter(f => f.type === "pdf").length },
    { id: "ppt", label: "Présentations", count: mediaFiles.filter(f => f.type === "ppt").length },
    { id: "xls", label: "Tableaux", count: mediaFiles.filter(f => f.type === "xls").length },
    { id: "vid", label: "Vidéos", count: mediaFiles.filter(f => f.type === "vid").length },
    { id: "img", label: "Photos", count: mediaFiles.filter(f => f.type === "img").length },
    { id: "kpi", label: "KPI live", count: mediaFiles.filter(f => f.type === "kpi").length },
    { id: "soc", label: "Réseaux", count: mediaFiles.filter(f => f.type === "soc").length },
    { id: "txt", label: "Annonces", count: mediaFiles.filter(f => f.type === "txt").length },
    { id: "met", label: "Widgets", count: mediaFiles.filter(f => f.type === "met").length },
  ];

  const files = mediaFiles.filter(f =>
    (filter === "all" || f.type === filter) &&
    (!search || f.name.toLowerCase().includes(search.toLowerCase()))
  );

  const selectedIds = Object.entries(selected).filter(([, v]) => v).map(([k]) => k);
  const selectedCount = selectedIds.length;

  return (
    <div className="pane">
      <header className="pane__header">
        <div className="pane__title-group">
          <span className="pane__crumb">Régie · Bibliothèque</span>
          <h1 className="pane__title">Médiathèque</h1>
        </div>
        <div className="pane__actions">
          <div className="search">
            <Icon.Search />
            <input placeholder="Rechercher un média…" value={search} onChange={e => setSearch(e.target.value)} />
            <span className="kbd">⌘ K</span>
          </div>
          <div className="btn-group">
            <button className={"btn btn--sm btn--icon" + (view === "grid" ? " is-active" : "")} onClick={() => setView("grid")}>
              <Icon.Grid size={13} />
            </button>
            <button className={"btn btn--sm btn--icon" + (view === "list" ? " is-active" : "")} onClick={() => setView("list")}>
              <Icon.Playlist size={13} />
            </button>
          </div>
          <button className="btn btn--primary" onClick={handleImport}><Icon.Upload /> Importer</button>
          <input ref={fileInputRef} type="file" multiple style={{ display: "none" }} onChange={e => { handleFiles(e.target.files); e.target.value = ""; }} />
        </div>
      </header>

      <div className="pane__body">
        {/* Filter chips */}
        <div className="chips-row">
          {filters.map(f => (
            <button
              key={f.id}
              className={"chip" + (filter === f.id ? " chip--active" : "")}
              onClick={() => setFilter(f.id)}
            >
              {f.label}
              <span className="chip__count">{f.count}</span>
            </button>
          ))}
          <div style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
            <button className="btn btn--sm btn--ghost"><Icon.Filter size={12} /> Plus de filtres</button>
          </div>
        </div>

        {/* Drop zone */}
        <div
          className={"dropzone" + (dragOver ? " dropzone--over" : "")}
          onDragOver={e => { e.preventDefault(); setDragOver(true); }}
          onDragLeave={() => setDragOver(false)}
          onDrop={e => { e.preventDefault(); setDragOver(false); handleFiles(e.dataTransfer.files); }}
          onClick={handleImport}
        >
          <div className="dropzone__icon"><Icon.Upload size={20} /></div>
          <div className="dropzone__title">Glissez-déposez vos fichiers ici</div>
          <div className="dropzone__sub">
            ou <a href="#" className="dropzone__link">parcourez l'ordinateur</a> ·
            PDF, PPTX, XLSX, MP4, JPG, PNG · Maximum 500 Mo / fichier
          </div>
          <div className="dropzone__types">
            {["PDF", "PPTX", "XLSX", "MP4", "MOV", "JPG", "PNG", "URL"].map(t => (
              <span key={t} className="dropzone__type">{t}</span>
            ))}
          </div>
        </div>

        {/* Selection bar */}
        {selectedCount > 0 && (
          <div className="selection-bar">
            <span><strong>{selectedCount}</strong> sélectionné{selectedCount > 1 ? "s" : ""}</span>
            <button className="btn btn--sm" onClick={() => { setPickerPlaylist(playlists[0]?.id); setPickerZone("A"); setPlaylistPicker(true); }}>
              <Icon.Playlist size={12} /> Ajouter à une playlist
            </button>
            <button className="btn btn--sm" onClick={() => flashToast(`Téléchargement de ${selectedCount} fichier${selectedCount > 1 ? "s" : ""}…`, <Icon.Download size={13} />)}>
              <Icon.Download size={12} /> Télécharger
            </button>
            <button className="btn btn--sm btn--danger" onClick={() => setConfirmDel(selectedIds)}><Icon.Trash size={12} /> Supprimer</button>
            <button className="btn btn--sm btn--ghost" style={{ marginLeft: "auto" }} onClick={() => setSelected({})}>
              <Icon.X size={12} />
            </button>
          </div>
        )}

        {/* Grid */}
        {view === "grid" ? (
          <div className="media-grid">
            {files.map(f => (
              <div
                key={f.id}
                className={"media-card" + (selected[f.id] ? " is-selected" : "")}
                onClick={() => setSelected(s => ({ ...s, [f.id]: !s[f.id] }))}
              >
                <div className="media-card__thumb-wrap">
                  <MediaThumb type={f.type} name={f.name} />
                  <button className="media-card__check" onClick={e => { e.stopPropagation(); setSelected(s => ({ ...s, [f.id]: !s[f.id] })); }}>
                    {selected[f.id] && <Icon.Check size={11} />}
                  </button>
                  <div className="media-card__duration">{f.duration}</div>
                </div>
                <div className="media-card__body">
                  <div className="media-card__name">{f.name}</div>
                  <div className="media-card__meta">
                    <TypeTag type={f.type} />
                    <span style={{ color: "var(--text-muted)" }}>· {f.size}</span>
                  </div>
                  <div className="media-card__footer">
                    <span style={{ color: "var(--text-muted)", fontSize: 11 }}>{f.added}</span>
                    <button className="btn btn--sm btn--icon btn--ghost" onClick={e => { e.stopPropagation(); setConfirmDel([f.id]); }} title="Supprimer"><Icon.Trash size={12} /></button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div className="card" style={{ overflow: "hidden" }}>
            <table className="table">
              <thead>
                <tr>
                  <th style={{ width: 28 }}></th>
                  <th>Nom</th>
                  <th>Type</th>
                  <th>Taille</th>
                  <th>Durée</th>
                  <th>Ajouté par</th>
                  <th>Date</th>
                  <th style={{ width: 60 }}></th>
                </tr>
              </thead>
              <tbody>
                {files.map(f => (
                  <tr key={f.id} className={selected[f.id] ? "is-selected" : ""}>
                    <td>
                      <button className="media-card__check" style={{ position: "static" }}
                        onClick={() => setSelected(s => ({ ...s, [f.id]: !s[f.id] }))}>
                        {selected[f.id] && <Icon.Check size={11} />}
                      </button>
                    </td>
                    <td style={{ fontWeight: 600, color: "var(--text-primary)" }}>{f.name}</td>
                    <td><TypeTag type={f.type} /></td>
                    <td className="mono dim">{f.size}</td>
                    <td className="mono dim">{f.duration}</td>
                    <td className="dim">{f.author}</td>
                    <td className="dim">{f.added}</td>
                    <td><button className="btn btn--sm btn--icon btn--ghost" onClick={() => setConfirmDel([f.id])} title="Supprimer"><Icon.Trash size={12} /></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
      <ConfirmDialog
        open={!!confirmDel}
        title={confirmDel?.length > 1 ? "Supprimer ces médias ?" : "Supprimer ce média ?"}
        message={confirmDel?.length > 1
          ? `${confirmDel.length} fichiers seront définitivement supprimés, ainsi que toutes leurs références dans les playlists. Cette action est irréversible.`
          : `Ce fichier sera définitivement supprimé, ainsi que toutes ses références dans les playlists. Cette action est irréversible.`}
        danger
        onConfirm={() => deleteFiles(confirmDel)}
        onCancel={() => setConfirmDel(null)}
      />

      {/* Playlist picker modal */}
      {playlistPicker && (() => {
        const pl = playlists.find(p => p.id === pickerPlaylist);
        const ZONE_LETTERS = pl ? (window.PL_LAYOUT_ZONES?.[pl.layout] || ["A", "B", "C", "D"]) : ["A", "B", "C", "D"];
        const close = () => { setPlaylistPicker(false); setCreatingPlaylist(false); };

        if (creatingPlaylist) {
          return (
            <div className="modal-backdrop" onClick={close}>
              <div className="modal" onClick={e => e.stopPropagation()}>
                <div className="modal__header">
                  <div className="modal__title" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <button className="btn btn--sm btn--icon btn--ghost" onClick={() => setCreatingPlaylist(false)} title="Retour">
                      <Icon.ChevronLeft size={14} />
                    </button>
                    Nouvelle playlist
                  </div>
                  <button className="btn btn--sm btn--icon btn--ghost" onClick={close}><Icon.X size={14} /></button>
                </div>
                <div className="modal__body">
                  <PlaylistForm
                    onSubmit={createPlaylistInline}
                    onCancel={() => setCreatingPlaylist(false)}
                    submitLabel="Créer et continuer"
                  />
                </div>
              </div>
            </div>
          );
        }

        return (
          <div className="modal-backdrop" onClick={close}>
            <div className="modal" onClick={e => e.stopPropagation()}>
              <div className="modal__header">
                <div className="modal__title">Ajouter à une playlist</div>
                <button className="btn btn--sm btn--icon btn--ghost" onClick={close}><Icon.X size={14} /></button>
              </div>
              <div className="modal__body">
                <div className="form-help" style={{ marginBottom: 10 }}>
                  <strong>{selectedCount}</strong> média{selectedCount > 1 ? "s" : ""} à ajouter
                </div>
                <div className="form-field">
                  <label>Playlist de destination</label>
                  {playlists.length === 0 ? (
                    <div className="empty-state" style={{ padding: "16px 0" }}>
                      <Icon.Playlist size={24} />
                      <div className="empty-state__title">Aucune playlist</div>
                      <div className="empty-state__sub">Créez votre première playlist pour y ajouter ces médias.</div>
                      <button className="btn btn--primary" onClick={() => setCreatingPlaylist(true)}>
                        <Icon.Plus size={12} /> Créer ma première playlist
                      </button>
                    </div>
                  ) : (
                    <div className="playlist-radio-list">
                      {playlists.map(p => {
                        const total = Object.values(p.zones || {}).reduce((s, arr) => s + (arr?.length || 0), 0);
                        return (
                          <button
                            key={p.id}
                            type="button"
                            className={"playlist-radio" + (pickerPlaylist === p.id ? " is-active" : "")}
                            onClick={() => setPickerPlaylist(p.id)}
                          >
                            <span className="playlist-radio__strip" style={{ background: p.color }} />
                            <div style={{ flex: 1, textAlign: "left" }}>
                              <div style={{ fontSize: 12.5, fontWeight: 600 }}>
                                {p.name}
                                {p.active && <span className="badge badge--live" style={{ marginLeft: 6 }}>LIVE</span>}
                              </div>
                              <div style={{ fontSize: 11, color: "var(--text-muted)" }}>{total} tuile{total > 1 ? "s" : ""} · {p.schedule}</div>
                            </div>
                            {pickerPlaylist === p.id && <Icon.Check size={14} />}
                          </button>
                        );
                      })}
                      <button
                        type="button"
                        className="playlist-radio playlist-radio--new"
                        onClick={() => setCreatingPlaylist(true)}
                      >
                        <span className="playlist-radio__strip" style={{ background: "var(--border-strong)", borderStyle: "dashed" }} />
                        <div style={{ flex: 1, textAlign: "left", color: "var(--text-secondary)" }}>
                          <div style={{ fontSize: 12.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 6 }}>
                            <Icon.Plus size={13} /> Créer une nouvelle playlist
                          </div>
                          <div style={{ fontSize: 11, color: "var(--text-muted)" }}>Avec ces médias déjà dedans</div>
                        </div>
                      </button>
                    </div>
                  )}
                </div>
                {pl && ZONE_LETTERS.length > 1 && (
                  <div className="form-field">
                    <label>Zone de destination</label>
                    <div className="zone-radio-row">
                      {ZONE_LETTERS.map(z => (
                        <button
                          key={z}
                          type="button"
                          className={"zone-radio" + (pickerZone === z ? " is-active" : "")}
                          onClick={() => setPickerZone(z)}
                          style={{ color: ({A:"#F5A623",B:"#60A5FA",C:"#A78BFA",D:"#34D399"}[z]) }}
                        >
                          <span className="zone-radio__letter">{z}</span>
                          <span className="zone-radio__count">{(pl.zones?.[z] || []).length} tuile{(pl.zones?.[z] || []).length > 1 ? "s" : ""}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                )}
                {playlists.length > 0 && (
                  <div className="modal__actions">
                    <button className="btn" onClick={close}>Annuler</button>
                    <button className="btn btn--primary" onClick={addToPlaylistZone} disabled={!pickerPlaylist}>
                      Ajouter à la zone {pickerZone}
                    </button>
                  </div>
                )}
              </div>
            </div>
          </div>
        );
      })()}

      <Toast msg={toast} />
    </div>
  );
}

window.Media = Media;
window.TypeTag = TypeTag;
window.MediaThumb = MediaThumb;