/* global React, Icon */
// ============================================================================
// saved-views.jsx — composant SavedViewsBar réutilisable
// ----------------------------------------------------------------------------
// Affiche une rangée de vues sauvegardées pour un écran donné, plus un
// bouton « Sauvegarder cette vue » + un bouton « Charger ».
//
// API
// ---
// <SavedViewsBar
//   screenKey="reporting.activities"  // identifiant stable de l'écran
//   currentFilters={...}              // état actuel des filtres
//   onApply={(filterState) => ...}    // callback appelé avec l'état chargé
//   lang="fr"
// />
//
// Les vues sont stockées dans public.user_saved_views (RLS : own-only).
// La vue marquée is_default est appliquée automatiquement par l'écran
// au montage (l'écran lit savedViews et trouve isDefault → applique).
// ============================================================================

function SavedViewsBar({ screenKey, currentFilters, onApply, lang = "fr" }) {
  const { useState, useEffect } = React;
  const { data: views, loading, refresh } = window.melr.useSavedViews(screenKey);
  const [saveModalOpen, setSaveModalOpen] = useState(false);
  const [selectedId, setSelectedId] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const [applied, setApplied] = useState(false); // a-t-on déjà chargé la vue par défaut ?

  const T = (fr, en) => (lang === "fr" ? fr : en);

  // Au premier render après chargement des vues, charger la vue par
  // défaut si présente. Une seule fois par mount.
  useEffect(() => {
    if (loading || applied) return;
    const def = (views || []).find((v) => v.is_default);
    if (def && onApply) {
      onApply(def.filter_state || {});
      setSelectedId(def.id);
    }
    setApplied(true);
  }, [loading, views, applied, onApply]);

  const onLoadView = (id) => {
    setSelectedId(id);
    const v = (views || []).find((x) => x.id === id);
    if (v && onApply) onApply(v.filter_state || {});
  };

  const onDeleteView = async (id) => {
    if (!window.confirm(T("Supprimer cette vue ?", "Delete this view?"))) return;
    setBusy(true); setErr(null);
    try {
      await window.melr.savedViewsCrud.remove(id);
      if (selectedId === id) setSelectedId("");
      await refresh();
    } catch (e) { setErr(e.message); }
    finally { setBusy(false); }
  };

  const onSetDefault = async (id) => {
    setBusy(true); setErr(null);
    try {
      // Toggle : si déjà default, on retire ; sinon on met (et les autres
      // sont déclassés côté DB par le CRUD).
      const v = (views || []).find((x) => x.id === id);
      await window.melr.savedViewsCrud.update(id, { is_default: !(v && v.is_default) });
      await refresh();
    } catch (e) { setErr(e.message); }
    finally { setBusy(false); }
  };

  return (
    <>
      <div style={{
        display: "flex", alignItems: "center", gap: 8,
        padding: "8px 12px",
        background: "var(--bg-sunken)",
        borderRadius: 6,
        flexWrap: "wrap",
      }}>
        <span style={{ fontSize: 11, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: "0.04em", fontWeight: 600 }}>
          {T("Vues sauvegardées", "Saved views")}
        </span>

        {/* Dropdown des vues existantes */}
        <select value={selectedId} onChange={(e) => onLoadView(e.target.value)}
          style={{
            padding: "4px 8px", fontSize: 12.5, borderRadius: 4,
            border: "1px solid var(--line)", background: "var(--bg, white)",
            color: "var(--text)", minWidth: 180,
          }}
          disabled={loading || (views || []).length === 0}>
          <option value="">
            {loading ? T("Chargement…", "Loading…")
              : (views || []).length === 0
                ? T("— Aucune vue sauvée —", "— No saved view —")
                : T("— Charger une vue —", "— Load a view —")}
          </option>
          {(views || []).map((v) => (
            <option key={v.id} value={v.id}>
              {v.is_default ? "★ " : ""}{v.name}
            </option>
          ))}
        </select>

        {/* Si une vue est sélectionnée, actions sur celle-ci */}
        {selectedId && (
          <>
            <button className="btn xs ghost" onClick={() => onSetDefault(selectedId)} disabled={busy}
              title={T("Marquer comme vue par défaut au prochain chargement", "Mark as default view on next load")}>
              ★
            </button>
            <button className="btn xs ghost" onClick={() => onDeleteView(selectedId)} disabled={busy}
              title={T("Supprimer cette vue", "Delete this view")}
              style={{ color: "#b91c1c" }}>
              <Icon.trash />
            </button>
          </>
        )}

        {/* Bouton « Sauvegarder cette vue » */}
        <button className="btn xs primary" onClick={() => { setSaveModalOpen(true); setErr(null); }}
          style={{ marginLeft: "auto" }}>
          💾 {T("Sauvegarder", "Save view")}
        </button>
      </div>

      {err && (
        <div style={{ padding: 8, background: "#fee2e2", color: "#991b1b", borderRadius: 5, fontSize: 12, marginTop: 6 }}>
          ⚠ {err}
        </div>
      )}

      {saveModalOpen && (
        <SaveViewModal lang={lang} screenKey={screenKey} currentFilters={currentFilters}
          existingNames={(views || []).map((v) => v.name)}
          onClose={() => setSaveModalOpen(false)}
          onSaved={async (newId) => {
            setSaveModalOpen(false);
            await refresh();
            // Sélectionne automatiquement la vue qu'on vient de créer
            if (newId) setSelectedId(newId);
          }} />
      )}
    </>
  );
}

// ──────────────────────────────────────────────────────────────────
// SaveViewModal — formulaire « Sauvegarder cette vue »
// ──────────────────────────────────────────────────────────────────
function SaveViewModal({ lang, screenKey, currentFilters, existingNames, onClose, onSaved }) {
  const Modal = window.Modal;
  const { useState } = React;
  const T = (fr, en) => (lang === "fr" ? fr : en);
  const [name, setName] = useState("");
  const [isDefault, setIsDefault] = useState(false);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);

  const nameLower = name.trim().toLowerCase();
  const duplicate = (existingNames || []).some((n) => n.toLowerCase() === nameLower);

  const save = async () => {
    setErr(null);
    if (!name.trim()) { setErr(T("Nom requis.", "Name required.")); return; }
    if (duplicate) { setErr(T("Vous avez déjà une vue avec ce nom.", "You already have a view with this name.")); return; }
    setBusy(true);
    try {
      const created = await window.melr.savedViewsCrud.create({
        screen_key: screenKey,
        name: name.trim(),
        filter_state: currentFilters || {},
        is_default: isDefault,
      });
      await onSaved(created && created.id);
    } catch (e) { setErr(e.message); setBusy(false); }
  };

  const inp = { padding: "8px 10px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 13, width: "100%", boxSizing: "border-box", background: "var(--bg, white)", color: "var(--text)" };

  return (
    <Modal title={T("Sauvegarder cette vue", "Save this view")} onClose={busy ? null : onClose} size="sm"
      footer={<>
        <button className="btn sm" onClick={onClose} disabled={busy}>{T("Annuler", "Cancel")}</button>
        <button className="btn sm primary" onClick={save} disabled={busy || !name.trim()}>
          {busy ? "…" : T("Sauvegarder", "Save")}
        </button>
      </>}>
      <div style={{ display: "grid", gap: 12 }}>
        <div style={{ fontSize: 12, color: "var(--text-faint)" }}>
          {T(
            "Sauvegarde les filtres actuels (période, projet, type, statut…) sous un nom au choix. Vous pourrez recharger cette vue d'un clic.",
            "Saves the current filters (period, project, type, status…) under your chosen name. You can reload this view in one click."
          )}
        </div>
        <div>
          <label style={{ fontSize: 11, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: "0.04em" }}>
            {T("Nom de la vue", "View name")} *
          </label>
          <input style={inp} value={name} onChange={(e) => setName(e.target.value)} autoFocus
            placeholder={T("Mes projets santé Q1 2026", "My health projects Q1 2026")} />
          {duplicate && (
            <div style={{ color: "#a16207", fontSize: 11, marginTop: 4 }}>
              ⚠ {T("Une vue avec ce nom existe déjà.", "A view with this name already exists.")}
            </div>
          )}
        </div>
        <label style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 12.5 }}>
          <input type="checkbox" checked={isDefault} onChange={(e) => setIsDefault(e.target.checked)} />
          <span>
            {T("Charger automatiquement cette vue à l'ouverture de l'écran", "Auto-load this view when opening the screen")}
            <div className="text-faint" style={{ fontSize: 10.5, marginTop: 2 }}>
              {T("Une seule vue par défaut par écran. Si vous en marquez une autre, celle-ci est déclassée.",
                 "Only one default per screen. Marking another one declasses this one.")}
            </div>
          </span>
        </label>
        {err && (
          <div style={{ padding: 8, background: "#fee2e2", color: "#991b1b", borderRadius: 5, fontSize: 12 }}>
            {err}
          </div>
        )}
      </div>
    </Modal>
  );
}

// Expose globally
window.SavedViewsBar = SavedViewsBar;