/* global React, ReactDOM, Icon, MutualLogo, WarnHex, Coin, Sidebar, Topbar, TabStrip, Holdings, HistoryTabs, ConversaoView, DepositarView, SacarView, ComprarView, VenderView, EnviarView, ReceberView, SettingsView, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor */
const { useState, useEffect, useRef } = React;

// Catches any render-time crash inside renderTab() so a bug in a single view
// doesn't blank the entire dashboard. The user can still navigate away.
class ViewErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(error) { return { error }; }
  componentDidCatch(error, info) {
    console.error("[ViewErrorBoundary]", error, info?.componentStack);
  }
  componentDidUpdate(prev) {
    // Reset on tab change so the user can recover by switching tabs.
    if (prev.tabKey !== this.props.tabKey && this.state.error) {
      this.setState({ error: null });
    }
  }
  render() {
    if (this.state.error) {
      return (
        <div className="card"><div className="card-pad">
          <h2 className="card-h2" style={{color: "var(--red)"}}>Esta aba quebrou</h2>
          <p className="card-sub">Detalhe técnico abaixo. Troque de aba pra continuar.</p>
          <pre style={{marginTop: 12, color: "var(--red-text)"}}>{String(this.state.error?.stack || this.state.error)}</pre>
          <button className="btn btn-ghost mt-12" style={{height: 36}} onClick={() => this.setState({ error: null })}>
            Tentar novamente
          </button>
        </div></div>
      );
    }
    return this.props.children;
  }
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "brandPalette": "Mutual Navy",
  "brandPrimary": "#232F63",
  "accentColor": "#FCB71B",
  "showHistory": true,
  "sidebarCollapsed": false
}/*EDITMODE-END*/;

const PALETTES = {
  "Mutual Navy":   { primary: "#232F63", primaryDark: "#1A2449", primary700: "#2A3878", accent: "#FCB71B" },
  "Deep Indigo":   { primary: "#312E81", primaryDark: "#1E1B4B", primary700: "#3730A3", accent: "#F59E0B" },
  "Forest Green":  { primary: "#14532D", primaryDark: "#0E3F22", primary700: "#166534", accent: "#FCB71B" },
  "Ocean Teal":    { primary: "#115E59", primaryDark: "#134E4A", primary700: "#0F766E", accent: "#FBBF24" },
  "Crimson":       { primary: "#7F1D1D", primaryDark: "#5C1313", primary700: "#991B1B", accent: "#FACC15" },
};

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeNav, setActiveNav] = useState("crypto");
  const [collapsed, setCollapsed] = useState(tweaks.sidebarCollapsed);
  const [tab, setTab] = useState("converter");
  const [toasts, setToasts] = useState([]);
  const [showWarnModal, setShowWarnModal] = useState(false);
  const [showSuccess, setShowSuccess] = useState(false);

  // Apply palette
  useEffect(() => {
    const p = PALETTES[tweaks.brandPalette] || PALETTES["Mutual Navy"];
    const root = document.documentElement;
    root.style.setProperty("--brand-800", p.primary);
    root.style.setProperty("--brand-900", p.primaryDark);
    root.style.setProperty("--brand-700", p.primary700);
    root.style.setProperty("--accent", p.accent);
  }, [tweaks.brandPalette]);

  useEffect(() => { setCollapsed(tweaks.sidebarCollapsed); }, [tweaks.sidebarCollapsed]);

  const showToast = (msg, kind = "info") => {
    const id = Math.random();
    setToasts(t => [...t, { id, msg, kind }]);
    setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 2400);
  };

  const sacarSubmitRef = useRef(null);
  const handleSacarConfirm = (submitFn) => {
    sacarSubmitRef.current = typeof submitFn === "function" ? submitFn : null;
    setShowWarnModal(true);
  };

  const renderTab = () => {
    switch (tab) {
      case "comprar": return <ComprarView onShowToast={showToast} />;
      case "vender": return <VenderView onShowToast={showToast} />;
      case "converter": return <ConversaoView onShowToast={showToast} />;
      case "depositar": return <DepositarView onShowToast={showToast} />;
      case "sacar": return <SacarView onShowToast={showToast} onConfirm={handleSacarConfirm} />;
      case "enviar": return <EnviarView onShowToast={showToast} />;
      case "receber": return <ReceberView onShowToast={showToast} />;
      case "configuracoes": return <SettingsView onShowToast={showToast} />;
      default: return null;
    }
  };

  return (
    <div className={`app ${collapsed ? "collapsed" : ""}`}>
      <Sidebar active={activeNav} onNav={setActiveNav} collapsed={collapsed} onToggle={() => setCollapsed(!collapsed)} />
      <main className="main">
        <Topbar />
        <div className="page">
          <div className="page-head">
            <h1 className="page-title">Cripto</h1>
            <p className="page-sub">Compre, venda e converta criptomoedas com segurança</p>
          </div>
          <TabStrip active={tab} onChange={setTab} />
          <ViewErrorBoundary tabKey={tab}>
            {renderTab()}
          </ViewErrorBoundary>
          {(tab === "converter" || tab === "depositar" || tab === "sacar" || tab === "enviar" || tab === "receber") && (
            <div className="mt-24">
              <div style={{fontSize: 14, fontWeight: 700, color: "var(--ink-700)", marginBottom: 12}}>Saldo nas Moedas</div>
              <Holdings />
            </div>
          )}
          {tweaks.showHistory && tab !== "configuracoes" && <HistoryTabs />}
        </div>
      </main>

      {/* Floating bot */}
      <div className="bot" title="Assistente"><Icon.Bot /></div>

      {/* Toast container */}
      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className="toast">
            {t.kind === "check" ? <Icon.Check size={16} /> : <Icon.Info size={16} />}
            <span>{t.msg}</span>
          </div>
        ))}
      </div>

      {/* Orientações importantes modal */}
      {showWarnModal && (
        <div className="modal-overlay" onClick={() => setShowWarnModal(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <h3>Orientações importantes</h3>
              <button onClick={() => setShowWarnModal(false)}><Icon.Close /></button>
            </div>
            <div className="modal-body">
              <p style={{color: "var(--ink-600)", fontSize: 13.5, marginBottom: 18}}>Leia para evitar problemas com suas transferências.</p>
              <div className="warning-hex"><WarnHex /></div>
              <p>Para garantir a segurança da sua transferência, confira cuidadosamente o endereço e a rede de envio. Lembre-se de que envios para endereços ou redes erradas podem resultar em perda permanente do seu saldo.</p>
              <p className="strong" style={{marginTop: 18}}>Ao continuar você declara que leu e está ciente dos cuidados necessários ao realizar uma transferência.</p>
              <button className="btn btn-primary btn-block mt-24" onClick={async () => {
                setShowWarnModal(false);
                if (sacarSubmitRef.current) {
                  try { await sacarSubmitRef.current(); } catch (_) { /* surfaced via toast */ }
                }
                setShowSuccess(true);
              }}>Continuar</button>
            </div>
          </div>
        </div>
      )}

      {/* Success modal */}
      {showSuccess && (
        <div className="modal-overlay" onClick={() => setShowSuccess(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-head" style={{background: "var(--green-text)"}}>
              <h3>Saque solicitado</h3>
              <button onClick={() => setShowSuccess(false)}><Icon.Close /></button>
            </div>
            <div className="modal-body">
              <div style={{width: 64, height: 64, borderRadius: "50%", background: "var(--green-bg)", color: "var(--green-text)", display: "grid", placeItems: "center", margin: "8px auto 18px"}}>
                <Icon.Check size={32} />
              </div>
              <p className="strong" style={{fontSize: 16, marginBottom: 8}}>Sua ordem foi enviada com sucesso</p>
              <p>O processamento on-chain pode levar alguns minutos. Você pode acompanhar o status na aba <b>Saques</b> do histórico.</p>
              <button className="btn btn-primary btn-block mt-20" onClick={() => setShowSuccess(false)}>Entendi</button>
            </div>
          </div>
        </div>
      )}

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Marca">
          <TweakRadio
            label="Paleta"
            value={tweaks.brandPalette}
            options={Object.keys(PALETTES)}
            onChange={v => setTweak("brandPalette", v)}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle label="Sidebar recolhida" value={tweaks.sidebarCollapsed} onChange={v => setTweak("sidebarCollapsed", v)} />
          <TweakToggle label="Mostrar histórico" value={tweaks.showHistory} onChange={v => setTweak("showHistory", v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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