/* global React, Icon, MutualLogo, API */
const { useState, useEffect: useEffectShell } = React;

const Coin = ({ ticker, size = "md" }) => {
  const COIN_CLASS = { BRL: "brl", USDT: "usdt", USDC: "usdc", BTC: "btc", ETH: "eth" };
  const COIN_LABEL = { BRL: "R$", USDT: "₮", USDC: "$", BTC: "₿", ETH: "Ξ" };
  const t = String(ticker || "").toUpperCase();
  // Fallback for unknown tickers (SOL, MATIC, etc.): use the brand-tinted class + first letter.
  return (
    <div className={`coin coin-${size} coin-${COIN_CLASS[t] || "brl"}`}>
      {COIN_LABEL[t] || t.charAt(0) || "•"}
    </div>
  );
};

const Sidebar = ({ active, onNav, collapsed, onToggle }) => {
  const items = [
    { id: "dashboard", label: "Dashboard", icon: "Dashboard" },
    { id: "extrato", label: "Extrato", icon: "Statement", badge: "2", chev: true },
    { id: "pix", label: "PIX", icon: "Pix", badge: "9" },
    { id: "transactions", label: "Transações", icon: "Transactions", badge: "1.2K" },
    { id: "reports", label: "Relatórios", icon: "Reports" },
    { id: "med", label: "Gestão MED", icon: "Shield", badge: "2" },
    { id: "crypto", label: "Cripto", icon: "Crypto" },
    { id: "settings", label: "Configurações", icon: "Settings" },
  ];

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <div className="brand">
          <div className="brand-mark"><MutualLogo /></div>
          <div className="brand-text"><b>Mutual</b><span className="pay"> Pay</span></div>
        </div>
        <button className="collapse-btn" onClick={onToggle}><Icon.ChevronLeft size={14} /></button>
      </div>

      <nav className="nav">
        {items.map(it => {
          const Ic = Icon[it.icon];
          return (
            <button key={it.id} className={`nav-item ${active === it.id ? "active" : ""}`} onClick={() => onNav(it.id)}>
              <span className="nav-icon"><Ic /></span>
              <span>{it.label}</span>
              {it.badge && <span className="badge">{it.badge}</span>}
              {it.chev && <Icon.ChevronDown size={14} />}
            </button>
          );
        })}
      </nav>

      <div className="sidebar-foot">
        <button className="foot-action"><Icon.Moon size={16} /><span>Modo Escuro</span></button>
        <button className="foot-action"><Icon.Logout size={16} /><span>Sair</span></button>
        <div className="user-row">
          <div className="avatar">OP</div>
          <div className="user-info">
            <div className="name">Operador OTC</div>
            <div className="email">microotc.talkhub.me</div>
          </div>
        </div>
      </div>
    </aside>
  );
};

const Topbar = () => {
  const cfg = (typeof window !== "undefined" && window.OTC_CONFIG) || {};
  const wallet = cfg.defaultWalletId
    ? `Wallet ${String(cfg.defaultWalletId).slice(0, 8)}…${String(cfg.defaultWalletId).slice(-4)}`
    : "Wallet não configurada";
  return (
    <div className="topbar">
      <div className="account-pick">
        <div>
          <div className="label">Wallet ativa</div>
          <div className="value">{wallet}</div>
        </div>
        <Icon.ChevronDown size={14} />
      </div>
      <div className="topbar-actions">
        <button className="icon-btn" title="Atualizar" onClick={() => window.location.reload()}><Icon.Refresh size={16} /></button>
        <button className="icon-btn" title="Esconder valores"><Icon.EyeOff size={16} /></button>
        <button className="icon-btn" title="Tipografia"><Icon.Type size={16} /></button>
        <button className="icon-btn" title="Idioma"><Icon.Globe size={16} /></button>
        <button className="user-pill">
          <div className="avatar">OP</div>
          <span className="name">Mutual Pay OTC</span>
          <span style={{fontSize: 12}}>🇧🇷</span>
        </button>
      </div>
    </div>
  );
};

const TabStrip = ({ active, onChange }) => {
  const tabs = [
    { id: "comprar", label: "Comprar Cripto", icon: "Buy" },
    { id: "vender", label: "Vender Cripto", icon: "Sell" },
    { id: "converter", label: "Conversão entre Moedas", icon: "Convert" },
    { id: "depositar", label: "Depositar Cripto", icon: "Deposit" },
    { id: "sacar", label: "Sacar Cripto", icon: "Withdraw" },
    { id: "enviar", label: "Enviar Cripto", icon: "Send" },
    { id: "receber", label: "Receber Cripto", icon: "QR" },
    { id: "configuracoes", label: "Configurações", icon: "Settings" },
  ];
  return (
    <div className="tab-strip">
      {tabs.map(t => {
        const Ic = Icon[t.icon];
        return (
          <button key={t.id} className={`tab ${active === t.id ? "active" : ""}`} onClick={() => onChange(t.id)}>
            <span className="tab-icon"><Ic /></span>
            {t.label}
          </button>
        );
      })}
    </div>
  );
};

const ASSET_NAMES_SHELL = {
  BTC: "Bitcoin", ETH: "Ethereum", USDT: "Tether", USDC: "USD Coin",
  SOL: "Solana", MATIC: "Polygon", LTC: "Litecoin", BCH: "Bitcoin Cash",
};

const Holdings = () => {
  const cfg = (typeof window !== "undefined" && window.OTC_CONFIG) || {};
  const [rows, setRows] = useState([]);
  const [quotes, setQuotes] = useState({});
  const [loading, setLoading] = useState(true);

  useEffectShell(() => {
    if (!cfg.defaultWalletId) { setLoading(false); return; }
    let cancelled = false;
    const load = async () => {
      const [bal, qts] = await Promise.all([
        API.ledger(cfg.defaultWalletId),
        API.quotes(cfg.assets || ["BTC", "ETH", "USDT", "USDC"]),
      ]);
      if (cancelled) return;
      const map = {};
      (qts.quotes || []).forEach((q) => { map[q.asset] = q; });
      setRows(((bal.balances) || []).filter((b) => b.asset_symbol !== "BRL"));
      setQuotes(map);
      setLoading(false);
    };
    load();
    const t = setInterval(load, 15_000);
    return () => { cancelled = true; clearInterval(t); };
  }, [cfg.defaultWalletId]);

  if (!cfg.defaultWalletId) {
    return (
      <div className="holdings-grid">
        <div className="holding-card" style={{gridColumn: "1 / -1", textAlign: "center", padding: 24}}>
          <div style={{color: "var(--ink-500)"}}>Configure <b>MUTUAL_CLIENT_WALLET_ID</b> em Configurações para ver seus saldos.</div>
        </div>
      </div>
    );
  }

  if (loading) {
    return <div className="holdings-grid"><div className="holding-card" style={{gridColumn: "1 / -1", textAlign: "center"}}><div style={{color: "var(--ink-400)"}}>Carregando saldos…</div></div></div>;
  }

  if (rows.length === 0) {
    return (
      <div className="holdings-grid">
        <div className="holding-card" style={{gridColumn: "1 / -1", textAlign: "center", padding: 24}}>
          <div style={{color: "var(--ink-400)"}}>Nenhum saldo de cripto registrado para esta wallet.</div>
        </div>
      </div>
    );
  }

  return (
    <div className="holdings-grid">
      {rows.map((b) => {
        const q = quotes[b.asset_symbol];
        const askPrice = q ? Number(q.our_buy_price) : 0;
        const brlValue = askPrice > 0 ? Number(b.amount) * askPrice : 0;
        const sourceOpen = Number(q?.source?.open || 0);
        const sourceLast = Number(q?.source?.last || 0);
        const change = sourceOpen > 0 ? +(((sourceLast / sourceOpen) - 1) * 100).toFixed(2) : null;
        return (
          <div className="holding-card" key={b.asset_symbol}>
            <div className="top">
              <Coin ticker={b.asset_symbol} size="sm" />
              <div>
                <div className="name">{b.asset_symbol}</div>
                <div style={{fontSize: 10.5, color: "var(--ink-400)"}}>{ASSET_NAMES_SHELL[b.asset_symbol] || b.asset_symbol}</div>
              </div>
            </div>
            <div className="qty">{b.amount} {b.asset_symbol}</div>
            <div className="brl">R$ {brlValue.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</div>
            {change != null && (
              <div className={`change ${change >= 0 ? "up" : "down"}`} style={{display: "flex", alignItems: "center", gap: 4}}>
                {change >= 0 ? <Icon.TrendUp /> : <Icon.TrendDown />}
                {change >= 0 ? "+" : ""}{change.toFixed(2)}%
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};

const STATUS_BADGE_HISTORY = {
  completed: { cls: "badge-success", label: "Concluída" },
  pix_initiated: { cls: "badge-warn", label: "PIX em curso" },
  pix_completed: { cls: "badge-warn", label: "Aguardando MB" },
  ledger_debited: { cls: "badge-warn", label: "Ledger debitado" },
  mb_order_placed: { cls: "badge-warn", label: "Ordem MB" },
  pending: { cls: "badge-warn", label: "Pendente" },
  failed: { cls: "badge-down", label: "Falhou" },
  awaiting_reconciliation: { cls: "badge-down", label: "Reconciliação" },
};

const HistoryTabs = () => {
  const [tab, setTab] = useState("conversions");
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffectShell(() => {
    let cancelled = false;
    const load = async () => {
      const r = await API.listOrders();
      if (cancelled) return;
      setOrders(Array.isArray(r.orders) ? r.orders : []);
      setLoading(false);
    };
    load();
    const t = setInterval(load, 20_000);
    return () => { cancelled = true; clearInterval(t); };
  }, []);

  const renderRows = () => {
    if (tab === "conversions") {
      if (loading) return <tr><td colSpan="8" style={{textAlign: "center", color: "var(--ink-400)"}}>Carregando…</td></tr>;
      if (orders.length === 0) return <tr><td colSpan="8" style={{textAlign: "center", color: "var(--ink-400)"}}>Nenhuma ordem registrada ainda.</td></tr>;
      return orders.map((o) => {
        const isBuy = o.side === "buy";
        const brl = o.brl_amount_cents != null ? Number(o.brl_amount_cents) / 100 : null;
        const qty = o.crypto_credited ?? o.crypto_filled ?? o.crypto_qty_requested ?? "—";
        const date = o.created_at ? new Date(o.created_at).toLocaleString("pt-BR") : "—";
        const sb = STATUS_BADGE_HISTORY[o.status] || { cls: "badge-warn", label: o.status };
        return (
          <tr key={o.id}>
            <td className="num">{date}</td>
            <td><span className={`badge-pill ${isBuy ? "badge-buy" : "badge-sell"}`}>{isBuy ? "Compra" : "Venda"}</span></td>
            <td><b>{o.asset_symbol}</b></td>
            <td className="r num">{qty}</td>
            <td className="r num"><b>{brl != null ? `R$ ${brl.toLocaleString("pt-BR", { minimumFractionDigits: 2 })}` : "—"}</b></td>
            <td className="r num" style={{color: "var(--ink-500)"}}>{o.spread_bps != null ? `${(o.spread_bps / 100).toFixed(2)}%` : "—"}</td>
            <td><span className={`badge-pill ${sb.cls}`}>{sb.label}</span></td>
            <td className="r"><code style={{fontSize: 11}}>{o.id?.slice(0, 8)}</code></td>
          </tr>
        );
      });
    }
    if (tab === "deposits") {
      return <tr><td colSpan="6" style={{textAlign: "center", color: "var(--ink-400)"}}>Tracking de depósitos on-chain ainda não implementado.</td></tr>;
    }
    return <tr><td colSpan="7" style={{textAlign: "center", color: "var(--ink-400)"}}>Tracking de saques on-chain ainda não implementado.</td></tr>;
  };

  const headers = {
    conversions: ["Data", "Tipo", "Moeda", "Quantidade", "Valor BRL", "Spread", "Status", "ID"],
    deposits: ["Data", "Moeda", "Quantidade", "Endereço Origem", "Status", "Ações"],
    withdrawals: ["Data", "Moeda", "Quantidade", "Destino", "Rede", "Taxa", "Status"],
  };
  const titles = {
    conversions: "Histórico de Ordens (Comprar / Vender)",
    deposits: "Histórico de Depósitos",
    withdrawals: "Histórico de Saques",
  };
  const counts = {
    conversions: orders.length,
    deposits: 0,
    withdrawals: 0,
  };

  return (
    <div className="mt-24">
      <div className="row mb-16" style={{fontSize: 18, fontWeight: 700, color: "var(--ink-800)"}}>
        <Icon.Clock size={18} />
        <span>Histórico de Transações</span>
      </div>
      <div className="history-tabs">
        <button className={`history-tab ${tab === "conversions" ? "active" : ""}`} onClick={() => setTab("conversions")}>Conversões</button>
        <button className={`history-tab ${tab === "deposits" ? "active" : ""}`} onClick={() => setTab("deposits")}>Depósitos</button>
        <button className={`history-tab ${tab === "withdrawals" ? "active" : ""}`} onClick={() => setTab("withdrawals")}>Saques</button>
      </div>
      <div className="card">
        <div className="card-pad" style={{paddingBottom: 0}}>
          <div className="row-between mb-12">
            <div style={{fontWeight: 700, fontSize: 14}}>{titles[tab]}</div>
            <div style={{fontSize: 11.5, color: "var(--ink-400)"}}>{counts[tab]} registros</div>
          </div>
        </div>
        <table className="tx">
          <thead>
            <tr>{headers[tab].map((h, i) => <th key={i} className={i >= 3 && i <= headers[tab].length - 3 ? "r" : ""}>{h}</th>)}</tr>
          </thead>
          <tbody>{renderRows()}</tbody>
        </table>
      </div>
      <div className="info info-blue mt-16">
        <span className="info-icon"><Icon.Info /></span>
        <div>
          <b>Aviso Importante</b>
          As conversões de criptomoedas são irreversíveis. Verifique cuidadosamente os valores antes de confirmar.
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Coin, Sidebar, Topbar, TabStrip, Holdings, HistoryTabs });