/* Tab: Accesos compartidos — gestor de credenciales cifradas.
   Las contraseñas se guardan cifradas en el servidor (Fernet) y solo se
   descargan bajo petición explícita (botón "ver"). Nunca viajan en el listado. */

const SHARED_FIELD_MAX = 4096;

function TagInput({ tags, onChange }) {
  const [draft, setDraft] = React.useState("");

  function commit() {
    const t = draft.trim();
    if (t && !tags.includes(t) && tags.length < 20) onChange([...tags, t]);
    setDraft("");
  }

  return (
    <div style={{
      display: "flex", flexWrap: "wrap", gap: 6, padding: "7px 8px",
      border: "1px solid var(--border)", borderRadius: 8, background: "var(--bg-2)",
      minHeight: 38, alignItems: "center",
    }}>
      {tags.map((t) => (
        <span key={t} style={{
          display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12,
          padding: "2px 4px 2px 8px", borderRadius: 6,
          background: "var(--accent-softer)", color: "var(--accent)",
        }}>
          {t}
          <button type="button" onClick={() => onChange(tags.filter((x) => x !== t))}
            style={{ background: "none", border: "none", cursor: "pointer", color: "inherit", display: "flex", padding: 2 }}>
            <IconX size={11}/>
          </button>
        </span>
      ))}
      <input
        value={draft}
        onChange={(e) => setDraft(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" || e.key === ",") { e.preventDefault(); commit(); }
          else if (e.key === "Backspace" && !draft && tags.length) onChange(tags.slice(0, -1));
        }}
        onBlur={commit}
        placeholder={tags.length ? "" : "Añade etiquetas y pulsa Enter"}
        style={{ flex: 1, minWidth: 120, border: "none", outline: "none", background: "transparent", color: "var(--text)", fontSize: 13 }}
      />
    </div>
  );
}

function SharedAccessModal({ initial, onClose, onSaved }) {
  const editing = !!initial;
  const [appName, setAppName] = React.useState(initial?.app_name || "");
  const [account, setAccount] = React.useState(initial?.account || "");
  const [password, setPassword] = React.useState("");
  const [passwordTouched, setPasswordTouched] = React.useState(!editing);
  const [showPw, setShowPw] = React.useState(false);
  const [tags, setTags] = React.useState(initial?.tags || []);
  const [notes, setNotes] = React.useState(initial?.notes || "");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  async function handleSubmit(e) {
    e.preventDefault();
    if (!appName.trim()) { setError("La aplicación es obligatoria"); return; }
    setLoading(true); setError("");
    const payload = {
      app_name: appName.trim(),
      account: account.trim(),
      tags,
      notes: notes.trim(),
    };
    // Solo mandamos password si el usuario lo escribió/cambió.
    if (passwordTouched) payload.password = password;

    try {
      const url = editing ? `/api/shared-accesses/${initial.id}` : "/api/shared-accesses";
      const r = await fetch(url, {
        method: editing ? "PUT" : "POST",
        credentials: "same-origin",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const d = await r.json();
      if (r.ok && d.success) { onSaved(d.access); onClose(); }
      else setError(d.detail || "No se pudo guardar");
    } catch { setError("Error de conexión"); }
    finally { setLoading(false); }
  }

  return (
    <div style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.7)", display: "grid",
      placeItems: "center", zIndex: 100, backdropFilter: "blur(4px)",
    }} onClick={onClose}>
      <div className="card card-pad" style={{ width: 440, maxWidth: "calc(100vw - 32px)", maxHeight: "calc(100vh - 48px)", overflowY: "auto" }} onClick={(e) => e.stopPropagation()}>
        <h3 className="card-title" style={{ marginBottom: 16, display: "flex", alignItems: "center", gap: 8 }}>
          <IconLock size={15}/> {editing ? "Editar acceso" : "Nuevo acceso"}
        </h3>
        <form onSubmit={handleSubmit} className="col" style={{ gap: 14 }}>
          <div>
            <label className="label">Aplicación *</label>
            <input className="input" value={appName} maxLength={SHARED_FIELD_MAX}
              onChange={(e) => setAppName(e.target.value)} placeholder="Google Ads, Meta Business…" autoFocus/>
          </div>
          <div>
            <label className="label">Usuario o email</label>
            <input className="input" value={account} maxLength={SHARED_FIELD_MAX}
              onChange={(e) => setAccount(e.target.value)} placeholder="equipo@empresa.com" autoComplete="off"/>
          </div>
          <div>
            <label className="label">Contraseña</label>
            {editing && !passwordTouched ? (
              <button type="button" className="btn btn-ghost" style={{ width: "100%", justifyContent: "center" }}
                onClick={() => { setPasswordTouched(true); setShowPw(true); }}>
                <IconKey size={13}/> Cambiar contraseña
              </button>
            ) : (
              <div style={{ position: "relative" }}>
                <input className="input" type={showPw ? "text" : "password"} value={password}
                  maxLength={SHARED_FIELD_MAX} autoComplete="new-password"
                  onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" style={{ paddingRight: 38 }}/>
                <button type="button" onClick={() => setShowPw((v) => !v)}
                  style={{ position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", display: "flex", padding: 6 }}>
                  {showPw ? <IconEyeOff size={15}/> : <IconEye size={15}/>}
                </button>
              </div>
            )}
            {editing && passwordTouched && (
              <div style={{ fontSize: 11.5, color: "var(--text-4)", marginTop: 4 }}>
                Déjalo vacío para eliminar la contraseña guardada.
              </div>
            )}
          </div>
          <div>
            <label className="label">Etiquetas</label>
            <TagInput tags={tags} onChange={setTags}/>
          </div>
          <div>
            <label className="label">Más información</label>
            <textarea className="input" value={notes} maxLength={SHARED_FIELD_MAX} rows={3}
              onChange={(e) => setNotes(e.target.value)} placeholder="URL de acceso, 2FA, notas para el equipo…"
              style={{ resize: "vertical", fontFamily: "inherit" }}/>
          </div>
          {error && <div style={{ background: "rgba(248,113,113,0.12)", border: "1px solid rgba(248,113,113,0.3)", borderRadius: 8, padding: "10px 12px", fontSize: 12.5, color: "#fca5a5" }}>{error}</div>}
          <div className="row" style={{ gap: 8, marginTop: 4, justifyContent: "flex-end" }}>
            <button type="button" className="btn btn-ghost" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn btn-primary" disabled={loading}>
              {loading ? "Guardando…" : <><IconCheck size={13}/> Guardar</>}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function PasswordCell({ access }) {
  const [value, setValue] = React.useState(null); // texto plano revelado
  const [loading, setLoading] = React.useState(false);
  const [copied, setCopied] = React.useState(false);
  const hideTimer = React.useRef(null);

  React.useEffect(() => () => clearTimeout(hideTimer.current), []);

  async function reveal() {
    if (value !== null) { setValue(null); return; }
    setLoading(true);
    try {
      const r = await fetch(`/api/shared-accesses/${access.id}/password`, { credentials: "same-origin" });
      const d = await r.json();
      if (r.ok) {
        setValue(d.password || "");
        clearTimeout(hideTimer.current);
        hideTimer.current = setTimeout(() => setValue(null), 30000); // auto-oculta a los 30s
      }
    } catch { /* ignore */ }
    finally { setLoading(false); }
  }

  async function copy() {
    try {
      let pw = value;
      if (pw === null) {
        const r = await fetch(`/api/shared-accesses/${access.id}/password`, { credentials: "same-origin" });
        const d = await r.json();
        if (!r.ok) return;
        pw = d.password || "";
      }
      await navigator.clipboard.writeText(pw);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch { /* ignore */ }
  }

  if (!access.has_password) {
    return <span style={{ color: "var(--text-4)" }}>—</span>;
  }

  return (
    <div className="row" style={{ gap: 8 }}>
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: value !== null ? "var(--text)" : "var(--text-3)", letterSpacing: value !== null ? 0 : 2 }}>
        {value !== null ? (value || "(vacía)") : "••••••••"}
      </span>
      <button className="btn btn-ghost" style={{ padding: "3px 6px" }} onClick={reveal} disabled={loading} title={value !== null ? "Ocultar" : "Ver"}>
        {value !== null ? <IconEyeOff size={13}/> : <IconEye size={13}/>}
      </button>
      <button className="btn btn-ghost" style={{ padding: "3px 6px" }} onClick={copy} title="Copiar">
        {copied ? <IconCheck size={13}/> : <IconCopy size={13}/>}
      </button>
    </div>
  );
}

function SharedAccessTab() {
  const [accesses, setAccesses] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [query, setQuery] = React.useState("");
  const [activeTags, setActiveTags] = React.useState([]); // filtro por etiquetas (OR)
  const [modal, setModal] = React.useState(null); // null | {} (nuevo) | access (editar)

  function toggleTag(t) {
    setActiveTags((prev) => (prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t]));
  }

  function fetchAccesses() {
    setLoading(true);
    fetch("/api/shared-accesses", { credentials: "same-origin" })
      .then((r) => r.json())
      .then((d) => setAccesses(d.accesses || []))
      .catch(() => setAccesses([]))
      .finally(() => setLoading(false));
  }

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

  React.useEffect(() => {
    window._openNewSharedAccessModal = () => setModal({});
    return () => { delete window._openNewSharedAccessModal; };
  }, []);

  async function remove(access) {
    if (!confirm(`¿Borrar el acceso de "${access.app_name}"?`)) return;
    const r = await fetch(`/api/shared-accesses/${access.id}`, { method: "DELETE", credentials: "same-origin" });
    if (r.ok) setAccesses((prev) => prev.filter((a) => a.id !== access.id));
  }

  function upsert(saved) {
    setAccesses((prev) => {
      const exists = prev.some((a) => a.id === saved.id);
      const next = exists ? prev.map((a) => (a.id === saved.id ? saved : a)) : [...prev, saved];
      return next.sort((a, b) => a.app_name.localeCompare(b.app_name, "es", { sensitivity: "base" }));
    });
  }

  const allTags = React.useMemo(() => {
    const set = new Set();
    accesses.forEach((a) => (a.tags || []).forEach((t) => set.add(t)));
    return [...set].sort((x, y) => x.localeCompare(y, "es", { sensitivity: "base" }));
  }, [accesses]);

  // Limpia del filtro las etiquetas que ya no existen en ningún acceso.
  React.useEffect(() => {
    setActiveTags((prev) => prev.filter((t) => allTags.includes(t)));
  }, [allTags]);

  const q = query.trim().toLowerCase();
  const filtered = accesses.filter((a) => {
    const matchesText = !q ||
      a.app_name.toLowerCase().includes(q) ||
      (a.account || "").toLowerCase().includes(q) ||
      (a.tags || []).some((t) => t.toLowerCase().includes(q));
    const matchesTags = activeTags.length === 0 ||
      activeTags.some((t) => (a.tags || []).includes(t));
    return matchesText && matchesTags;
  });

  const HEADERS = ["Aplicación", "Usuario o Email", "Contraseña", "Etiquetas", "Más información", ""];

  return (
    <div className="col" style={{ gap: 16 }}>
      {modal && (
        <SharedAccessModal
          initial={modal.id ? modal : null}
          onClose={() => setModal(null)}
          onSaved={upsert}
        />
      )}

      <div className="card" style={{
        padding: "12px 16px", display: "flex", gap: 10, alignItems: "center",
        background: "var(--accent-softer)", border: "1px solid var(--accent-soft)",
      }}>
        <IconLock size={16} style={{ color: "var(--accent)", flexShrink: 0 }}/>
        <span style={{ fontSize: 12.5, color: "var(--text-2)" }}>
          Las contraseñas se guardan <strong>cifradas</strong> en el servidor y solo se muestran cuando pulsas «ver». Cada usuario ve únicamente sus propios accesos.
        </span>
      </div>

      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ padding: "14px 16px", borderBottom: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 12 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <div className="search" style={{ margin: 0, maxWidth: 280, flex: 1 }} onClick={(e) => e.currentTarget.querySelector("input").focus()}>
              <IconSearch size={14}/>
              <input placeholder="Buscar por app, usuario o etiqueta…" value={query} onChange={(e) => setQuery(e.target.value)}/>
            </div>
            <button className="btn btn-primary" onClick={() => setModal({})}>
              <IconPlus size={14}/> Nuevo acceso
            </button>
          </div>

          {allTags.length > 0 && (
            <div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--text-4)", fontWeight: 600, marginRight: 2, display: "inline-flex", alignItems: "center", gap: 4 }}>
                <IconFilter size={12}/> Etiquetas:
              </span>
              <button
                onClick={() => setActiveTags([])}
                style={{
                  fontSize: 11.5, padding: "3px 10px", borderRadius: 20, cursor: "pointer",
                  border: "1px solid " + (activeTags.length === 0 ? "var(--accent)" : "var(--border)"),
                  background: activeTags.length === 0 ? "var(--accent-soft)" : "transparent",
                  color: activeTags.length === 0 ? "var(--accent)" : "var(--text-3)",
                  fontWeight: 600,
                }}>
                Todas
              </button>
              {allTags.map((t) => {
                const on = activeTags.includes(t);
                return (
                  <button key={t} onClick={() => toggleTag(t)}
                    style={{
                      fontSize: 11.5, padding: "3px 10px", borderRadius: 20, cursor: "pointer",
                      border: "1px solid " + (on ? "var(--accent)" : "var(--border)"),
                      background: on ? "var(--accent-soft)" : "transparent",
                      color: on ? "var(--accent)" : "var(--text-2)",
                      fontWeight: on ? 600 : 400,
                    }}>
                    {t}
                  </button>
                );
              })}
            </div>
          )}
        </div>

        <div className="table-scroll" style={{ overflowX: "auto" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
            <thead>
              <tr style={{ background: "var(--bg-3)" }}>
                {HEADERS.map((h, i) => (
                  <th key={i} style={{ padding: "10px 14px", textAlign: "left", fontWeight: 600, color: "var(--text-3)", whiteSpace: "nowrap" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr><td colSpan={HEADERS.length} style={{ padding: "20px 14px", color: "var(--text-4)" }}>Cargando…</td></tr>
              )}
              {!loading && filtered.length === 0 && (
                <tr><td colSpan={HEADERS.length} style={{ padding: "20px 14px", color: "var(--text-4)" }}>
                  {accesses.length === 0 ? "Aún no has guardado ningún acceso." : "Ningún acceso coincide con el filtro."}
                </td></tr>
              )}
              {!loading && filtered.map((a) => (
                <tr key={a.id} style={{ borderTop: "1px solid var(--border)" }}>
                  <td style={{ padding: "10px 14px", fontWeight: 600, color: "var(--text)", whiteSpace: "nowrap" }}>{a.app_name}</td>
                  <td style={{ padding: "10px 14px", color: "var(--text-2)", fontFamily: "var(--font-mono)", fontSize: 12 }}>{a.account || "—"}</td>
                  <td style={{ padding: "10px 14px" }}><PasswordCell access={a}/></td>
                  <td style={{ padding: "10px 14px" }}>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                      {(a.tags || []).length === 0 && <span style={{ color: "var(--text-4)" }}>—</span>}
                      {(a.tags || []).map((t) => (
                        <span key={t} style={{ fontSize: 11, padding: "2px 7px", borderRadius: 6, background: "var(--bg-hover)", color: "var(--text-2)" }}>{t}</span>
                      ))}
                    </div>
                  </td>
                  <td style={{ padding: "10px 14px", color: "var(--text-2)", maxWidth: 260, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{a.notes || "—"}</td>
                  <td style={{ padding: "10px 14px", whiteSpace: "nowrap" }}>
                    <div className="row" style={{ gap: 4, justifyContent: "flex-end" }}>
                      <button className="btn btn-ghost" style={{ padding: "4px 7px" }} onClick={() => setModal(a)} title="Editar">
                        <IconEdit size={13}/>
                      </button>
                      <button className="btn btn-ghost" style={{ padding: "4px 7px", color: "#fca5a5" }} onClick={() => remove(a)} title="Borrar">
                        <IconTrash size={13}/>
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SharedAccessTab });