// cloud/auth.jsx — Hook session + écran de login

const { useState: useStateAuth, useEffect: useEffectAuth } = React;

// ═══════════════════════════════════════════════════════════════════
// useAuth — hook React qui suit l'état de la session Supabase
// Retourne { session, user, profile, loading, signIn, signOut }
// ═══════════════════════════════════════════════════════════════════
function useAuth() {
  const [session, setSession] = useStateAuth(null);
  const [profile, setProfile] = useStateAuth(null);
  const [loading, setLoading] = useStateAuth(true);

  useEffectAuth(() => {
    const sb = window.RAYCAST_SUPABASE;
    if (!sb) { setLoading(false); return; }

    let active = true;

    // 1) Session initiale
    sb.auth.getSession().then(({ data }) => {
      if (!active) return;
      setSession(data.session || null);
      setLoading(false);
    });

    // 2) Écoute changements
    const { data: sub } = sb.auth.onAuthStateChange((_event, sess) => {
      if (!active) return;
      setSession(sess || null);
    });

    return () => {
      active = false;
      sub?.subscription?.unsubscribe?.();
    };
  }, []);

  // Charger le profil quand la session change
  useEffectAuth(() => {
    const sb = window.RAYCAST_SUPABASE;
    if (!sb || !session?.user) { setProfile(null); return; }

    let active = true;
    sb.from("profiles")
      .select("id,name,role,initials")
      .eq("id", session.user.id)
      .maybeSingle()
      .then(({ data, error }) => {
        if (!active) return;
        if (error) {
          console.warn("[auth] profil introuvable", error);
          setProfile(null);
        } else {
          setProfile(data);
        }
      });

    return () => { active = false; };
  }, [session?.user?.id]);

  const signIn = async (email, password) => {
    const sb = window.RAYCAST_SUPABASE;
    if (!sb) throw new Error("Supabase non configuré");
    const { data, error } = await sb.auth.signInWithPassword({ email, password });
    if (error) throw error;
    return data;
  };

  const signOut = async () => {
    const sb = window.RAYCAST_SUPABASE;
    if (!sb) return;
    await sb.auth.signOut();
    setProfile(null);
    setSession(null);
  };

  return {
    session,
    user: session?.user || null,
    profile,
    isAdmin: profile?.role === "admin",
    loading,
    signIn,
    signOut
  };
}

// ═══════════════════════════════════════════════════════════════════
// LoginScreen — écran de connexion plein écran
// ═══════════════════════════════════════════════════════════════════
function LoginScreen({ onSignIn }) {
  const [email, setEmail] = useStateAuth("");
  const [password, setPassword] = useStateAuth("");
  const [busy, setBusy] = useStateAuth(false);
  const [err, setErr] = useStateAuth(null);
  const configured = !!window.RAYCAST_SUPABASE;

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setBusy(true);
    setErr(null);
    try {
      await onSignIn(email.trim(), password);
    } catch (ex) {
      const msg = ex?.message || String(ex);
      setErr(
        /invalid login/i.test(msg) ? "Courriel ou mot de passe invalide." :
        /email not confirmed/i.test(msg) ? "Courriel non confirmé. Contacte l'admin." :
        msg
      );
      setBusy(false);
    }
  };

  return (
    <div style={loginCss.root}>
      <div style={loginCss.card}>
        <div style={loginCss.brand}>
          <div style={loginCss.logoMark}>R</div>
          <div>
            <div style={loginCss.brandName}>RAYCAST</div>
            <div style={loginCss.brandSub}>Raycom Électrique · Soumissions</div>
          </div>
        </div>

        {!configured && (
          <div style={loginCss.warn}>
            <b>Configuration requise.</b><br/>
            Le fichier <code>cloud/supabase-config.js</code> contient encore
            les valeurs par défaut. Suis les étapes du fichier
            <code> cloud/SUPABASE-SETUP.sql</code>, puis rafraîchis cette page.
          </div>
        )}

        <form onSubmit={submit} style={loginCss.form}>
          <label style={loginCss.label}>
            <span style={loginCss.lblText}>Courriel</span>
            <input
              type="email"
              required
              autoComplete="username"
              autoFocus
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="prenom@raycomelectrique.com"
              style={loginCss.input}
              disabled={!configured}
            />
          </label>
          <label style={loginCss.label}>
            <span style={loginCss.lblText}>Mot de passe</span>
            <input
              type="password"
              required
              autoComplete="current-password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="••••••••"
              style={loginCss.input}
              disabled={!configured}
            />
          </label>

          {err && <div style={loginCss.err}>{err}</div>}

          <button type="submit" style={loginCss.btn} disabled={busy || !configured}>
            {busy ? "Connexion…" : "Se connecter"}
          </button>
        </form>

        <div style={loginCss.foot}>
          <em>« Prenez le contrôle de votre énergie. »</em><br/>
          Comptes créés par l'administrateur · RBQ 5590-9402-01
        </div>
      </div>
    </div>
  );
}

const loginCss = {
  root: {
    position: "fixed", inset: 0,
    background: "radial-gradient(ellipse at top, #0d2540 0%, #050a14 60%)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "'Inter', system-ui, sans-serif",
    zIndex: 9999, padding: 24
  },
  card: {
    width: "100%", maxWidth: 420,
    background: "#fff", borderRadius: 14,
    boxShadow: "0 30px 80px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)",
    padding: 32,
    display: "flex", flexDirection: "column", gap: 22
  },
  brand: {
    display: "flex", alignItems: "center", gap: 12,
    paddingBottom: 18,
    borderBottom: "1px solid #e2e8f0"
  },
  logoMark: {
    width: 44, height: 44, borderRadius: 10,
    background: "linear-gradient(135deg, #1a6fc4 0%, #0d4a8a 100%)",
    color: "#fff", display: "flex", alignItems: "center", justifyContent: "center",
    fontSize: 22, fontWeight: 800, letterSpacing: "-0.02em"
  },
  brandName: { fontSize: 18, fontWeight: 800, letterSpacing: "-0.01em", color: "#0d2540" },
  brandSub:  { fontSize: 11, color: "#64748b", marginTop: 2 },
  form: { display: "flex", flexDirection: "column", gap: 14 },
  label: { display: "flex", flexDirection: "column", gap: 6 },
  lblText: { fontSize: 11, fontWeight: 600, color: "#334155", textTransform: "uppercase", letterSpacing: "0.04em" },
  input: {
    padding: "10px 12px", fontSize: 14,
    border: "1px solid #cbd5e1", borderRadius: 8,
    fontFamily: "inherit", outline: "none",
    transition: "border-color 0.15s, box-shadow 0.15s"
  },
  err: {
    background: "#fee2e2", color: "#991b1b",
    padding: "8px 12px", borderRadius: 8,
    fontSize: 12.5, lineHeight: 1.4
  },
  warn: {
    background: "#fef3c7", color: "#78350f",
    padding: "10px 14px", borderRadius: 8,
    fontSize: 12, lineHeight: 1.45
  },
  btn: {
    marginTop: 4, padding: "11px 16px",
    background: "linear-gradient(135deg, #1a6fc4 0%, #0d4a8a 100%)",
    color: "#fff", border: "none", borderRadius: 8,
    fontSize: 14, fontWeight: 600, cursor: "pointer",
    letterSpacing: "0.01em"
  },
  foot: {
    fontSize: 10.5, color: "#94a3b8", textAlign: "center", lineHeight: 1.5,
    borderTop: "1px solid #e2e8f0", paddingTop: 14
  }
};

Object.assign(window, { useAuth, LoginScreen });