// ─────────────────────────────────────────────────────────────────────────────
// Odinote — el estado de la conexión con nuestro servidor (barra de Inicio)
//
// Solo sale con el navegador conectado (ver src/servidor.js): dice si todo
// está guardado allí y da un enlace de un solo uso para conectar otro aparato
// (el móvil, otro ordenador). Sin conectar no se pinta nada.
// ─────────────────────────────────────────────────────────────────────────────

function PanelServidor() {
  const S = window.OdiServidor;
  const [fase, setFase] = React.useState(() => (S ? S.fase() : 'desconectado'));
  const [enlace, setEnlace] = React.useState(null);
  const [copiado, setCopiado] = React.useState(false);
  React.useEffect(() => (S ? S.escucha(setFase) : undefined), []);

  if (!S || window.electronAPI || fase === 'desconectado' || fase === 'conectando') return null;

  const textos = {
    'al-dia': [window.t('Guardado en el servidor', 'Saved on the server'), 'cloud_done'],
    subiendo: [window.t('Guardando en el servidor…', 'Saving to the server…'), 'sync'],
    'sin-red': [window.t('Sin conexión con el servidor: se guarda aquí y se sube al volver.', 'No connection to the server: saved here, uploaded when it is back.'), 'cloud_off'],
  };
  const [texto, icono] = textos[fase] || textos['al-dia'];

  const pideEnlace = async () => {
    try {
      const r = await S.enlaceNuevo('aparato');
      setEnlace(r.enlace);
      setCopiado(false);
    } catch (e) {
      window.showToast && window.showToast(window.t('No se pudo crear el enlace.', 'Could not create the link.'), 'error');
    }
  };
  const copia = () => {
    try { navigator.clipboard.writeText(enlace); setCopiado(true); } catch (e) {}
  };

  return (
    <div className="panel-servidor">
      <div className={`panel-servidor__estado panel-servidor__estado--${fase}`}>
        <span className="material-symbols-rounded">{icono}</span>
        <span>{texto}</span>
      </div>
      {enlace ? (
        <div className="panel-servidor__enlace">
          <p className="panel-servidor__ayuda">
            {window.t('Ábrelo en el otro aparato antes de 15 minutos. Sirve una sola vez.', 'Open it on the other device within 15 minutes. It works once.')}
          </p>
          <div className="panel-servidor__fila">
            <input className="panel-servidor__campo" readOnly value={enlace} onFocus={(e) => e.target.select()}/>
            <button className="panel-servidor__copiar" onClick={copia} title={window.t('Copiar', 'Copy')}>
              <span className="material-symbols-rounded">{copiado ? 'check' : 'content_copy'}</span>
            </button>
          </div>
        </div>
      ) : (
        <button className="panel-servidor__boton" onClick={pideEnlace}>
          <span className="material-symbols-rounded">link</span>
          {window.t('Conectar otro aparato', 'Connect another device')}
        </button>
      )}
    </div>
  );
}
window.PanelServidor = PanelServidor;