/* global React */
const { useState: useStateLogin, useEffect: useEffectLogin } = React;

// ============================================================================
// LOGIN PAGE
// ============================================================================

const VALID_EMAIL = 'juancruz@heliossalud.com';
const VALID_PASS  = 'heliossalud2026';

// Tweak defaults (persisted via editmode host when available)
const LOGIN_TWEAKS = /*EDITMODE-BEGIN*/{
  "bgImage": "",
  "bgOpacity": 1,
  "bgDark": 0,
  "bgPosX": 50,
  "bgPosY": 50,
  "bgZoom": 100
}/*EDITMODE-END*/;

function useLoginTweaks() {
  const [tw, setTw] = useStateLogin(()=>{
    // localStorage override (for in-session tweaks / uploads)
    try {
      const ls = JSON.parse(localStorage.getItem('helios_login_tweaks')||'null');
      if (ls) {
        // Framing version: bump to force re-apply of default bgImage / posX / posY / zoom / opacity / dark
        const FRAMING_VER = 6;
        const savedVer = parseInt(localStorage.getItem('helios_login_framing_ver')||'0',10);
        if (savedVer < FRAMING_VER) {
          localStorage.setItem('helios_login_framing_ver', String(FRAMING_VER));
          // v5: clear any previously uploaded bg image so the bundled asset shows
          return {...LOGIN_TWEAKS};
        }
        return {...LOGIN_TWEAKS, ...ls};
      }
    } catch(e){}
    return {...LOGIN_TWEAKS};
  });
  useEffectLogin(()=>{
    try { localStorage.setItem('helios_login_tweaks', JSON.stringify(tw)); } catch(e){}
    // notify listeners in same page
    window.dispatchEvent(new CustomEvent('helios-login-tweaks', {detail: tw}));
  },[tw]);
  useEffectLogin(()=>{
    const h = (e)=>setTw(t=>({...t, ...e.detail}));
    window.addEventListener('helios-login-tweaks-apply', h);
    return ()=>window.removeEventListener('helios-login-tweaks-apply', h);
  },[]);
  return [tw, setTw];
}

function LoginPage({onSuccess}) {
  const [tw, setTw]             = useLoginTweaks();
  const [email, setEmail]       = useStateLogin('');
  const [pass, setPass]         = useStateLogin('');
  const [showPass, setShowPass] = useStateLogin(false);
  const [remember, setRemember] = useStateLogin(true);
  const [error, setError]       = useStateLogin(false);
  const [loading, setLoading]   = useStateLogin(false);
  const [loadingScreen, setLoadingScreen] = useStateLogin(false);
  const [progress, setProgress] = useStateLogin(0);
  const [fadeOut, setFadeOut]   = useStateLogin(false);

  const submit = (e) => {
    e && e.preventDefault();
    if (loading) return;
    setError(false);
    setLoading(true);
    setTimeout(()=>{
      const ok = email.trim().toLowerCase() === VALID_EMAIL && pass === VALID_PASS;
      if (!ok) {
        setLoading(false);
        setError(true);
        return;
      }
      // Success: fade out login, show loading screen 2s, then onSuccess
      setFadeOut(true);
      setTimeout(()=>{
        setLoadingScreen(true);
        // animate progress 0 -> 100 over 2000ms
        const start = Date.now();
        const tick = () => {
          const t = Math.min(1, (Date.now() - start) / 2000);
          setProgress(t*100);
          if (t < 1) requestAnimationFrame(tick);
          else setTimeout(()=> onSuccess && onSuccess(), 120);
        };
        requestAnimationFrame(tick);
      }, 380);
    }, 320);
  };

  if (loadingScreen) {
    return <div className="fixed inset-0 bg-white flex items-center justify-center z-[100] animate-fade-in">
      <div className="flex flex-col items-center">
        <img
          src={(window.__resources && window.__resources.logoIso) || 'assets/helios-isotipo.jpg'}
          alt="Helios Salud"
          className="w-[72px] h-[72px] object-contain rounded-xl animate-pulse-soft"
          style={{boxShadow:'0 8px 24px -8px rgba(30, 107, 179, 0.35)'}}
        />
        <div className="mt-5 text-[13px] text-ink-400 font-medium tracking-wide">Cargando Helios OS…</div>
        <div className="mt-4 w-[180px] h-[3px] rounded-full bg-slate-100 overflow-hidden">
          <div className="h-full bg-helios-500 rounded-full transition-[width] duration-75"
               style={{width: progress+'%'}}/>
        </div>
      </div>
    </div>;
  }

  return <div className={'fixed inset-0 flex z-[100] bg-white transition-opacity duration-300 '+(fadeOut?'opacity-0':'opacity-100')}>
    {/* LEFT — image panel */}
    <div className="hidden md:block md:w-1/2 relative overflow-hidden">
      {/* Default brand background (covers full panel, preserves aspect ratio) */}
      {!tw.bgImage && <div className="absolute inset-0" style={{
        backgroundImage: `url(${(window.__resources && window.__resources.loginBg) || 'assets/login-bg.jpg?v=6'})`,
        backgroundSize: 'cover',
        backgroundPosition: 'right center',
        backgroundRepeat: 'no-repeat',
        backgroundColor: '#0A1B2E'
      }}/>}
      {/* Custom uploaded image (via Tweaks) */}
      {tw.bgImage && <div className="absolute inset-0" style={{
        backgroundImage: `url(${tw.bgImage})`,
        backgroundSize: `${tw.bgZoom}%`,
        backgroundPosition: `${tw.bgPosX}% ${tw.bgPosY}%`,
        backgroundRepeat: 'no-repeat',
        opacity: tw.bgOpacity
      }}/>}
      {/* Optional darkening overlay (controlled by Tweaks) */}
      {tw.bgImage && tw.bgDark > 0 && <div className="absolute inset-0" style={{
        background: `rgba(8,27,53,${tw.bgDark})`
      }}/>}
    </div>

    {/* RIGHT — form */}
    <div className="w-full md:w-1/2 flex items-center justify-center px-6 py-10 bg-white relative">
      {/* subtle gradient for small screens */}
      <div className="absolute inset-0 md:hidden opacity-5" style={{
        background: 'linear-gradient(135deg, #1E6BB3, #F09B55)'
      }}/>

      <form onSubmit={submit} className="relative w-full max-w-[380px]">
        <div className="flex flex-col items-center mb-7">
          <img
            src={(window.__resources && window.__resources.logoFull) || 'assets/helios-color.jpg'}
            alt="Helios Salud"
            className="h-12 w-auto object-contain"
          />
          <p className="mt-4 text-[12.5px] text-ink-400 font-medium tracking-wide text-center">
            Sistema Operativo Autónomo de Diabetes
          </p>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-[11.5px] font-semibold text-ink-700 mb-1.5">Email</label>
            <input
              type="email"
              value={email}
              onChange={e=>{setEmail(e.target.value); if(error) setError(false);}}
              placeholder="nombre@heliossalud.com"
              autoFocus
              className={'w-full px-3 py-2.5 text-[13px] bg-white border rounded-lg focus:outline-none focus:ring-2 transition '+
                (error ? 'border-[#E04B4B] focus:ring-[#E04B4B]/25 focus:border-[#E04B4B]' : 'border-slate-200 focus:ring-helios-500/30 focus:border-helios-500')}
            />
          </div>

          <div>
            <label className="block text-[11.5px] font-semibold text-ink-700 mb-1.5">Contraseña</label>
            <div className="relative">
              <input
                type={showPass ? 'text' : 'password'}
                value={pass}
                onChange={e=>{setPass(e.target.value); if(error) setError(false);}}
                placeholder="••••••••••••"
                className={'w-full px-3 pr-10 py-2.5 text-[13px] bg-white border rounded-lg focus:outline-none focus:ring-2 transition '+
                  (error ? 'border-[#E04B4B] focus:ring-[#E04B4B]/25 focus:border-[#E04B4B]' : 'border-slate-200 focus:ring-helios-500/30 focus:border-helios-500')}
              />
              <button type="button" onClick={()=>setShowPass(s=>!s)} tabIndex={-1}
                className="absolute right-2 top-1/2 -translate-y-1/2 text-ink-400 hover:text-ink-700 p-1 transition-colors"
                aria-label={showPass ? 'Ocultar contraseña' : 'Mostrar contraseña'}>
                {showPass
                  ? <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-8-10-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                  : <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>}
              </button>
            </div>
          </div>

          <label className="flex items-center gap-2 cursor-pointer select-none">
            <input type="checkbox" checked={remember} onChange={e=>setRemember(e.target.checked)}
              className="w-4 h-4 rounded border-slate-300 text-helios-600 focus:ring-helios-500/30"/>
            <span className="text-[12px] text-ink-700">Recordar contraseña</span>
          </label>

          <button
            type="submit"
            disabled={loading}
            className={'w-full inline-flex items-center justify-center gap-2 py-2.5 rounded-lg text-[13px] font-semibold text-white transition-all '+
              (loading
                ? 'bg-helios-500/70 cursor-wait'
                : 'bg-helios-500 hover:bg-helios-600 active:scale-[0.99]')}>
            {loading && <span className="w-3.5 h-3.5 rounded-full border-2 border-white/40 border-t-white animate-spin"/>}
            {loading ? 'Verificando…' : 'Iniciar sesión'}
          </button>

          {error && <div className="flex items-start gap-2 px-3 py-2.5 rounded-lg bg-[#FBE8E8] ring-1 ring-[#E04B4B]/20 animate-fade-in">
            <svg viewBox="0 0 24 24" className="w-4 h-4 text-[#B93535] shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>
            </svg>
            <div className="text-[11.5px] text-[#B93535] leading-[1.45] font-medium">
              Email o contraseña incorrectos. Verificá tus datos e intentá de nuevo.
            </div>
          </div>}
        </div>

        <div className="mt-6 flex flex-col items-center gap-2">
          <button type="button" className="text-[12px] text-helios-600 hover:text-helios-700 font-medium transition-colors">
            Restablecer contraseña
          </button>
          <button type="button" className="text-[12px] text-ink-500 hover:text-ink-800 font-medium transition-colors">
            No tengo cuenta
          </button>
        </div>
      </form>
    </div>
    <LoginTweaksPanel tw={tw} setTw={setTw}/>
  </div>;
}

// ============================================================================
// TWEAKS PANEL
// ============================================================================

function LoginTweaksPanel({tw, setTw}) {
  const [open, setOpen] = useStateLogin(false);
  const [active, setActive] = useStateLogin(false);
  const [draft, setDraft] = useStateLogin(tw);
  const fileRef = React.useRef(null);

  // Keep draft in sync when applied tweaks change externally (e.g. load, reset)
  useEffectLogin(()=>{ setDraft(tw); }, [tw]);

  useEffectLogin(()=>{
    // Tweaks protocol
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode')   { setActive(true); setOpen(true); }
      if (e.data.type === '__deactivate_edit_mode') { setActive(false); setOpen(false); }
    };
    window.addEventListener('message', onMsg);
    // announce availability after listener registered
    try { window.parent.postMessage({type:'__edit_mode_available'}, '*'); } catch(e){}
    return ()=>window.removeEventListener('message', onMsg);
  }, []);

  // Draft editor (no persistence / no live update to login)
  const setDraftPatch = (patch) => setDraft(d => ({...d, ...patch}));

  // Apply draft → live tweaks + host
  const [savedFlash, setSavedFlash] = useStateLogin(false);

  const save = () => {
    // 1) Apply to live state (triggers localStorage + re-render of bg)
    setTw(draft);
    // 2) Persist to source defaults via host (skip heavy data URLs)
    try {
      const safePatch = {};
      Object.keys(draft).forEach(k => {
        if (k === 'bgImage' && typeof draft[k] === 'string' && draft[k].startsWith('data:')) return;
        safePatch[k] = draft[k];
      });
      if (Object.keys(safePatch).length) {
        window.parent.postMessage({type:'__edit_mode_set_keys', edits: safePatch}, '*');
      }
    } catch(e){}
    // 3) Force a full refresh of the login background / dependent UI by broadcasting
    try {
      window.dispatchEvent(new CustomEvent('helios-login-tweaks-apply', {detail: draft}));
      window.dispatchEvent(new CustomEvent('helios-login-tweaks', {detail: draft}));
    } catch(e){}
    // 4) Visual confirmation
    setSavedFlash(true);
    setTimeout(()=>setSavedFlash(false), 1600);
  };

  const discard = () => setDraft(tw);

  const isDirty = JSON.stringify(draft) !== JSON.stringify(tw);

  const onFile = (e) => {
    const f = e.target.files && e.target.files[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = () => setDraftPatch({bgImage: r.result});
    r.readAsDataURL(f);
  };

  if (!active) return null;

  return <div className="fixed bottom-5 right-5 z-[200] select-none" style={{fontFamily:'system-ui, -apple-system, Segoe UI, Roboto, sans-serif'}}>
    {!open && <button onClick={()=>setOpen(true)}
      className="w-10 h-10 rounded-full bg-ink-900 text-white shadow-lg flex items-center justify-center hover:bg-ink-800 transition">
      <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
      </svg>
    </button>}

    {open && <div className="w-[300px] rounded-xl bg-white shadow-2xl ring-1 ring-slate-200 overflow-hidden"
      style={{boxShadow:'0 24px 60px -12px rgba(8,11,18,0.35), 0 8px 20px -8px rgba(8,11,18,0.15)'}}>
      <div className="px-3.5 py-2.5 border-b border-slate-100 flex items-center justify-between bg-slate-50">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-helios-500"/>
          <span className="text-[12px] font-semibold text-ink-800">Tweaks</span>
        </div>
        <button onClick={()=>setOpen(false)} className="text-ink-400 hover:text-ink-800 p-0.5">
          <svg viewBox="0 0 24 24" className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>
      <div className="p-3.5 space-y-3.5">
        <div>
          <div className="flex items-center justify-between mb-1.5">
            <label className="text-[11px] font-semibold text-ink-700 uppercase tracking-wide">Imagen de fondo</label>
            {draft.bgImage && <button onClick={()=>setDraftPatch({bgImage:''})}
              className="text-[10.5px] text-[#B93535] hover:underline font-medium">Quitar</button>}
          </div>
          {!draft.bgImage && <div className="rounded-lg mb-2 border-2 border-dashed border-slate-200 bg-slate-50 flex items-center justify-center" style={{aspectRatio:'16/9'}}>
            <div className="text-center">
              <svg viewBox="0 0 24 24" className="w-6 h-6 mx-auto text-ink-400 mb-1" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
              </svg>
              <div className="text-[10.5px] text-ink-500">Sin imagen</div>
            </div>
          </div>}
          <input ref={fileRef} type="file" accept="image/*" onChange={onFile} className="hidden"/>
          <button onClick={()=>fileRef.current && fileRef.current.click()}
            className="w-full py-2 rounded-lg bg-helios-500 hover:bg-helios-600 text-white text-[12px] font-semibold transition active:scale-[0.99]">
            {draft.bgImage ? 'Reemplazar imagen' : 'Subir imagen'}
          </button>
          <div className="text-[10px] text-ink-400 mt-1.5 leading-tight">PNG, JPG o WebP. Se guarda en este navegador.</div>
        </div>

        {draft.bgImage && <>
          <div>
            <div className="flex items-center justify-between mb-1.5">
              <label className="text-[10.5px] font-semibold text-ink-700 uppercase tracking-wide">Encuadre</label>
              <button onClick={()=>setDraftPatch({bgPosX:50, bgPosY:50, bgZoom:100})}
                className="text-[10px] text-helios-600 hover:underline font-medium">Centrar</button>
            </div>
            <FramingPad tw={draft} persist={setDraftPatch}/>
            <div className="mt-2 flex items-center gap-2">
              <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-ink-500 shrink-0" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3M8 11h6M11 8v6"/></svg>
              <input type="range" min="50" max="300" step="5" value={draft.bgZoom}
                onChange={e=>setDraftPatch({bgZoom: parseInt(e.target.value,10)})}
                className="flex-1 accent-helios-500"/>
              <span className="text-[10.5px] font-mono text-ink-500 w-8 text-right">{draft.bgZoom}%</span>
            </div>
          </div>
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className="text-[10.5px] font-semibold text-ink-700">Opacidad imagen</label>
              <span className="text-[10.5px] font-mono text-ink-500">{Math.round(draft.bgOpacity*100)}%</span>
            </div>
            <input type="range" min="0" max="1" step="0.05" value={draft.bgOpacity}
              onChange={e=>setDraftPatch({bgOpacity: parseFloat(e.target.value)})}
              className="w-full accent-helios-500"/>
          </div>
          <div>
            <div className="flex items-center justify-between mb-1">
              <label className="text-[10.5px] font-semibold text-ink-700">Oscurecido</label>
              <span className="text-[10.5px] font-mono text-ink-500">{Math.round(draft.bgDark*100)}%</span>
            </div>
            <input type="range" min="0" max="0.9" step="0.05" value={draft.bgDark}
              onChange={e=>setDraftPatch({bgDark: parseFloat(e.target.value)})}
              className="w-full accent-helios-500"/>
          </div>
        </>}
      </div>

      {/* Footer — save / discard */}
      <div className="px-3.5 py-2.5 border-t border-slate-100 bg-slate-50 flex items-center gap-2">
        {isDirty
          ? <>
              <span className="flex items-center gap-1.5 text-[10.5px] text-[#A06A12] font-medium mr-auto">
                <span className="w-1.5 h-1.5 rounded-full bg-[#F0B44C] animate-pulse-soft"/>
                Sin guardar
              </span>
              <button onClick={discard}
                className="px-2.5 py-1.5 rounded-md text-[11px] font-semibold text-ink-600 hover:bg-slate-200/70 transition">
                Descartar
              </button>
              <button onClick={save}
                className="px-3 py-1.5 rounded-md text-[11px] font-semibold text-white bg-helios-500 hover:bg-helios-600 transition active:scale-[0.98] shadow-sm"
                style={{boxShadow:'0 2px 8px -2px rgba(240,155,85,0.5)'}}>
                Guardar cambios
              </button>
            </>
          : <>
              <span className={`flex items-center gap-1.5 text-[10.5px] font-medium mr-auto transition-all duration-300 ${savedFlash ? 'text-[#1E8057] scale-105' : 'text-[#1E8057]'}`}>
                <svg viewBox="0 0 24 24" className="w-3 h-3" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                {savedFlash ? 'Aplicado ✓' : 'Guardado'}
              </span>
              <button disabled
                className="px-3 py-1.5 rounded-md text-[11px] font-semibold text-ink-400 bg-slate-100 cursor-not-allowed">
                Guardar cambios
              </button>
            </>}
      </div>
    </div>}
  </div>;
}


// ---------- Framing pad (drag preview of image position) ----------
function FramingPad({tw, persist}) {
  const ref = React.useRef(null);
  const [drag, setDrag] = useStateLogin(false);

  const onPointerDown = (e) => {
    e.preventDefault();
    setDrag(true);
    ref.current && ref.current.setPointerCapture && ref.current.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    if (!drag || !ref.current) return;
    const r = ref.current.getBoundingClientRect();
    // Drag moves the focal point: dragging right should reveal right side → posX decreases
    // We translate drag delta into posX/posY inversely
    const dx = e.movementX;
    const dy = e.movementY;
    // Sensitivity: higher zoom = smaller shift per px
    const k = 100 / Math.max(tw.bgZoom, 30);
    const nx = Math.max(0, Math.min(100, tw.bgPosX - dx * k * (100/r.width)));
    const ny = Math.max(0, Math.min(100, tw.bgPosY - dy * k * (100/r.height)));
    persist({bgPosX: nx, bgPosY: ny});
  };
  const onPointerUp = (e) => {
    setDrag(false);
    ref.current && ref.current.releasePointerCapture && ref.current.releasePointerCapture(e.pointerId);
  };

  return <div
    ref={ref}
    onPointerDown={onPointerDown}
    onPointerMove={onPointerMove}
    onPointerUp={onPointerUp}
    onPointerCancel={onPointerUp}
    className={'relative rounded-lg overflow-hidden ring-1 ring-slate-200 touch-none select-none '+(drag?'cursor-grabbing':'cursor-grab')}
    style={{
      aspectRatio: '16/9',
      backgroundColor: '#0A4E88',
      backgroundImage: `url(${tw.bgImage})`,
      backgroundSize: `${tw.bgZoom}%`,
      backgroundPosition: `${tw.bgPosX}% ${tw.bgPosY}%`,
      backgroundRepeat: 'no-repeat'
    }}>
    {/* Crosshair + focal point */}
    <div className="absolute inset-0 pointer-events-none">
      <div className="absolute inset-0 ring-1 ring-white/20 rounded-lg"/>
      <div className="absolute"
        style={{left:`${tw.bgPosX}%`, top:`${tw.bgPosY}%`, transform:'translate(-50%,-50%)'}}>
        <div className="w-5 h-5 rounded-full ring-2 ring-white/90 bg-white/20 backdrop-blur-[1px]"
          style={{boxShadow:'0 0 0 1px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.25)'}}/>
      </div>
      <div className="absolute bottom-1.5 right-1.5 px-1.5 py-0.5 rounded bg-black/50 text-white text-[9px] font-mono leading-none">
        {Math.round(tw.bgPosX)}·{Math.round(tw.bgPosY)}
      </div>
    </div>
    {!drag && <div className="absolute top-1.5 left-1.5 px-1.5 py-0.5 rounded bg-black/40 text-white text-[9px] font-medium pointer-events-none">
      Arrastrá para encuadrar
    </div>}
  </div>;
}

window.LoginPage = LoginPage;