// screens/configuracion.jsx
// Configuración del sistema — solo admin/gerencia

// ─── Sub-sección: Usuarios ─────────────────────────────────────────────────
function SeccionUsuarios({ user }) {
  const [usuarios, setUsuarios] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [modal, setModal] = useState(null);
  const [proyectos, setProyectos] = useState([]);

  const ROLES = ['admin', 'gerencia', 'finanzas', 'rrhh', 'campo', 'usuario'];
  const COLORES = ['#F5C500', '#3FB950', '#58A6FF', '#D2A8FF', '#FFA657', '#F85149', '#8896B3'];

  const cargar = useCallback(async () => {
    setLoading(true);
    try {
      const [u, p] = await Promise.all([
        window.API.usuarios.list(),
        window.API.proyectos.list()
      ]);
      setUsuarios(Array.isArray(u) ? u : (u.usuarios || []));
      setProyectos(Array.isArray(p) ? p : (p.proyectos || []));
    } catch (e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

  useEffect(() => { cargar(); }, [cargar]);

  const abrirCrear = () => setModal({ modo: 'crear', datos: { nombre: '', email: '', password: '', rol: 'usuario', proyecto_id: '', color: '#58A6FF', activo: true } });
  const abrirEditar = (u) => setModal({ modo: 'editar', datos: { ...u, password: '' } });

  const guardar = async () => {
    const d = modal.datos;
    if (!d.nombre || !d.email) return alert('Nombre y email son requeridos.');
    if (modal.modo === 'crear' && !d.password) return alert('La contraseña es requerida.');
    try {
      if (modal.modo === 'crear') {
        await window.API.usuarios.create(d);
      } else {
        const payload = { ...d };
        if (!payload.password) delete payload.password;
        await window.API.usuarios.update(d.id, payload);
      }
      setModal(null);
      cargar();
    } catch (e) { alert('Error: ' + e.message); }
  };

  if (loading) return <div style={{display:"flex",justifyContent:"center",padding:40}}><Spinner size={24}/></div>;
  if (error)   return <ErrorBanner msg={error} onRetry={cargar}/>;

  return (
    <div className="config-section">
      <div className="config-section-header">
        <div>
          <h3>Usuarios del sistema</h3>
          <p className="config-section-desc">{usuarios.length} usuario{usuarios.length !== 1 ? 's' : ''} registrado{usuarios.length !== 1 ? 's' : ''}</p>
        </div>
        <button className="btn-primary" style={{width:"auto",padding:"10px 14px"}} onClick={abrirCrear}>
          <Icon name="plus" size={14}/> Nuevo usuario
        </button>
      </div>

      <div className="usuarios-grid">
        {usuarios.map(u => (
          <div key={u.id} className={`usuario-card ${!u.activo ? 'inactivo' : ''}`}>
            <div className="usuario-card-top">
              <div className="usuario-avatar-lg" style={{background: u.color || '#58A6FF'}}>
                {(u.iniciales || (u.nombre || '?')[0]).toUpperCase()}
              </div>
              <div className="usuario-info">
                <div className="usuario-nombre">{u.nombre}</div>
                <div className="usuario-email">{u.email}</div>
                <div className="usuario-pills">
                  <span className={`pill-rol ${u.rol}`}>{u.rol}</span>
                  {!u.activo && <span className="pill-inactivo">inactivo</span>}
                </div>
              </div>
            </div>
            <div className="usuario-card-bot">
              <span className="usuario-proyecto">
                {u.proyecto_nombre ? `📁 ${u.proyecto_nombre}` : <span style={{color: 'var(--text-3)'}}>Sin proyecto asignado</span>}
              </span>
              <button className="btn-icon-sm" onClick={() => abrirEditar(u)} title="Editar">
                <Icon name="pencil" size={14}/>
              </button>
            </div>
          </div>
        ))}
      </div>

      {modal && (
        <Modal title={modal.modo === 'crear' ? 'Nuevo usuario' : 'Editar usuario'} onClose={() => setModal(null)} width={520}>
          <div style={{display:"flex",flexDirection:"column",gap:14}}>
            <div className="form-row">
              <label className="form-label">Nombre completo</label>
              <input type="text" className="form-input" value={modal.datos.nombre}
                onChange={e => setModal(m => ({...m, datos: {...m.datos, nombre: e.target.value}}))}/>
            </div>
            <div className="form-row">
              <label className="form-label">Correo electrónico</label>
              <input type="email" className="form-input" value={modal.datos.email}
                onChange={e => setModal(m => ({...m, datos: {...m.datos, email: e.target.value}}))}/>
            </div>
            <div className="form-row">
              <label className="form-label">{modal.modo === 'crear' ? 'Contraseña' : 'Nueva contraseña (dejar vacío para no cambiar)'}</label>
              <input type="password" className="form-input"
                placeholder={modal.modo === 'editar' ? '••••••••' : ''}
                value={modal.datos.password}
                onChange={e => setModal(m => ({...m, datos: {...m.datos, password: e.target.value}}))}/>
            </div>
            <div className="form-row-2">
              <div className="form-row">
                <label className="form-label">Rol</label>
                <select className="form-input" value={modal.datos.rol}
                  onChange={e => setModal(m => ({...m, datos: {...m.datos, rol: e.target.value}}))}>
                  {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
                </select>
              </div>
              <div className="form-row">
                <label className="form-label">Proyecto asignado</label>
                <select className="form-input" value={modal.datos.proyecto_id || ''}
                  onChange={e => setModal(m => ({...m, datos: {...m.datos, proyecto_id: e.target.value || null}}))}>
                  <option value="">— Sin proyecto —</option>
                  {proyectos.map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
                </select>
              </div>
            </div>
            <div className="form-row-2">
              <div className="form-row">
                <label className="form-label">Color de avatar</label>
                <div className="color-picker">
                  {COLORES.map(c => (
                    <button key={c} type="button"
                      className={`color-swatch ${modal.datos.color === c ? 'selected' : ''}`}
                      style={{background: c}}
                      onClick={() => setModal(m => ({...m, datos: {...m.datos, color: c}}))}/>
                  ))}
                </div>
              </div>
              <div className="form-row">
                <label className="form-label">Estado</label>
                <label className="toggle-label">
                  <input type="checkbox" checked={modal.datos.activo !== false}
                    onChange={e => setModal(m => ({...m, datos: {...m.datos, activo: e.target.checked}}))}/>
                  <span className="toggle-slider"/>
                  <span>{modal.datos.activo !== false ? 'Activo' : 'Inactivo'}</span>
                </label>
              </div>
            </div>
          </div>
          <div style={{display:"flex",justifyContent:"flex-end",gap:10,marginTop:20}}>
            <button className="btn-secondary" onClick={() => setModal(null)}>Cancelar</button>
            <button className="btn-primary" style={{width:"auto",padding:"10px 18px"}} onClick={guardar}>
              {modal.modo === 'crear' ? 'Crear usuario' : 'Guardar cambios'}
            </button>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── Sub-sección: IA ───────────────────────────────────────────────────────
function SeccionIA({ config, onSave }) {
  const initial = (config.anthropic_api_key && typeof config.anthropic_api_key === 'object')
    ? (config.anthropic_api_key.valor || '')
    : (config.anthropic_api_key || '');
  const [apiKey, setApiKey] = useState(initial === 'pendiente' ? '' : initial);
  const [mostrar, setMostrar] = useState(false);
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  const guardar = async () => {
    setGuardando(true);
    try {
      await onSave({ anthropic_api_key: apiKey });
      setOk(true);
      setTimeout(() => setOk(false), 3000);
    } catch (e) { alert(e.message); }
    finally { setGuardando(false); }
  };

  const tieneKey = apiKey && apiKey !== 'pendiente' && apiKey.length > 10;

  return (
    <div className="config-section">
      <div className="config-section-header">
        <div>
          <h3>Asistente IA — Claude API</h3>
          <p className="config-section-desc">Conecta tu API key de Anthropic para habilitar el asistente inteligente</p>
        </div>
        <div className={`ia-status-badge ${tieneKey ? 'activo' : 'inactivo'}`}>
          {tieneKey ? '● Conectado' : '○ Sin configurar'}
        </div>
      </div>

      <div className="ia-config-card">
        <div className="ia-info-row">
          <div className="ia-icon-box"><Icon name="cpu" size={24}/></div>
          <div>
            <div className="ia-title">Claude por Anthropic</div>
            <div className="ia-subtitle">Modelo: claude-sonnet-4 · Acceso a todos los datos del sistema</div>
          </div>
        </div>

        <div className="form-row" style={{marginTop:"1.25rem"}}>
          <label className="form-label">API Key de Anthropic</label>
          <div className="input-with-btn">
            <input type={mostrar ? 'text' : 'password'} className="form-input"
              placeholder="sk-ant-api03-..." value={apiKey}
              onChange={e => setApiKey(e.target.value)}/>
            <button type="button" className="btn-icon-inline" onClick={() => setMostrar(!mostrar)} title={mostrar ? 'Ocultar' : 'Mostrar'}>
              <Icon name={mostrar ? 'eyeoff' : 'eye'} size={16}/>
            </button>
          </div>
          <p className="form-hint">
            Obtén tu API key en <a href="https://console.anthropic.com" target="_blank" rel="noreferrer" style={{color:'var(--yellow)'}}>console.anthropic.com</a>
          </p>
        </div>

        <div className="ia-actions">
          <button className={ok ? 'btn-success' : 'btn-primary'} style={{width:"auto",padding:"10px 18px"}}
            onClick={guardar} disabled={guardando}>
            {guardando ? 'Guardando...' : ok ? '✓ Guardado' : 'Guardar API Key'}
          </button>
        </div>
      </div>

      <div className="ia-permisos">
        <div className="ia-permiso-item">
          <span className="ia-permiso-icon admin"><Icon name="shieldcheck" size={14}/></span>
          <div>
            <div className="ia-permiso-title">IA Administrador (admin + gerencia)</div>
            <div className="ia-permiso-desc">Acceso completo: consulta y modificación de datos, generación de reportes, carga de archivos en cualquier formato</div>
          </div>
        </div>
        <div className="ia-permiso-item">
          <span className="ia-permiso-icon user"><Icon name="user" size={14}/></span>
          <div>
            <div className="ia-permiso-title">IA Empleado (campo + finanzas + usuario)</div>
            <div className="ia-permiso-desc">Solo lectura de su proyecto asignado, sin acceso a datos de otros proyectos</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Sub-sección: Servicios ────────────────────────────────────────────────
function SeccionServicios({ config, onSave }) {
  const v = (k, def='') => (config[k] && typeof config[k] === 'object') ? (config[k].valor || def) : (config[k] || def);
  const [form, setForm] = useState({
    metabase_url:   v('metabase_url'),
    nextcloud_url:  v('nextcloud_url'),
    mattermost_url: v('mattermost_url'),
    n8n_url:        v('n8n_url'),
  });
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  const guardar = async () => {
    setGuardando(true);
    try {
      await onSave(form);
      setOk(true);
      setTimeout(() => setOk(false), 3000);
    } catch (e) { alert(e.message); }
    finally { setGuardando(false); }
  };

  const servicios = [
    { key: 'metabase_url',   label: 'Metabase',   desc: 'Reportes y dashboards', icon: 'chart',  color: '#58A6FF' },
    { key: 'nextcloud_url',  label: 'Nextcloud',  desc: 'Gestión de archivos',   icon: 'folder', color: '#3FB950' },
    { key: 'mattermost_url', label: 'Mattermost', desc: 'Chat de equipos',       icon: 'bot',    color: '#D2A8FF' },
    { key: 'n8n_url',        label: 'n8n',        desc: 'Automatizaciones',      icon: 'flow',   color: '#FFA657' },
  ];

  return (
    <div className="config-section">
      <div className="config-section-header">
        <div>
          <h3>URLs de servicios</h3>
          <p className="config-section-desc">Configura las URLs de los servicios integrados</p>
        </div>
      </div>

      <div className="servicios-grid">
        {servicios.map(s => (
          <div key={s.key} className="servicio-row">
            <div className="servicio-icon" style={{color: s.color}}><Icon name={s.icon} size={18}/></div>
            <div className="servicio-info">
              <div className="servicio-label">{s.label}</div>
              <div className="servicio-desc">{s.desc}</div>
            </div>
            <input type="url" className="form-input servicio-input"
              placeholder={`https://${s.label.toLowerCase()}.almacosadecv.com`}
              value={form[s.key]}
              onChange={e => setForm(f => ({...f, [s.key]: e.target.value}))}/>
          </div>
        ))}
      </div>

      <div style={{marginTop:"1.25rem",display:"flex",justifyContent:"flex-end"}}>
        <button className={ok ? 'btn-success' : 'btn-primary'} style={{width:"auto",padding:"10px 18px"}}
          onClick={guardar} disabled={guardando}>
          {guardando ? 'Guardando...' : ok ? '✓ Guardado' : 'Guardar URLs'}
        </button>
      </div>
    </div>
  );
}

// ─── Sub-sección: Parámetros ───────────────────────────────────────────────
function SeccionParametros({ config, onSave }) {
  // En init.sql se guardan como porcentajes (7.5, 8.75) en clave isss_patronal_pct
  const v = (k) => {
    const raw = (config[k] && typeof config[k] === 'object') ? config[k].valor : config[k];
    return raw !== undefined && raw !== null && raw !== '' ? String(raw) : '';
  };
  const [form, setForm] = useState({
    isss_patronal_pct: v('isss_patronal_pct') || '7.50',
    afp_patronal_pct:  v('afp_patronal_pct')  || '8.75',
    isss_laboral_pct:  v('isss_laboral_pct')  || '3.00',
    afp_laboral_pct:   v('afp_laboral_pct')   || '7.25',
  });
  const [guardando, setGuardando] = useState(false);
  const [ok, setOk] = useState(false);

  const guardar = async () => {
    setGuardando(true);
    try {
      await onSave(form);
      setOk(true);
      setTimeout(() => setOk(false), 3000);
    } catch (e) { alert(e.message); }
    finally { setGuardando(false); }
  };

  const Campo = ({ k, label, desc }) => (
    <div className="param-row">
      <div className="param-info">
        <div className="param-label">{label}</div>
        <div className="param-desc">{desc}</div>
      </div>
      <div className="param-input-wrap">
        <input type="number" className="form-input param-input"
          min="0" max="100" step="0.01"
          value={form[k]}
          onChange={e => setForm(f => ({...f, [k]: e.target.value}))}/>
        <span className="param-unit">%</span>
      </div>
    </div>
  );

  const isssP = parseFloat(form.isss_patronal_pct || 0);
  const afpP  = parseFloat(form.afp_patronal_pct  || 0);

  return (
    <div className="config-section">
      <div className="config-section-header">
        <div>
          <h3>Parámetros de planilla</h3>
          <p className="config-section-desc">Porcentajes de carga patronal y laboral para el cálculo de planillas</p>
        </div>
      </div>

      <div className="params-table">
        <div className="params-group">
          <div className="params-group-title">Cuota patronal</div>
          <Campo k="isss_patronal_pct" label="ISSS Patronal" desc="Seguro Social — cargo al empleador"/>
          <Campo k="afp_patronal_pct"  label="AFP Patronal"  desc="Pensiones — cargo al empleador"/>
        </div>
        <div className="params-group">
          <div className="params-group-title">Cuota laboral</div>
          <Campo k="isss_laboral_pct" label="ISSS Laboral" desc="Seguro Social — cargo al empleado"/>
          <Campo k="afp_laboral_pct"  label="AFP Laboral"  desc="Pensiones — cargo al empleado"/>
        </div>
      </div>

      <div className="params-preview">
        <div className="params-preview-title">Vista previa — salario ejemplo $500</div>
        <div className="params-preview-row">
          <span>ISSS Patronal</span>
          <span className="mono">${(500 * isssP / 100).toFixed(2)}</span>
        </div>
        <div className="params-preview-row">
          <span>AFP Patronal</span>
          <span className="mono">${(500 * afpP / 100).toFixed(2)}</span>
        </div>
        <div className="params-preview-row total">
          <span>Costo real empleador</span>
          <span className="mono">${(500 * (1 + isssP/100 + afpP/100)).toFixed(2)}</span>
        </div>
      </div>

      <div style={{marginTop:"1.25rem",display:"flex",justifyContent:"flex-end"}}>
        <button className={ok ? 'btn-success' : 'btn-primary'} style={{width:"auto",padding:"10px 18px"}}
          onClick={guardar} disabled={guardando}>
          {guardando ? 'Guardando...' : ok ? '✓ Guardado' : 'Guardar parámetros'}
        </button>
      </div>
    </div>
  );
}

// ─── Pantalla principal Configuracion ─────────────────────────────────────
function Configuracion({ user }) {
  const esAdmin = user && (user.rol === 'admin' || user.rol === 'gerencia');
  const [tab, setTab] = useState('usuarios');
  const [config, setConfig] = useState({});
  const [loadingConfig, setLoadingConfig] = useState(true);

  useEffect(() => {
    if (!esAdmin) { setLoadingConfig(false); return; }
    window.API.config.get()
      .then(d => setConfig(d || {}))
      .catch(() => setConfig({}))
      .finally(() => setLoadingConfig(false));
  }, [esAdmin]);

  const guardarConfig = async (partial) => {
    await window.API.config.set(partial);
    setConfig(c => {
      const next = { ...c };
      Object.entries(partial).forEach(([k, valor]) => {
        next[k] = { valor: String(valor), descripcion: c[k]?.descripcion || '' };
      });
      return next;
    });
  };

  if (!esAdmin) {
    return (
      <div className="content">
        <div className="page-title-row">
          <div>
            <div className="page-title">Configuración</div>
          </div>
        </div>
        <EmptyState icon="lock" title="Acceso restringido"
          sub="Solo administradores y gerencia pueden acceder a la configuración del sistema."/>
      </div>
    );
  }

  const TABS = [
    { id: 'usuarios',   label: 'Usuarios',     icon: 'users' },
    { id: 'ia',         label: 'IA Asistente', icon: 'cpu' },
    { id: 'servicios',  label: 'Servicios',    icon: 'link' },
    { id: 'parametros', label: 'Parámetros',   icon: 'sliders' },
  ];

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Configuración</div>
          <div className="page-sub">Administración del sistema ALMACO</div>
        </div>
      </div>

      <div className="config-tabs">
        {TABS.map(t => (
          <button key={t.id} type="button"
            className={`config-tab ${tab === t.id ? 'active' : ''}`}
            onClick={() => setTab(t.id)}>
            <Icon name={t.icon} size={15}/>
            <span>{t.label}</span>
          </button>
        ))}
      </div>

      <div className="config-content">
        {loadingConfig && tab !== 'usuarios'
          ? <div style={{display:"flex",justifyContent:"center",padding:40}}><Spinner size={24}/></div>
          : tab === 'usuarios'   ? <SeccionUsuarios user={user}/>
          : tab === 'ia'         ? <SeccionIA config={config} onSave={guardarConfig}/>
          : tab === 'servicios'  ? <SeccionServicios config={config} onSave={guardarConfig}/>
                                 : <SeccionParametros config={config} onSave={guardarConfig}/>
        }
      </div>
    </div>
  );
}

window.Configuracion = Configuracion;