/* global React, Icon, Coin, API */
const { useState, useEffect } = React;

const fmt = (n, dec = 2) => {
  if (n === null || n === undefined || isNaN(n)) return "0,00";
  const [int, frac] = Number(n).toFixed(dec).split(".");
  return int.replace(/\B(?=(\d{3})+(?!\d))/g, ".") + (dec > 0 ? "," + frac : "");
};
const parseNum = (s) => {
  if (!s) return 0;
  return parseFloat(String(s).replace(/\./g, "").replace(",", ".")) || 0;
};
window.fmt = fmt;
window.parseNum = parseNum;

function configuredAssets() {
  const cfg = (typeof window !== "undefined" && window.OTC_CONFIG) || {};
  return Array.isArray(cfg.assets) && cfg.assets.length ? cfg.assets : ["BTC", "ETH", "USDT", "USDC"];
}

const REFRESH_SECONDS = 5;

const ConversaoView = ({ onShowToast }) => {
  // Live quote — populated from /api/quotes; null until first fetch lands.
  const [quote, setQuote] = useState(null);
  const [side, setSide] = useState("BRL"); // BRL or asset
  const ASSETS = configuredAssets();
  const [asset, setAsset] = useState(ASSETS.includes("USDT") ? "USDT" : ASSETS[0]);
  const [amount, setAmount] = useState("");
  const [autoOn, setAutoOn] = useState(true);
  const [counter, setCounter] = useState(REFRESH_SECONDS);
  const [pulseId, setPulseId] = useState(false);

  const fetchQuote = async () => {
    const data = await API.quotes([asset]);
    const q = (data?.quotes || [])[0];
    if (!q) return;
    const ask = Number(q.our_buy_price);
    const bid = Number(q.our_sell_price);
    const high = Number(q.source?.high);
    const low = Number(q.source?.low);
    const open = Number(q.source?.open);
    const change = open > 0 ? +(((ask / open) - 1) * 100).toFixed(2) : 0;
    const now = new Date();
    const fullId = `${asset.toLowerCase()}-${now.getTime().toString(16)}-${Math.random().toString(16).slice(2, 8)}`;
    setQuote({
      ask, bid, high, low, change,
      quoteId: fullId.slice(0, 12).toUpperCase().replace(/-/g, ""),
      fullId,
      updated: now.toTimeString().slice(0, 8),
      vol: q.source?.vol,
      spreadBps: q.spread_bps,
      sourceAsk: Number(q.source?.sell),
      sourceBid: Number(q.source?.buy),
    });
    setPulseId(true);
    setTimeout(() => setPulseId(false), 600);
  };

  // initial + on-asset-change fetch
  useEffect(() => { fetchQuote(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [asset]);

  // auto-refresh tick
  useEffect(() => {
    if (!autoOn) return;
    const interval = setInterval(() => {
      setCounter((c) => {
        if (c <= 1) { fetchQuote(); return REFRESH_SECONDS; }
        return c - 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [autoOn, asset]);

  const refreshNow = () => {
    setCounter(REFRESH_SECONDS);
    fetchQuote();
    onShowToast && onShowToast("Cotação atualizada", "check");
  };

  const valueFrom = parseNum(amount);
  const ask = quote?.ask || 0;
  const bid = quote?.bid || 0;
  const useRate = side === "BRL" ? ask : bid; // BRL→asset uses our buy price; asset→BRL uses our sell price.
  const converted = useRate > 0 ? (side === "BRL" ? (valueFrom / useRate) : (valueFrom * useRate)) : 0;
  const targetTicker = side === "BRL" ? asset : "BRL";

  return (
    <div className="card">
      {/* Quote header */}
      <div className="quote-head">
        <div>
          <h2 className="qh-title"><Icon.Convert size={20} /> Cotação {side} ⇒ {side === "BRL" ? asset : "BRL"}</h2>
          <div className="qh-rates">
            <span><b>1 BRL = {ask > 0 ? fmt(1 / ask, 8) : "—"} {asset}</b></span>
            <span className="dot"></span>
            <span><b>1 {asset} = {ask > 0 ? fmt(ask, 2) : "—"} BRL</b></span>
          </div>
        </div>
        <div className="quote-id">
          <div className="label">ID DA COTAÇÃO</div>
          <div className="value" style={{transition: "all .3s", transform: pulseId ? "scale(1.04)" : "none", borderColor: pulseId ? "rgba(252,183,27,.6)" : ""}}>{quote?.quoteId || "—"}</div>
        </div>
      </div>

      <div className="card-pad">
        {/* Market data */}
        <div className="row-between mb-12">
          <div className="row" style={{gap: 8}}>
            <Icon.Activity />
            <span style={{fontSize: 11.5, fontWeight: 700, letterSpacing: ".6px", color: "var(--ink-500)", textTransform: "uppercase"}}>Dados de Mercado</span>
            <span className="badge-pill badge-live">LIVE</span>
          </div>
          {quote && (
            <span className={`badge-pill ${quote.change >= 0 ? "badge-up" : "badge-down"}`} style={{display: "inline-flex", alignItems: "center", gap: 4}}>
              {quote.change >= 0 ? <Icon.TrendUp size={12} /> : <Icon.TrendDown size={12} />}
              <span>{quote.change >= 0 ? "+" : ""}{quote.change.toFixed(2)}%</span>
              <span style={{fontWeight: 400, opacity: .65, marginLeft: 4}}>24h</span>
            </span>
          )}
        </div>

        <div className="market-row">
          <div className="market-cell"><div className="l">Compra (Bid)</div><div className="v">{bid > 0 ? fmt(bid, 4) : "—"}</div></div>
          <div className="market-cell"><div className="l">Venda (Ask)</div><div className="v">{ask > 0 ? fmt(ask, 4) : "—"}</div></div>
          <div className="market-cell"><div className="l">Máxima 24h</div><div className="v">{quote?.high > 0 ? fmt(quote.high, 4) : "—"}</div></div>
          <div className="market-cell"><div className="l">Mínima 24h</div><div className="v">{quote?.low > 0 ? fmt(quote.low, 4) : "—"}</div></div>
        </div>

        <div className="meta-row">
          <Icon.Activity size={12} />
          <span>Volume 24h: <b>{quote?.vol ? fmt(Number(quote.vol), 4) : "—"} {asset}</b></span>
          <span className="sep"></span>
          <span>Spread: <b>{quote ? `${(quote.spreadBps / 100).toFixed(2)}%` : "—"}</b></span>
        </div>

        <div className="meta-row mb-20">
          <Icon.Clock />
          <span>Última atualização: <b>{quote?.updated || "—"}</b></span>
        </div>

        {/* FX side toggle */}
        <div className="fx-row">
          <button className={`fx-side ${side === "BRL" ? "on" : ""}`} onClick={() => setSide("BRL")}>
            <span style={{fontSize: 16}}>R$</span>
            <span>BRL</span>
          </button>
          <button className="fx-swap" onClick={() => setSide(side === "BRL" ? asset : "BRL")} title="Inverter">
            <Icon.Swap />
          </button>
          <button className={`fx-side ${side === asset ? "on" : ""}`} onClick={() => setSide(asset)}>
            <span style={{fontSize: 16}}>{asset === "USDT" ? "₮" : asset === "BTC" ? "₿" : asset === "ETH" ? "Ξ" : asset === "USDC" ? "$" : asset.charAt(0)}</span>
            <span>{asset}</span>
          </button>
        </div>

        <div style={{fontSize: 11.5, color: "var(--ink-400)", marginBottom: 14}}>
          Cotação ao vivo da Mercado Bitcoin com spread Mutual Pay aplicado.
        </div>

        {/* Amount input */}
        <div className="mb-20">
          <label className="label">Valor ({side})</label>
          <div style={{position: "relative"}}>
            <span style={{position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", fontWeight: 700, fontSize: 14, color: "var(--ink-500)"}}>
              {side === "BRL" ? "R$" : (side === "USDT" ? "₮" : side)}
            </span>
            <input
              type="text"
              className="input input-lg"
              placeholder="0,00"
              value={amount}
              onChange={e => setAmount(e.target.value.replace(/[^\d,]/g, ""))}
              style={{paddingLeft: 56, paddingRight: 60}}
            />
            <span style={{position: "absolute", right: 16, top: "50%", transform: "translateY(-50%)", fontWeight: 700, fontSize: 14, color: "var(--ink-500)"}}>{side}</span>
          </div>
        </div>

        {/* Result card */}
        <div className="result-card mb-20">
          <p className="tag">Valor convertido</p>
          <p className="big">{targetTicker} {fmt(converted, asset === "BTC" ? 8 : 4)}</p>
          <div className="qid">
            <span>QUOTE ID:</span>
            <b>{quote?.fullId || "—"}</b>
          </div>
        </div>

        {/* Asset selector */}
        <div className="mb-20">
          <label className="label">Ativo</label>
          <div className="coin-tiles">
            {ASSETS.map((a) => (
              <button key={a} className={`coin-tile ${asset === a ? "active" : ""}`} onClick={() => { setAsset(a); if (side !== "BRL") setSide(a); }}>
                {a}
              </button>
            ))}
          </div>
        </div>

        {/* Auto refresh */}
        <div className="auto-row mb-12">
          <div className="lhs">
            <span style={{fontWeight: 600}}>Auto</span>
            <button className={`switch ${autoOn ? "on" : ""}`} onClick={() => setAutoOn(!autoOn)} aria-label="Auto refresh"></button>
            <span style={{color: "var(--ink-500)", fontSize: 12}}>{autoOn ? `On (${counter}s)` : "Off"}</span>
          </div>
          <div className="rhs">{autoOn ? `Próxima atualização em ${counter}s` : "Atualização manual"}</div>
        </div>

        {/* Actions */}
        <div className="action-row">
          <button className="btn btn-ghost" onClick={refreshNow}><Icon.Refresh size={16} /> Atualizar agora</button>
          <button className="btn btn-primary" disabled={!valueFrom} onClick={async () => {
            if (!valueFrom) return;
            try {
              const res = side === "BRL"
                ? await window.API.buy({ assetSymbol: asset, brlAmountCents: Math.round(valueFrom * 100) })
                : await window.API.sell({ assetSymbol: asset, cryptoQty: valueFrom });
              if (res.ok) {
                onShowToast && onShowToast(`Ordem ${side === "BRL" ? "de compra" : "de venda"} enviada`, "check");
                setAmount("");
              } else {
                onShowToast && onShowToast(res.error || "Falha ao enviar ordem", "info");
              }
            } catch (e) {
              onShowToast && onShowToast("Erro de rede", "info");
            }
          }}>
            <Icon.Send size={14} /> Enviar ordem
          </button>
        </div>
      </div>
    </div>
  );
};

window.ConversaoView = ConversaoView;