/* ============================================================
   ChadCoin — root app + account modal + mount
   ============================================================ */

/* ─── ACCOUNT MODAL ──────────────────────────────────────── */
function AccountModal({ wallet, address, solBalance, chdBalance, tbtcBalance, solPrice, btcPrice, onClose, onDisconnect }) {
  const [copied, setCopied] = useState(false);
  const copy = () => { navigator.clipboard?.writeText(address); setCopied(true); setTimeout(()=>setCopied(false),1400); };
  const chdUsd = btcPrice > 0 ? btcPrice / 1e8 : CHD_USD;
  return (
    <div className="overlay" onMouseDown={e => e.target === e.currentTarget && onClose()}>
      <div className="modal">
        <div className="modal-head">
          <div className="modal-title"><WalletTile w={wallet} size={24}/> {wallet.name}</div>
          <button className="modal-x" onClick={onClose}><Ic.x/></button>
        </div>
        <div className="modal-body">
          <button className="wallet-row" onClick={copy} style={{ marginBottom:16 }}>
            <span className="addr-dot"/>
            <span className="mono" style={{ fontSize:14 }}>{shortAddr(address)}</span>
            <span style={{ marginLeft:"auto", display:"flex", alignItems:"center", gap:7,
                           color: copied?"var(--success)":"var(--faint)", fontSize:13, fontWeight:600 }}>
              {copied ? <><Ic.check/> Copié</> : <><Ic.copy/> Copier</>}
            </span>
          </button>

          <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:12 }}>
            <div className="card" style={{ padding:"16px 18px" }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, color:"var(--faint)", fontSize:13 }}><SolMark size={18}/> SOL</div>
              <div className="mono" style={{ fontSize:21, fontWeight:600, marginTop:8 }}>{fmt(solBalance,3)}</div>
              <div style={{ color:"var(--faint)", fontSize:12.5, marginTop:3 }}>≈ {fmt(solBalance*solPrice)} $</div>
            </div>
            <div className="card" style={{ padding:"16px 18px" }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, color:"var(--faint)", fontSize:13 }}><ChdCoin size={18}/> CHD</div>
              <div className="mono" style={{ fontSize:21, fontWeight:600, marginTop:8 }}>{fmt(chdBalance,0)}</div>
              <div style={{ color:"var(--btc-deep)", fontSize:12.5, marginTop:3 }}>{fmt(chdBalance,0)} sats · ≈ {fmt(chdBalance*chdUsd)} $</div>
            </div>
          </div>

          {tbtcBalance > 0 && (
            <div className="card" style={{ padding:"14px 18px", marginTop:12, display:"flex", alignItems:"center", justifyContent:"space-between" }}>
              <div style={{ display:"flex", alignItems:"center", gap:8, color:"var(--faint)", fontSize:13 }}><BtcCoin size={18}/> tBTC</div>
              <div>
                <span className="mono" style={{ fontWeight:600 }}>{tbtcBalance.toFixed(8)}</span>
                <span style={{ color:"var(--faint)", fontSize:12.5, marginLeft:8 }}>≈ {fmt(tbtcBalance*btcPrice)} $</span>
              </div>
            </div>
          )}

          <a className="btn btn-ghost btn-block"
            href={`https://solscan.io/account/${address}`}
            target="_blank" rel="noopener"
            style={{ margin:"16px 0 9px" }}>
            Voir le wallet sur Solscan <Ic.ext/>
          </a>
          <button className="btn btn-block" onClick={onDisconnect}
            style={{ color:"#E5484D", border:"1px solid var(--line-2)", background:"rgba(229,72,77,0.07)" }}>
            Déconnecter
          </button>
        </div>
      </div>
    </div>
  );
}

/* ─── TOAST ──────────────────────────────────────────────── */
function Toast({ children }) {
  return <div className="toast"><span className="addr-dot"/> {children}</div>;
}

/* ─── APP ────────────────────────────────────────────────── */
function App() {
  const [wallet, setWallet]       = useState(null);
  const [address, setAddress]     = useState("");
  const [solBalance, setSol]      = useState(0);
  const [chdBalance, setChd]      = useState(0);
  const [tbtcBalance, setTbtc]    = useState(0);
  const [prices, setPrices]         = useState({ sol: SOL_USD, btc: BTC_USD });
  const [chainStats, setChainStats] = useState({ supply: null, vault: null, vaultSats: null });

  const [connectOpen, setConnectOpen] = useState(false);
  const [accountOpen, setAccountOpen] = useState(false);
  const [pendingTx, setPendingTx]     = useState(null);   // { type:"swap"|"burn", … }
  const [confirmLoad, setConfirmLoad] = useState(false);
  const [swapLoading, setSwapLoading] = useState(false);
  const [successTx, setSuccessTx]     = useState(null);
  const [toast, setToast]             = useState(null);

  useReveal();

  /* Auto-reconnect au chargement de la page */
  useEffect(() => {
    const tryAutoConnect = async () => {
      // 1. Essayer Phantom (onlyIfTrusted — silencieux si non connecté)
      try {
        const p = window.phantom?.solana || (window.solana?.isPhantom ? window.solana : null);
        if (p?.isPhantom) {
          const r = await p.connect({ onlyIfTrusted: true });
          const pk = r.publicKey.toString();
          const w = WALLETS.find(x => x.id === "phantom");
          if (w && pk) {
            setWallet({ ...w, signTransaction: tx => p.signTransaction(tx) });
            setAddress(pk);
            try {
              const [sol, chd, tbtc] = await Promise.all([
                fetchSolBalance(pk), fetchChdBalance(pk), fetchTbtcBalance(pk)
              ]);
              setSol(sol); setChd(chd); setTbtc(tbtc);
            } catch(e) {}
            return;
          }
        }
      } catch(e) { /* onlyIfTrusted rejette si non autorisé — normal */ }

      // 2. Essayer Solflare
      try {
        const p = window.solflare;
        if (p?.isSolflare) {
          await p.connect();
          if (p.publicKey) {
            const pk = p.publicKey.toString();
            const w = WALLETS.find(x => x.id === "solflare");
            if (w && pk) {
              setWallet({ ...w, signTransaction: tx => p.signTransaction(tx) });
              setAddress(pk);
              try {
                const [sol, chd, tbtc] = await Promise.all([
                  fetchSolBalance(pk), fetchChdBalance(pk), fetchTbtcBalance(pk)
                ]);
                setSol(sol); setChd(chd); setTbtc(tbtc);
              } catch(e) {}
            }
          }
        }
      } catch(e) { /* Solflare non connecté — normal */ }
    };

    // 600ms pour laisser les extensions wallet s'injecter dans la page
    const t = setTimeout(tryAutoConnect, 600);
    return () => clearTimeout(t);
  }, []);

  /* Stats on-chain toutes les 60s */
  useEffect(() => {
    const load = async () => {
      try { setChainStats(await fetchChainStats()); } catch(e) {}
    };
    load();
    const i = setInterval(load, 60000);
    return () => clearInterval(i);
  }, []);

  /* Prix CoinGecko toutes les 15s */
  useEffect(() => {
    const fetchPrices = async () => {
      try {
        const r = await fetch("https://api.coingecko.com/api/v3/simple/price?ids=solana,bitcoin&vs_currencies=usd");
        if (!r.ok) return;
        const d = await r.json();
        setPrices({ sol: d.solana?.usd || SOL_USD, btc: d.bitcoin?.usd || BTC_USD });
      } catch(e) {}
    };
    fetchPrices();
    const i = setInterval(fetchPrices, 15000);
    return () => clearInterval(i);
  }, []);

  const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2800); };

  const refreshBalances = async (addr) => {
    try {
      const [sol, chd, tbtc] = await Promise.all([
        fetchSolBalance(addr),
        fetchChdBalance(addr),
        fetchTbtcBalance(addr),
      ]);
      setSol(sol); setChd(chd); setTbtc(tbtc);
    } catch(e) {}
  };

  const onConnected = async (w, publicKey) => {
    setWallet(w);
    setAddress(publicKey);
    setConnectOpen(false);
    flash(`${w.name} connecté`);
    await refreshBalances(publicKey);
  };

  const onDisconnect = () => {
    try {
      if (wallet?.id === "phantom") window.phantom?.solana?.disconnect?.();
      if (wallet?.id === "solflare") window.solflare?.disconnect?.();
    } catch(e) {}
    setWallet(null); setAddress(""); setSol(0); setChd(0); setTbtc(0);
    setAccountOpen(false);
    flash("Wallet déconnecté");
  };

  /* Achat : récupère devis Jupiter puis ouvre confirm */
  const onSwapRequest = async ({ sol }) => {
    setSwapLoading(true);
    try {
      const quote = await jupiterQuote(sol);
      const chd = Number(quote.outAmount); // CHD = 0 décimales
      setPendingTx({ type:"swap", sol, chd, btcPrice: prices.btc, quote });
    } catch(e) {
      flash("Erreur : " + (e.message || "devis Jupiter indisponible"));
    } finally {
      setSwapLoading(false);
    }
  };

  /* Burn : pas de devis nécessaire, ouvre directement confirm */
  const onBurnRequest = ({ chd }) => {
    setPendingTx({ type:"burn", chd, btcPrice: prices.btc });
  };

  /* Confirmation commune (swap ou burn) */
  const onConfirm = async () => {
    setConfirmLoad(true);
    try {
      let sig;
      if (pendingTx.type === "swap") {
        sig = await jupiterSwap(pendingTx.quote, address, wallet.signTransaction);
      } else {
        sig = await burnChd(pendingTx.chd, address, wallet.signTransaction);
      }
      const tx = { ...pendingTx, sig };
      setPendingTx(null);
      setSuccessTx(tx);
      /* Refresh balances +3s et +9s */
      setTimeout(() => refreshBalances(address), 3000);
      setTimeout(() => refreshBalances(address), 9000);
    } catch(e) {
      const msg = (e.code === 4001 || e.message?.toLowerCase().includes("rejected"))
        ? "Transaction annulée."
        : "Transaction échouée : " + (e.message || "erreur inconnue");
      flash(msg);
      setPendingTx(null);
    } finally {
      setConfirmLoad(false);
    }
  };

  const connected = !!wallet;

  return (
    <>
      <Nav connected={connected} wallet={wallet} address={address}
        onConnect={() => setConnectOpen(true)} onAccount={() => setAccountOpen(true)}/>

      <Hero connected={connected}
        solBalance={solBalance} chdBalance={chdBalance}
        solPrice={prices.sol} btcPrice={prices.btc}
        swapLoading={swapLoading}
        onConnect={() => setConnectOpen(true)}
        onSwap={onSwapRequest}
        onBurn={onBurnRequest}/>

      <StatsStrip chainStats={chainStats}/>
      <Marquee/>
      <Steps/>
      <Features/>
      <Band connected={connected} onConnect={() => setConnectOpen(true)}/>
      <Tokenomics chainStats={chainStats} prices={prices}/>
      <Faq/>
      <Final/>
      <Footer/>

      {connectOpen && (
        <ConnectModal onClose={() => setConnectOpen(false)} onConnected={onConnected}/>
      )}
      {accountOpen && wallet && (
        <AccountModal
          wallet={wallet} address={address}
          solBalance={solBalance} chdBalance={chdBalance} tbtcBalance={tbtcBalance}
          solPrice={prices.sol} btcPrice={prices.btc}
          onClose={() => setAccountOpen(false)} onDisconnect={onDisconnect}/>
      )}
      {pendingTx && (
        <ConfirmModal tx={pendingTx} wallet={wallet} loading={confirmLoad}
          onClose={() => !confirmLoad && setPendingTx(null)} onConfirm={onConfirm}/>
      )}
      {successTx && <SuccessModal tx={successTx} onClose={() => setSuccessTx(null)}/>}
      {toast && <Toast>{toast}</Toast>}
    </>
  );
}

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