// Sign-in modal + account menu. Wraps fsnCloud auth.
const { useState: useAuthS, useEffect: useAuthE, useRef: useAuthR } = React;

function SignInModal({ open, onClose, intent }) {
  const [email, setEmail] = useAuthS('');
  const [busy, setBusy] = useAuthS(false);
  const [sent, setSent] = useAuthS(false);
  const [err, setErr] = useAuthS('');

  if (!open) return null;

  const google = async () => {
    setBusy(true); setErr('');
    try { await window.fsnCloud.signInWithGoogle(); }
    catch (e) { setErr(e.message || 'Google sign-in failed'); setBusy(false); }
  };

  const magic = async (e) => {
    e.preventDefault();
    if (!email.trim() || !email.includes('@')) { setErr('Enter a valid email'); return; }
    setBusy(true); setErr('');
    try {
      await window.fsnCloud.signInWithMagicLink(email.trim().toLowerCase());
      setSent(true);
    } catch (e) {
      setErr(e.message || 'Could not send link');
    } finally { setBusy(false); }
  };

  return (
    <div className="signin-overlay" onClick={onClose}>
      <div className="signin-modal" onClick={e => e.stopPropagation()}>
        <button className="signin-close" onClick={onClose} aria-label="Close">×</button>

        <div className="signin-brand">
          <div className="signin-logo">FSN</div>
          <div className="signin-wordmark">FULL SEND NOMAD</div>
        </div>

        <h2 className="signin-title">
          {intent === 'favorite' ? 'Save this city to your list' :
           intent === 'snip' ? 'Capture a snip' :
           intent === 'playbook' ? 'Build a playbook' :
           intent === 'journal' ? 'Open your journal' :
           intent === 'ai' ? 'Use AI features' :
           'Sign in to Full Send Nomad'}
        </h2>
        <p className="signin-sub">
          Free forever. Your data syncs across devices and nothing leaves except what you explicitly share.
        </p>

        {sent ? (
          <div className="signin-sent">
            <div className="signin-sent-mark">✓</div>
            <div>
              <div className="signin-sent-title">Check your email</div>
              <div className="signin-sent-body">
                A sign-in link is on its way to <strong>{email}</strong>. Click it to finish signing in.
              </div>
            </div>
          </div>
        ) : (
          <>
            <button className="signin-btn signin-google" onClick={google} disabled={busy}>
              <svg width="18" height="18" viewBox="0 0 18 18">
                <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.92c1.71-1.57 2.7-3.9 2.7-6.61z"/>
                <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26a5.4 5.4 0 0 1-3.04.84A5.4 5.4 0 0 1 3.96 10.7H.94v2.33A9 9 0 0 0 9 18z"/>
                <path fill="#FBBC05" d="M3.96 10.7c-.18-.54-.28-1.11-.28-1.7s.1-1.16.28-1.7V4.97H.94A9 9 0 0 0 0 9c0 1.45.35 2.83.94 4.03L3.96 10.7z"/>
                <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0a9 9 0 0 0-8.06 4.97L3.96 7.3A5.4 5.4 0 0 1 9 3.58z"/>
              </svg>
              Continue with Google
            </button>

            <div className="signin-divider"><span>or</span></div>

            <form onSubmit={magic} className="signin-magic">
              <label>Email magic link</label>
              <input
                type="email" placeholder="you@example.com"
                value={email} onChange={e => setEmail(e.target.value)}
                disabled={busy} autoFocus />
              <button type="submit" className="signin-btn signin-magic-btn" disabled={busy}>
                {busy ? 'Sending…' : 'Send sign-in link'}
              </button>
            </form>

            {err && <div className="signin-err">{err}</div>}
          </>
        )}

        <div className="signin-foot">
          By signing in you accept that we store your favorites, playbooks, and bio
          on Supabase. We never share or sell. You can delete your account anytime.
        </div>
      </div>
    </div>
  );
}

function AccountMenu({ user, profile, onSignOut, onOpenAdmin }) {
  const [open, setOpen] = useAuthS(false);
  const ref = useAuthR(null);

  useAuthE(() => {
    if (!open) return;
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);

  if (!user) return null;

  const initials = (profile?.display_name || user.email || '?')
    .split(/\s+|@/)[0].slice(0, 2).toUpperCase();

  return (
    <div className="account-menu" ref={ref}>
      <button className="account-trigger" onClick={() => setOpen(o => !o)}>
        <div className="account-avatar">{initials}</div>
        <div className="account-meta">
          <div className="account-name">{profile?.display_name || user.email?.split('@')[0]}</div>
          <div className="account-email">{user.email}</div>
        </div>
      </button>
      {open && (
        <div className="account-pop">
          <div className="account-pop-head">
            <div className="account-avatar lg">{initials}</div>
            <div>
              <div className="account-name">{profile?.display_name || user.email?.split('@')[0]}</div>
              <div className="account-email">{user.email}</div>
            </div>
          </div>
          {profile?.is_admin && (
            <button className="account-item" onClick={() => { setOpen(false); onOpenAdmin && onOpenAdmin(); }}>
              <span>⌨</span> Admin center
            </button>
          )}
          <button className="account-item" onClick={() => { setOpen(false); window.dispatchEvent(new CustomEvent('fsn-open-settings')); }}>
            <span>⚙</span> Settings & API key
          </button>
          <button className="account-item" onClick={() => { setOpen(false); window.dispatchEvent(new CustomEvent('fsn-open-bio')); }}>
            <span>👤</span> My bio
          </button>
          <div className="account-sep" />
          <button className="account-item account-signout" onClick={onSignOut}>
            <span>↗</span> Sign out
          </button>
        </div>
      )}
    </div>
  );
}

function SignedOutCta({ onSignIn }) {
  return (
    <button className="signed-out-cta" onClick={onSignIn}>
      <span className="signed-out-cta-label">Sign in</span>
      <span className="signed-out-cta-sub">Save favorites · sync · AI</span>
    </button>
  );
}

window.SignInModal = SignInModal;
window.AccountMenu = AccountMenu;
window.SignedOutCta = SignedOutCta;