const _ISO = {"Afghanistan":"AF","Albania":"AL","Algeria":"DZ","Angola":"AO","Argentina":"AR","Armenia":"AM","Australia":"AU","Austria":"AT","Azerbaijan":"AZ","Bangladesh":"BD","Belarus":"BY","Belgium":"BE","Bolivia":"BO","Bosnia and Herzegovina":"BA","Botswana":"BW","Brazil":"BR","Bulgaria":"BG","Cambodia":"KH","Cameroon":"CM","Canada":"CA","Chile":"CL","China":"CN","Colombia":"CO","Costa Rica":"CR","Croatia":"HR","Cuba":"CU","Cyprus":"CY","Czech Republic":"CZ","Czechia":"CZ","Denmark":"DK","Dominican Republic":"DO","Ecuador":"EC","Egypt":"EG","El Salvador":"SV","Estonia":"EE","Ethiopia":"ET","Finland":"FI","France":"FR","Georgia":"GE","Germany":"DE","Ghana":"GH","Greece":"GR","Guatemala":"GT","Haiti":"HT","Honduras":"HN","Hong Kong":"HK","Hungary":"HU","Iceland":"IS","India":"IN","Indonesia":"ID","Iran":"IR","Iraq":"IQ","Ireland":"IE","Israel":"IL","Italy":"IT","Jamaica":"JM","Japan":"JP","Jordan":"JO","Kazakhstan":"KZ","Kenya":"KE","Kosovo":"XK","Kuwait":"KW","Kyrgyzstan":"KG","Laos":"LA","Latvia":"LV","Lebanon":"LB","Lesotho":"LS","Libya":"LY","Liechtenstein":"LI","Lithuania":"LT","Luxembourg":"LU","Malaysia":"MY","Malta":"MT","Mexico":"MX","Moldova":"MD","Mongolia":"MN","Morocco":"MA","Mozambique":"MZ","Myanmar":"MM","Namibia":"NA","Nepal":"NP","Netherlands":"NL","New Zealand":"NZ","Nicaragua":"NI","Nigeria":"NG","North Macedonia":"MK","Norway":"NO","Oman":"OM","Pakistan":"PK","Panama":"PA","Paraguay":"PY","Peru":"PE","Philippines":"PH","Poland":"PL","Portugal":"PT","Qatar":"QA","Romania":"RO","Russia":"RU","Rwanda":"RW","Saudi Arabia":"SA","Senegal":"SN","Serbia":"RS","Singapore":"SG","Slovakia":"SK","Slovenia":"SI","Somalia":"SO","South Africa":"ZA","South Korea":"KR","Spain":"ES","Sri Lanka":"LK","Sudan":"SD","Sweden":"SE","Switzerland":"CH","Taiwan":"TW","Tajikistan":"TJ","Tanzania":"TZ","Thailand":"TH","Tunisia":"TN","Turkey":"TR","Turkmenistan":"TM","Uganda":"UG","Ukraine":"UA","United Arab Emirates":"AE","United Kingdom":"GB","United States":"US","United States of America":"US","Uruguay":"UY","Uzbekistan":"UZ","Venezuela":"VE","Vietnam":"VN","Yemen":"YE","Zambia":"ZM","Zimbabwe":"ZW"};
function _flag(name) {
  if (!name) return "🌍";
  const code = _ISO[name] || _ISO[name.replace(/\s*\(.*\)/, "").trim()];
  if (!code) return "🌍";
  return [...code].map(c => String.fromCodePoint(0x1F1E6 + c.charCodeAt(0) - 65)).join("");
}

// App — orchestrates the IAIGA petition site and the live sign flow.
function App() {
  const data = window.IAIGA_DATA;
  const [count, setCount] = React.useState(data.signatureCount);
  const [recent, setRecent] = React.useState([]);
  const [signOpen, setSignOpen] = React.useState(false);

  React.useEffect(() => {
    const sb = window._sb;
    if (!sb) return;

    const toSig = (r) => ({
      kind: r.kind,
      name: r.show_name !== false ? r.name : "Anonymous",
      role: r.role || "Citizen",
      country: r.country || "—",
      flag: _flag(r.country),
      url: r.kind === "org" ? (r.org || null) : null,
    });

    // Load initial verified signatures + count
    sb.from("signatures")
      .select("name, role, country, kind, show_name, created_at")
      .eq("verified", true)
      .order("created_at", { ascending: false })
      .limit(60)
      .then(({ data: rows }) => {
        if (rows && rows.length) setRecent(rows.map(toSig));
      });

    sb.from("signatures")
      .select("*", { count: "exact", head: true })
      .eq("verified", true)
      .then(({ count: n }) => {
        if (n) setCount(data.signatureCount + n);
      });

    // Realtime — fires when a signature is verified (verified flips true)
    const channel = sb
      .channel("verified-signatures")
      .on(
        "postgres_changes",
        { event: "UPDATE", schema: "public", table: "signatures" },
        (payload) => {
          if (payload.new.verified === true && payload.old && payload.old.verified === false) {
            setCount((c) => c + 1);
            setRecent((prev) => [...prev, toSig(payload.new)]);
          }
        }
      )
      .subscribe();

    return () => sb.removeChannel(channel);
  }, []);

  React.useEffect(() => {
    if (/sign=1|#sign/.test(window.location.search + window.location.hash)) setSignOpen(true);
  }, []);

  const openSign = () => setSignOpen(true);

  return (
    <div className="site">
      <Header count={count} onSign={openSign} />
      <main>
        <Hero data={data} count={count} onSign={openSign} />
        <Petition data={data} />
        <Precedent data={data} />
        <TheAsk data={data} />
        <Governance data={data} />
        <Signatories data={data} count={count} recent={recent} />
      </main>
      <Footer onSign={openSign} />
      <SignPanel data={data} count={count} open={signOpen} onClose={() => setSignOpen(false)} />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);