// Connect page — fake "Continue with Google" sign-in.
// Stores localStorage flag, redirects to /onboarding.

const GoogleG = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" style={{ flexShrink: 0 }}>
    <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84c-.21 1.13-.84 2.08-1.78 2.72v2.26h2.88c1.69-1.55 2.66-3.84 2.66-6.62z"/>
    <path fill="#34A853" d="M9 18c2.43 0 4.46-.81 5.95-2.18l-2.88-2.26c-.8.54-1.83.86-3.07.86-2.36 0-4.36-1.6-5.07-3.74H.95v2.34A9 9 0 0 0 9 18z"/>
    <path fill="#FBBC05" d="M3.93 10.68A5.4 5.4 0 0 1 3.64 9c0-.59.1-1.16.29-1.68V4.96H.95A9 9 0 0 0 0 9c0 1.45.35 2.83.95 4.04l2.98-2.36z"/>
    <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .95 4.96l2.98 2.36C4.64 5.18 6.64 3.58 9 3.58z"/>
  </svg>
);

const ConnectPage = () => {
  const { navigate } = useRoute();
  const [showModal, setShowModal] = React.useState(false);
  const [state, setState] = React.useState("idle"); // idle | connecting
  const [form, setForm] = React.useState({
    email: "",
    password: "",
    name: "",
  });

  const onContinue = () => {
    if (state === "connecting") return;
    setShowModal(true);
  };

  const onSubmit = (e) => {
    if (e) e.preventDefault();
    if (state === "connecting") return;
    if (!form.email.trim() || !form.name.trim()) return;
    setState("connecting");
    setTimeout(() => {
      setConnected({ email: form.email.trim(), name: form.name.trim() });
      navigate("/onboarding");
    }, 1500);
  };

  return (
    <div style={{
      width: "100vw", minHeight: "100vh",
      background: "var(--white-pure)",
      position: "relative", overflow: "hidden",
      display: "flex", flexDirection: "column",
    }}>
      {/* Ambient red wash bottom-right — the brand promise: red is there but contained */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "linear-gradient(135deg, transparent 55%, rgba(230,57,70,0.07) 100%)",
      }}/>

      {/* Wordmark top-left — matches the app TopBar geometry exactly. */}
      <a href="/landing" data-link style={{
        height: 64, padding: "0 32px",
        display: "flex", alignItems: "center", gap: 11,
        textDecoration: "none", color: "inherit",
        position: "relative", alignSelf: "flex-start",
      }}>
        <span style={{
          width: 12, height: 12, borderRadius: 999, background: "var(--red-core)",
          boxShadow: "0 0 0 5px rgba(230,57,70,0.18)",
        }}/>
        <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>RedGone</span>
      </a>

      {/* Center card */}
      <div style={{
        flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
        padding: 32, position: "relative",
      }}>
        <div className="pillow hero float-in" style={{
          padding: "48px 56px 40px",
          maxWidth: 520, width: "100%",
          display: "flex", flexDirection: "column", alignItems: "center",
          textAlign: "center",
        }}>
          <span style={{ animation: "rg-float-soft 2.6s ease-in-out infinite", display: "inline-flex" }}>
            <AngelRobot size={140} view="side"/>
          </span>
          <div className="micro" style={{ marginTop: 4 }}>Welcome</div>
          <div className="h1" style={{ marginTop: 8, maxWidth: 380 }}>
            The compliance layer for your inbox.
          </div>
          <div className="body" style={{
            color: "var(--midnight-soft)", maxWidth: 380, marginTop: 12,
          }}>
            Connect your Gmail. We'll scan your last 30 days, score every send,
            and triage what's coming in.
          </div>

          <button
            onClick={onContinue}
            disabled={state === "connecting"}
            className="neu-btn neu-btn-primary"
            style={{
              marginTop: 32, padding: "16px 26px", fontSize: 14,
              display: "flex", alignItems: "center", gap: 12,
              minWidth: 300, justifyContent: "center",
              opacity: state === "connecting" ? 0.85 : 1,
              cursor: state === "connecting" ? "default" : "pointer",
            }}
          >
            <GoogleG/>
            <span>Continue with Google</span>
            <span style={{ opacity: 0.7 }}>→</span>
          </button>

          <div className="small" style={{
            color: "var(--midnight-soft)", marginTop: 16, fontSize: 12,
          }}>
            Read-only access. We never store your emails.
          </div>

          <div style={{
            display: "flex", alignItems: "center", gap: 8, marginTop: 24,
            paddingTop: 20, borderTop: "1px solid var(--gray-whisper)", width: "100%",
            justifyContent: "center",
          }}>
            <a href="/dashboard" data-link className="small" style={{
              color: "var(--midnight-soft)", textDecoration: "none",
              fontSize: 12,
            }}>Skip — explore with demo data →</a>
          </div>
        </div>
      </div>

      {/* Bottom-right trust line */}
      <div className="mono" style={{
        position: "absolute", right: 32, bottom: 24,
        fontSize: 11, color: "var(--midnight-soft)", letterSpacing: "0.06em",
      }}>
        FCA · SEC · INTERNAL POLICY READY
      </div>

      {showModal && (
        <SignInModal
          form={form} setForm={setForm}
          state={state} onSubmit={onSubmit}
          onClose={() => { if (state !== "connecting") setShowModal(false); }}
        />
      )}
    </div>
  );
};

const SignInModal = ({ form, setForm, state, onSubmit, onClose }) => {
  const inputRef = React.useRef(null);
  React.useEffect(() => { inputRef.current && inputRef.current.focus(); }, []);

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(10, 22, 40, 0.45)",
      backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24,
    }} onClick={onClose}>
      <form
        onSubmit={onSubmit}
        onClick={(e) => e.stopPropagation()}
        className="float-in"
        style={{
          width: "100%", maxWidth: 440,
          background: "#FFFFFF",
          borderRadius: 24,
          padding: "36px 36px 28px",
          boxShadow: "0 30px 80px rgba(10, 22, 40, 0.32), 0 4px 14px rgba(10,22,40,0.12)",
          display: "flex", flexDirection: "column", gap: 18,
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }}>
          <GoogleG/>
          <div style={{ fontSize: 22, fontWeight: 500, color: "var(--midnight)", letterSpacing: "-0.01em" }}>
            Sign in
          </div>
          <div className="small" style={{ color: "var(--midnight-soft)", textAlign: "center" }}>
            to continue to <span style={{ color: "var(--midnight)", fontWeight: 600 }}>RedGone</span>
          </div>
        </div>

        <ModalField
          ref={inputRef}
          label="Email"
          type="email"
          placeholder="you@gmail.com"
          value={form.email}
          onChange={(v) => setForm(f => ({ ...f, email: v }))}
          disabled={state === "connecting"}
          autoComplete="username"
        />
        <ModalField
          label="Password"
          type="password"
          placeholder="••••••••"
          value={form.password}
          onChange={(v) => setForm(f => ({ ...f, password: v }))}
          disabled={state === "connecting"}
          autoComplete="current-password"
        />
        <ModalField
          label="Display name"
          type="text"
          placeholder="Your full name"
          value={form.name}
          onChange={(v) => setForm(f => ({ ...f, name: v }))}
          disabled={state === "connecting"}
          autoComplete="name"
        />

        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 8 }}>
          <button
            type="button"
            onClick={onClose}
            disabled={state === "connecting"}
            style={{
              background: "none", border: "none",
              color: "#1A73E8", fontWeight: 600, fontSize: 13,
              cursor: state === "connecting" ? "default" : "pointer",
              padding: 0,
            }}
          >
            Cancel
          </button>
          <button
            type="submit"
            disabled={state === "connecting" || !form.email.trim() || !form.name.trim()}
            style={{
              background: state === "connecting" ? "#1A73E899" : "#1A73E8",
              color: "#FFFFFF",
              border: "none", borderRadius: 6,
              padding: "10px 22px", fontSize: 13, fontWeight: 600,
              cursor: state === "connecting" ? "default" : "pointer",
              display: "inline-flex", alignItems: "center", gap: 8,
              boxShadow: "0 1px 2px rgba(60,64,67,0.3), 0 1px 3px rgba(60,64,67,0.15)",
              opacity: (!form.email.trim() || !form.name.trim()) && state !== "connecting" ? 0.55 : 1,
            }}
          >
            {state === "connecting" ? (<><Spinner small/> <span>Signing in…</span></>) : <span>Sign in</span>}
          </button>
        </div>

        <div className="small" style={{
          color: "var(--midnight-soft)", fontSize: 11, textAlign: "center",
          marginTop: 4, paddingTop: 14, borderTop: "1px solid var(--gray-whisper)",
        }}>
          Demo only. RedGone never stores your credentials.
        </div>
      </form>
    </div>
  );
};

const ModalField = React.forwardRef(({ label, type, placeholder, value, onChange, disabled, autoComplete }, ref) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
    <span style={{ fontSize: 12, color: "var(--midnight-soft)", fontWeight: 500 }}>{label}</span>
    <input
      ref={ref}
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      autoComplete={autoComplete}
      style={{
        background: "#FFFFFF",
        border: "1px solid #DADCE0",
        borderRadius: 6,
        padding: "12px 14px",
        fontSize: 14, fontFamily: "inherit",
        color: "var(--midnight)",
        outline: "none",
        transition: "border-color 180ms",
      }}
      onFocus={(e) => { e.target.style.borderColor = "#1A73E8"; e.target.style.boxShadow = "0 0 0 1px #1A73E8"; }}
      onBlur={(e) => { e.target.style.borderColor = "#DADCE0"; e.target.style.boxShadow = "none"; }}
    />
  </label>
));

const Spinner = ({ small }) => (
  <span style={{
    width: small ? 12 : 14, height: small ? 12 : 14, borderRadius: 999,
    border: `2px solid rgba(255,255,255,0.25)`,
    borderTopColor: "#FFFFFF",
    animation: "rg-spin 700ms linear infinite",
    display: "inline-block",
  }}/>
);

window.ConnectPage = ConnectPage;