/** @jsxRuntime classic */
// Forzamos el runtime clasico de JSX (React.createElement global). Sin esto, las
// versiones nuevas de Babel inyectan `import ... from "react/jsx-runtime"`, que
// rompe el <script> clasico ("Cannot use import statement outside a module").
const { useState, useEffect } = React;
const auth = firebase.auth();
const db = firebase.firestore();
const CFG = window.APP_CONFIG;

// --- Helpers -----------------------------------------------------------------
function emailAllowed(email) {
  return !!email && email.toLowerCase().endsWith("@" + CFG.allowedDomain);
}

async function pushToOdoo(referral) {
  // Empuja el codigo al puente Apps Script -> Odoo. Fire-and-forget (no-cors):
  // Firestore es la fuente de verdad; este push es el espejo para validar en Odoo.
  // Si el puente aun no esta configurado, no marcamos como enviado.
  if (!/^https?:\/\//.test(CFG.bridgeUrl || "")) return false;
  try {
    await fetch(CFG.bridgeUrl, {
      method: "POST",
      mode: "no-cors",
      headers: { "Content-Type": "text/plain;charset=utf-8" },
      body: JSON.stringify({ secret: CFG.bridgeSecret, referral }),
    });
    return true;
  } catch (e) {
    return false;
  }
}

// --- Login -------------------------------------------------------------------
function Login({ error }) {
  const signIn = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters({ hd: CFG.allowedDomain });
    auth.signInWithPopup(provider).catch((e) => alert(e.message));
  };
  return (
    <div className="center">
      <div className="card" style={{ maxWidth: 380, textAlign: "center" }}>
        <h2>Presentame</h2>
        <p className="muted">Sistema de referidos · Alianza Educativa</p>
        {error && <div className="msg msg-err">{error}</div>}
        <button className="btn btn-google" onClick={signIn}>
          Iniciar sesion con Google
        </button>
        <p className="muted" style={{ marginTop: 16 }}>
          Solo cuentas @{CFG.allowedDomain}
        </p>
      </div>
    </div>
  );
}

// --- Formulario --------------------------------------------------------------
function ReferralForm({ user, onCreated }) {
  const empty = {
    has_disability: false,
    referrer_cedula: "",
    referrer_colegio: CFG.colegios[0],
    candidate_name: "",
    candidate_cedula: "",
    cargo: CFG.cargos[0],
    area: CFG.areas[0],
    candidate_email: "",
    colegio: CFG.colegios[0],
  };
  const [f, setF] = useState(empty);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });

  const validate = () => {
    if (!f.candidate_name.trim()) return "Escribe el nombre del candidato.";
    if (!/^\d{5,12}$/.test(f.referrer_cedula)) return "Tu cedula debe ser numerica (5-12 digitos).";
    if (!/^\d{5,12}$/.test(f.candidate_cedula)) return "La cedula del candidato debe ser numerica.";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.candidate_email)) return "Correo del candidato invalido.";
    return "";
  };

  const submit = async (e) => {
    e.preventDefault();
    const v = validate();
    if (v) return setErr(v);
    setErr("");
    setBusy(true);
    try {
      let code = window.Codes.generate(f.has_disability);
      // Reintenta si por casualidad el codigo ya existe (muy improbable).
      for (let i = 0; i < 3; i++) {
        const exists = (await db.collection("referidos").doc(code).get()).exists;
        if (!exists) break;
        code = window.Codes.generate(f.has_disability);
      }

      const referral = {
        code,
        ...f,
        cargo: f.has_disability ? "" : f.cargo,
        area: f.has_disability ? f.area : "",
        referrer_email: user.email,
        referrer_name: user.displayName || "",
        status: "generado",
        odoo_synced: false,
        created_at: firebase.firestore.FieldValue.serverTimestamp(),
      };

      await db.collection("referidos").doc(code).set(referral);
      const ok = await pushToOdoo(referral);
      if (ok) await db.collection("referidos").doc(code).update({ odoo_synced: true });
      onCreated(code);
      setF(empty);
    } catch (ex) {
      setErr("No se pudo guardar: " + (ex.message || ex));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="card">
      <h2>Generar codigo de referido</h2>
      <p className="muted" style={{ marginTop: -6 }}>
        Registrando como referente: <b>{user.email}</b>
      </p>
      {err && <div className="msg msg-err">{err}</div>}
      <form onSubmit={submit}>
        <label>¿El referido tiene alguna discapacidad?</label>
        <select
          value={f.has_disability ? "si" : "no"}
          onChange={(e) => setF({ ...f, has_disability: e.target.value === "si" })}
        >
          <option value="no">No</option>
          <option value="si">Si</option>
        </select>

        <div className="row">
          <div>
            <label>Tu numero de cedula</label>
            <input value={f.referrer_cedula} onChange={set("referrer_cedula")} inputMode="numeric" />
          </div>
          <div>
            <label>Colegio en el que trabajas</label>
            <select value={f.referrer_colegio} onChange={set("referrer_colegio")}>
              {CFG.colegios.map((c) => <option key={c}>{c}</option>)}
            </select>
          </div>
        </div>

        <label>Nombre del candidato</label>
        <input value={f.candidate_name} onChange={set("candidate_name")} placeholder="Nombres y apellidos" />

        <div className="row">
          <div>
            <label>Cedula del candidato</label>
            <input value={f.candidate_cedula} onChange={set("candidate_cedula")} inputMode="numeric" />
          </div>
          <div>
            <label>Correo del candidato</label>
            <input value={f.candidate_email} onChange={set("candidate_email")} type="email" />
          </div>
        </div>

        <div className="row">
          <div>
            {f.has_disability ? (
              <React.Fragment>
                <label>Area</label>
                <select value={f.area} onChange={set("area")}>
                  {CFG.areas.map((c) => <option key={c}>{c}</option>)}
                </select>
              </React.Fragment>
            ) : (
              <React.Fragment>
                <label>Cargo al que se postula</label>
                <select value={f.cargo} onChange={set("cargo")}>
                  {CFG.cargos.map((c) => <option key={c}>{c}</option>)}
                </select>
              </React.Fragment>
            )}
          </div>
          <div>
            <label>Colegio al que se postula</label>
            <select value={f.colegio} onChange={set("colegio")}>
              {CFG.colegios.map((c) => <option key={c}>{c}</option>)}
            </select>
          </div>
        </div>

        <button className="btn btn-primary" disabled={busy} style={{ marginTop: 18 }}>
          {busy ? "Generando..." : "Generar codigo"}
        </button>
      </form>
    </div>
  );
}

// --- Resultado (codigo recien generado) --------------------------------------
function Result({ code, onClose }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    navigator.clipboard.writeText(code).then(() => setCopied(true));
  };
  return (
    <div className="card">
      <h2>Codigo generado</h2>
      <p className="muted">Entregalo al candidato. Debe escribirlo al aplicar en Odoo.</p>
      <div className="code-box">{code}</div>
      <button className="btn btn-primary" onClick={copy}>
        {copied ? "Copiado" : "Copiar codigo"}
      </button>{" "}
      <button className="btn btn-ghost" style={{ color: "#444", borderColor: "#ccc" }} onClick={onClose}>
        Generar otro
      </button>
    </div>
  );
}

// --- Lista de mis referidos --------------------------------------------------
function MyReferrals({ user, refreshKey }) {
  const [rows, setRows] = useState(null);
  useEffect(() => {
    db.collection("referidos")
      .where("referrer_email", "==", user.email)
      .get()
      .then((snap) => {
        const list = snap.docs.map((d) => d.data());
        list.sort((a, b) => (b.created_at?.seconds || 0) - (a.created_at?.seconds || 0));
        setRows(list);
      })
      .catch(() => setRows([]));
  }, [user.email, refreshKey]);

  if (rows === null) return <div className="card muted">Cargando...</div>;
  if (rows.length === 0) return <div className="card muted">Aun no has generado codigos.</div>;

  return (
    <div className="card">
      <h2>Mis referidos ({rows.length})</h2>
      <table>
        <thead>
          <tr><th>Codigo</th><th>Candidato</th><th>Cargo / Area</th><th>Codigo enviado</th></tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.code}>
              <td><b>{r.code}</b></td>
              <td>{r.candidate_name || r.candidate_email}</td>
              <td>{r.cargo || r.area}</td>
              <td>
                <span className={"badge " + (r.odoo_synced ? "badge-ok" : "badge-wait")}>
                  {r.odoo_synced ? "Enviado" : "Pendiente"}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// --- App ---------------------------------------------------------------------
function App() {
  const [user, setUser] = useState(undefined); // undefined = cargando
  const [authError, setAuthError] = useState("");
  const [lastCode, setLastCode] = useState(null);
  const [refreshKey, setRefreshKey] = useState(0);

  useEffect(() => {
    return auth.onAuthStateChanged((u) => {
      if (!u) return setUser(null);
      if (!emailAllowed(u.email)) {
        setAuthError("Tu cuenta no pertenece a @" + CFG.allowedDomain + ".");
        auth.signOut();
        return setUser(null);
      }
      setAuthError("");
      setUser(u);
    });
  }, []);

  if (user === undefined) return <div className="center muted">Cargando...</div>;
  if (!user) return <Login error={authError} />;

  return (
    <div>
      <div className="topbar">
        <h1>Presentame · Referidos</h1>
        <div className="user">
          <span>{user.email}</span>
          <button className="btn btn-ghost" onClick={() => auth.signOut()}>Salir</button>
        </div>
      </div>
      <div className="container">
        {lastCode ? (
          <Result code={lastCode} onClose={() => { setLastCode(null); setRefreshKey((k) => k + 1); }} />
        ) : (
          <ReferralForm user={user} onCreated={(code) => { setLastCode(code); setRefreshKey((k) => k + 1); }} />
        )}
        <MyReferrals user={user} refreshKey={refreshKey} />

        <p className="muted" style={{ textAlign: "center", marginTop: 8, lineHeight: 1.6 }}>
          Comparte este codigo con la persona que postulas para que lo incluya al
          momento de llenar el formulario de postulacion. Recuerda que no todas las
          postulaciones hacen parte de la iniciativa Presentame.{" "}
          <a href={CFG.infoUrl} target="_blank" rel="noopener noreferrer">Mas informacion</a>.
        </p>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);