// screens/Ajustes.jsx — El panel del mini-SaaS: células y ambientes DINÁMICOS.
//
// Todo lo que el estudio consume y puede ser dinámico se administra aquí, sin
// tocar código: las células (alta/edición/baja) y los ambientes Qwen (nombre,
// descripción y el PROMPT editable — con redacción asistida por el estudio).
// Los layouts (8 diseños, plantillas) son el motor de composición: esos no.

const AJUSTES_INPUT = (foco) => ({
  width: '100%', height: 44, padding: '0 13px',
  background: foco ? 'rgba(168,85,247,0.08)' : 'rgba(255,255,255,0.04)',
  border: `1px solid ${foco ? 'rgba(192,132,252,0.5)' : 'rgba(255,255,255,0.07)'}`,
  borderRadius: 11, color: '#fff', fontSize: 14,
  fontFamily: 'var(--hl-font-ui)', letterSpacing: -0.2,
  outline: 'none', transition: 'all 0.2s ease', boxSizing: 'border-box',
});

// Slug de clave derivado del nombre: el usuario nunca inventa claves técnicas.
function claveDesdeNombre(nombre) {
  return (nombre || '').toLowerCase()
    .normalize('NFD').replace(/[̀-ͯ]/g, '')
    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40);
}

function CampoAjustes({ etiqueta, valor, onCambio, area, foco, setFoco, id }) {
  const estilo = AJUSTES_INPUT(foco === id);
  return (
    <div>
      <label style={{
        display: 'block', fontFamily: 'var(--hl-font-mono)', fontSize: 9,
        color: 'rgba(255,255,255,0.45)', letterSpacing: 1.5,
        textTransform: 'uppercase', marginBottom: 6,
      }}>{etiqueta}</label>
      {area ? (
        <textarea value={valor} rows={4} onChange={e => onCambio(e.target.value)}
          onFocus={() => setFoco(id)} onBlur={() => setFoco(null)}
          style={{ ...estilo, height: 'auto', padding: '11px 13px', resize: 'none', lineHeight: 1.5 }} />
      ) : (
        <input type="text" value={valor} onChange={e => onCambio(e.target.value)}
          onFocus={() => setFoco(id)} onBlur={() => setFoco(null)} style={estilo} />
      )}
    </div>
  );
}

// Editor genérico de una entrada (célula o ambiente) con guardar/borrar.
function FichaEditable({ titulo, campos, valores, setValores, onGuardar, onBorrar,
                         guardando, esNueva, foco, setFoco }) {
  const [confirmando, setConfirmando] = React.useState(false);
  return (
    <div style={{
      padding: '14px 15px', borderRadius: 14,
      background: 'rgba(255,255,255,0.03)',
      border: '1px solid rgba(255,255,255,0.08)',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{
        fontFamily: 'var(--hl-font-display)', fontStyle: 'italic',
        fontSize: 16, color: 'var(--hl-accent-light)', letterSpacing: -0.3,
      }}>{titulo}</div>
      {campos.map(c => (
        <CampoAjustes key={c.clave} etiqueta={c.etiqueta} area={c.area}
          valor={valores[c.clave] || ''} foco={foco} setFoco={setFoco}
          id={`${titulo}-${c.clave}`}
          onCambio={v => setValores(prev => ({ ...prev, [c.clave]: v }))} />
      ))}
      <div style={{ display: 'flex', gap: 8, marginTop: 2 }}>
        <button onClick={onGuardar} disabled={guardando} style={{
          flex: 1, height: 40, borderRadius: 11, border: 'none',
          background: 'linear-gradient(135deg, #B45EFF 0%, #4F1FCB 100%)',
          color: '#fff', fontSize: 13, fontWeight: 600,
          fontFamily: 'var(--hl-font-ui)', cursor: 'pointer',
          opacity: guardando ? 0.6 : 1,
        }}>{guardando ? 'Guardando…' : 'Guardar'}</button>
        {!esNueva && (
          <button onClick={() => confirmando ? onBorrar() : setConfirmando(true)} style={{
            height: 40, padding: '0 14px', borderRadius: 11,
            border: `1px solid ${confirmando ? 'rgba(177,74,96,0.7)' : 'rgba(255,255,255,0.12)'}`,
            background: confirmando ? 'rgba(177,74,96,0.18)' : 'transparent',
            color: confirmando ? '#E89AA9' : 'rgba(255,255,255,0.5)',
            fontSize: 12.5, fontFamily: 'var(--hl-font-ui)', cursor: 'pointer',
          }}>{confirmando ? '¿Seguro?' : 'Borrar'}</button>
        )}
      </div>
    </div>
  );
}

const CAMPOS_CELULA = [
  { clave: 'nombre', etiqueta: 'Nombre' },
  { clave: 'horario', etiqueta: 'Horario (HH:MM)' },
  { clave: 'direccion', etiqueta: 'Dirección' },
  { clave: 'anfitrion', etiqueta: 'Anfitrión (con " y " si son dos)' },
];

const CAMPOS_AMBIENTE = [
  { clave: 'nombre', etiqueta: 'Nombre' },
  { clave: 'descripcion', etiqueta: 'Descripción (lo que ves tú)' },
  { clave: 'prompt', etiqueta: 'Prompt Qwen (inglés, lo que ve el taller)', area: true },
];

// Panel de usuarios — solo visible para el dueño. Alta (usuario, clave, rol) y baja.
function PanelUsuarios({ foco, setFoco, onError }) {
  const [usuarios, setUsuarios] = React.useState(null);
  const [nuevo, setNuevo] = React.useState({ usuario: '', clave: '', rol: 'editor' });
  const [guardando, setGuardando] = React.useState(false);

  const recargar = React.useCallback(() => {
    window.estudioAPI.usuarios().then(d => setUsuarios(d.usuarios)).catch(e => onError(e.message));
  }, [onError]);
  React.useEffect(recargar, [recargar]);

  const crear = async () => {
    if (nuevo.usuario.trim().length < 2 || nuevo.clave.length < 6) {
      onError('Usuario (mín. 2) y contraseña (mín. 6) obligatorios.'); return;
    }
    setGuardando(true);
    try {
      await window.estudioAPI.guardarUsuario(nuevo.usuario.trim(), nuevo.clave, nuevo.rol);
      setNuevo({ usuario: '', clave: '', rol: 'editor' }); recargar();
    } catch (e) { onError(e.message); }
    setGuardando(false);
  };
  const borrar = async (u) => {
    try { await window.estudioAPI.borrarUsuario(u); recargar(); }
    catch (e) { onError(e.message); }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
      {(usuarios || []).map(u => (
        <div key={u.usuario} style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '12px 15px', borderRadius: 13,
          background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)',
        }}>
          <div>
            <span style={{
              fontFamily: 'var(--hl-font-ui)', fontSize: 14, fontWeight: 600,
              color: 'rgba(255,255,255,0.92)',
            }}>{u.usuario}</span>
            <span style={{
              marginLeft: 9, fontFamily: 'var(--hl-font-mono)', fontSize: 9,
              letterSpacing: 1, textTransform: 'uppercase',
              color: u.rol === 'dueno' ? 'var(--candlelight, #F5C56B)' : 'rgba(255,255,255,0.4)',
            }}>{u.rol}</span>
          </div>
          {u.rol !== 'dueno' && (
            <button onClick={() => borrar(u.usuario)} style={{
              height: 30, padding: '0 12px', borderRadius: 9,
              border: '1px solid rgba(255,255,255,0.12)', background: 'transparent',
              color: 'rgba(255,255,255,0.5)', fontSize: 12,
              fontFamily: 'var(--hl-font-ui)', cursor: 'pointer',
            }}>Quitar</button>
          )}
        </div>
      ))}
      <div style={{
        marginTop: 6, padding: '14px 15px', borderRadius: 14,
        background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
        display: 'flex', flexDirection: 'column', gap: 11,
      }}>
        <div style={{
          fontFamily: 'var(--hl-font-display)', fontStyle: 'italic',
          fontSize: 15, color: 'var(--hl-accent-light)',
        }}>Dar acceso a alguien</div>
        <input type="text" placeholder="usuario" value={nuevo.usuario}
          onChange={e => setNuevo(p => ({ ...p, usuario: e.target.value }))}
          onFocus={() => setFoco('u-usuario')} onBlur={() => setFoco(null)}
          style={AJUSTES_INPUT(foco === 'u-usuario')} />
        <input type="password" placeholder="contraseña (mín. 6)" value={nuevo.clave}
          onChange={e => setNuevo(p => ({ ...p, clave: e.target.value }))}
          onFocus={() => setFoco('u-clave')} onBlur={() => setFoco(null)}
          autoComplete="new-password" style={AJUSTES_INPUT(foco === 'u-clave')} />
        <div style={{ display: 'flex', gap: 8 }}>
          {[['editor', 'Editor'], ['dueno', 'Dueño']].map(([id, lbl]) => (
            <button key={id} onClick={() => setNuevo(p => ({ ...p, rol: id }))} style={{
              flex: 1, height: 38, borderRadius: 10, cursor: 'pointer',
              border: `1px solid ${nuevo.rol === id ? 'rgba(192,132,252,0.5)' : 'rgba(255,255,255,0.08)'}`,
              background: nuevo.rol === id ? 'rgba(168,85,247,0.15)' : 'transparent',
              color: nuevo.rol === id ? 'var(--hl-accent-light)' : 'rgba(255,255,255,0.5)',
              fontFamily: 'var(--hl-font-ui)', fontSize: 13,
            }}>{lbl}</button>
          ))}
        </div>
        <button onClick={crear} disabled={guardando} style={{
          height: 42, borderRadius: 11, border: 'none',
          background: 'linear-gradient(135deg, #B45EFF 0%, #4F1FCB 100%)',
          color: '#fff', fontSize: 13.5, fontWeight: 600,
          fontFamily: 'var(--hl-font-ui)', cursor: 'pointer', opacity: guardando ? 0.6 : 1,
        }}>{guardando ? 'Creando…' : 'Crear acceso'}</button>
      </div>
    </div>
  );
}

function AjustesScreen({ onBack }) {
  const [seccion, setSeccion] = React.useState('celulas'); // celulas | ambientes | usuarios
  const [esDueno, setEsDueno] = React.useState(false);
  const [celulas, setCelulas] = React.useState(null);
  const [ambientes, setAmbientes] = React.useState(null);
  const [abierta, setAbierta] = React.useState(null);   // clave en edición
  const [valores, setValores] = React.useState({});
  const [nueva, setNueva] = React.useState(false);
  const [guardando, setGuardando] = React.useState(false);
  const [redactando, setRedactando] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [foco, setFoco] = React.useState(null);

  const recargar = React.useCallback(() => {
    window.estudioAPI.celulas().then(d => setCelulas(d.celulas)).catch(e => setError(e.message));
    window.estudioAPI.ambientes().then(d => setAmbientes(d.ambientes)).catch(e => setError(e.message));
  }, []);
  React.useEffect(recargar, [recargar]);
  // El rol decide si se muestra la pestaña de usuarios (gestión solo del dueño).
  React.useEffect(() => {
    window.estudioAPI.yo().then(s => setEsDueno(s.rol === 'dueno')).catch(() => {});
  }, []);

  const abrir = (item) => {
    setNueva(false); setAbierta(item.clave); setValores({ ...item }); setError(null);
  };
  const abrirNueva = () => {
    setNueva(true); setAbierta('__nueva__'); setValores({}); setError(null);
  };
  const cerrar = () => { setAbierta(null); setNueva(false); setValores({}); };

  const guardar = async () => {
    setGuardando(true); setError(null);
    try {
      const clave = nueva ? claveDesdeNombre(valores.nombre) : abierta;
      if (!clave) throw new Error('Ponle un nombre primero.');
      if (seccion === 'celulas') {
        await window.estudioAPI.guardarCelula({ clave, fondo: '', ...valores, clave });
      } else {
        await window.estudioAPI.guardarAmbiente({ seed: 42, descripcion: '', ...valores, clave });
      }
      cerrar(); recargar();
    } catch (e) { setError(e.message); }
    setGuardando(false);
  };

  const borrar = async () => {
    try {
      if (seccion === 'celulas') await window.estudioAPI.borrarCelula(abierta);
      else await window.estudioAPI.borrarAmbiente(abierta);
      cerrar(); recargar();
    } catch (e) { setError(e.message); }
  };

  // Redacción asistida del prompt de un ambiente a partir de su descripción.
  const redactarPromptAmbiente = async () => {
    const idea = (valores.descripcion || valores.nombre || '').trim();
    if (idea.length < 4 || redactando) return;
    setRedactando(true); setError(null);
    try {
      const d = await window.estudioAPI.redactarPrompt(idea, null);
      setValores(prev => ({ ...prev, prompt: d.prompt }));
    } catch (e) { setError(e.message); }
    setRedactando(false);
  };

  const lista = seccion === 'celulas' ? celulas : ambientes;
  const campos = seccion === 'celulas' ? CAMPOS_CELULA : CAMPOS_AMBIENTE;

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden',
      background: 'linear-gradient(180deg, #0C0724 0%, #08051A 55%, #04020E 100%)',
    }}>
      {/* Cabecera */}
      <div style={{ flexShrink: 0 }}>
        <div style={{ height: 'calc(var(--safe-top, 44px) + 8px)' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '0 20px 12px' }}>
          <button onClick={onBack} style={{
            width: 36, height: 36, borderRadius: 10, border: 'none', padding: 0,
            background: 'rgba(255,255,255,0.05)', color: 'rgba(255,255,255,0.7)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6" />
            </svg>
          </button>
          <div style={{
            fontFamily: 'var(--hl-font-display)', fontSize: 20, fontWeight: 400,
            color: '#fff', letterSpacing: -0.5, fontStyle: 'italic', flex: 1,
          }}>Ajustes del estudio</div>
        </div>
        {/* Pestañas */}
        <div style={{ padding: '0 20px 12px' }}>
          <div style={{
            display: 'flex', padding: 3,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.07)', borderRadius: 12,
          }}>
            {[['celulas', 'Células'], ['ambientes', 'Ambientes IA'],
              ...(esDueno ? [['usuarios', 'Accesos']] : [])].map(([id, lbl]) => (
              <button key={id} onClick={() => { setSeccion(id); cerrar(); }} style={{
                flex: 1, height: 34, borderRadius: 9, border: 'none',
                background: seccion === id ? 'rgba(168,85,247,0.2)' : 'transparent',
                color: seccion === id ? 'var(--hl-accent-light)' : 'rgba(255,255,255,0.45)',
                fontFamily: 'var(--hl-font-ui)', fontSize: 13, fontWeight: 500,
                cursor: 'pointer', letterSpacing: -0.2,
              }}>{lbl}</button>
            ))}
          </div>
        </div>
        <div style={{ height: 1, background: 'rgba(255,255,255,0.05)' }} />
      </div>

      {/* Lista + edición */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px 28px' }}>
        {error && (
          <div style={{
            marginBottom: 14, padding: '11px 13px', borderRadius: 11,
            background: 'rgba(177,74,96,0.12)', border: '1px solid rgba(177,74,96,0.3)',
            color: '#E8B4BE', fontSize: 12.5, lineHeight: 1.5,
          }}>{error}</div>
        )}

        {seccion === 'usuarios' && (
          <PanelUsuarios foco={foco} setFoco={setFoco} onError={setError} />
        )}

        {seccion !== 'usuarios' && lista === null && (
          <div style={{ color: 'rgba(255,255,255,0.4)', fontSize: 13, padding: '12px 0' }}>
            Cargando el catálogo…
          </div>
        )}

        {seccion !== 'usuarios' && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          {(lista || []).map(item => (
            abierta === item.clave ? (
              <FichaEditable key={item.clave} titulo={item.nombre} campos={campos}
                valores={valores} setValores={setValores}
                onGuardar={guardar} onBorrar={borrar} guardando={guardando}
                esNueva={false} foco={foco} setFoco={setFoco} />
            ) : (
              <button key={item.clave} onClick={() => abrir(item)} style={{
                textAlign: 'left', width: '100%', padding: '13px 15px',
                background: 'rgba(255,255,255,0.03)',
                border: '1px solid rgba(255,255,255,0.07)',
                borderRadius: 13, cursor: 'pointer',
              }}>
                <div style={{
                  fontFamily: 'var(--hl-font-display)', fontStyle: 'italic',
                  fontSize: 15, color: 'rgba(255,255,255,0.92)', letterSpacing: -0.3,
                  marginBottom: 3,
                }}>{item.nombre}</div>
                <div style={{
                  fontSize: 11.5, color: 'rgba(255,255,255,0.42)',
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>
                  {seccion === 'celulas'
                    ? `${item.horario} · ${item.direccion} · ${item.anfitrion}`
                    : (item.descripcion || item.prompt)}
                </div>
              </button>
            )
          ))}

          {nueva && (
            <FichaEditable titulo={seccion === 'celulas' ? 'Célula nueva' : 'Ambiente nuevo'}
              campos={campos} valores={valores} setValores={setValores}
              onGuardar={guardar} onBorrar={() => {}} guardando={guardando}
              esNueva foco={foco} setFoco={setFoco} />
          )}
        </div>
        )}

        {/* Redacción asistida (solo en edición de ambiente) */}
        {seccion === 'ambientes' && abierta && (
          <button onClick={redactarPromptAmbiente} disabled={redactando} style={{
            marginTop: 12, height: 40, padding: '0 16px', borderRadius: 11,
            border: '1px solid rgba(221,214,254,0.25)',
            background: 'rgba(168,85,247,0.1)',
            color: 'var(--hl-accent-light)', fontSize: 12.5, fontWeight: 500,
            fontFamily: 'var(--hl-font-ui)', cursor: redactando ? 'wait' : 'pointer',
          }}>{redactando ? 'El estudio redacta…' : 'Redactar el prompt desde la descripción'}</button>
        )}

        {seccion !== 'usuarios' && !nueva && !abierta && (
          <button onClick={abrirNueva} style={{
            marginTop: 14, width: '100%', height: 46, borderRadius: 13,
            border: '1px dashed rgba(221,214,254,0.3)', background: 'transparent',
            color: 'var(--hl-accent-light)', fontSize: 13.5, fontWeight: 500,
            fontFamily: 'var(--hl-font-ui)', cursor: 'pointer',
          }}>+ Añadir {seccion === 'celulas' ? 'célula' : 'ambiente'}</button>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AjustesScreen });