/* ============================================================
   SKYVIDYA v3 — core overlays: Command bar (AI-first),
   H3 multi-scale gating (freemium), upgrade modal.
   ============================================================ */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Command bar (⌘K · AI-first) ---------- */
function CommandBar({ open, onClose, onNav, chat }) {
  const [q, setQ] = useState("");
  const inputRef = useRef(null);
  useEffect(() => { if (open) { setQ(""); setTimeout(() => inputRef.current && inputRef.current.focus(), 60); } }, [open]);
  if (!open) return null;

  const actions = [
    { k: "Mapa de risco agroclimático · Triângulo das Bermudas", icon: "map", run: () => onNav("map") },
    { k: "Ativos · glebas do portfólio IRB", icon: "table", run: () => onNav("ativos") },
    { k: "Módulos · Score Risco Agroclimático", icon: "map", run: () => onNav("modulos", "agro") },
    { k: "Módulos · Score Risco ESG", icon: "globe", run: () => onNav("modulos", "esg") },
    { k: "Módulos · Score Cadastral", icon: "file", run: () => onNav("modulos", "cadastral") },
    { k: "Módulos · Sinistro × Produtividade", icon: "target", run: () => onNav("modulos", "prodmatrix") },
    { k: "Quais regiões estão deteriorando?", icon: "trendDown", run: () => chat.askPrompt("deteriorando") },
    { k: "Anomalias Passo Fundo · risco de fraude", icon: "alert", run: () => chat.askPrompt("fraude") },
    { k: "Top Leads · glebas Classe A em zonas críticas", icon: "gem", run: () => chat.askPrompt("pescarias") },
  ].filter(a => !q.trim() || a.k.toLowerCase().includes(q.toLowerCase()));

  function submit(e) {
    e.preventDefault();
    if (q.trim()) { chat.askFree(q.trim()); onClose(); }
  }
  return (
    <div className="cb-overlay" onClick={onClose}>
      <div className="cb-panel fade-up" onClick={(e) => e.stopPropagation()}>
        <form className="cb-input" onSubmit={submit}>
          <Icon name="sparkles" size={16} color="var(--sv-cyan)" />
          <input ref={inputRef} value={q} onChange={(e) => setQ(e.target.value)}
            placeholder="Pergunte ou navegue — ex.: 'analise ESG da fazenda Santa Rosa'" />
          <span className="cb-kbd mono">esc</span>
        </form>
        <div className="cb-list">
          {actions.map((a, i) => (
            <button key={i} className="cb-item" onClick={() => { a.run(); onClose(); }}>
              <Icon name={a.icon} size={14} /> <span>{a.k}</span>
              <Icon name="arrowR" size={12} className="cb-go" />
            </button>
          ))}
          {q.trim() && (
            <button className="cb-item cb-ai" onClick={submit}>
              <Icon name="sparkles" size={14} color="var(--sv-cyan)" />
              <span>Perguntar à IA: “{q}”</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- H3 multi-scale gating (freemium) ---------- */
function H3GatePanel({ onUpgrade }) {
  const [scale, setScale] = useState("municipio");
  return (
    <div className="geo-panel h3-gate">
      <div className="ct">Escala H3 · acesso</div>
      {SKY.H3_SCALES.map((s) => {
        const locked = !s.free;
        const on = scale === s.id;
        return (
          <button key={s.id} className={"h3g-row" + (on ? " on" : "") + (locked ? " locked" : "")}
            onClick={() => locked ? onUpgrade(s) : setScale(s.id)}>
            <span className={"bmc" + (on ? " on" : "")} />
            <span className="h3g-l">{s.label}</span>
            <span className="mono h3g-r">{s.res}</span>
            {locked ? <span className="h3g-lock mono">🔒 PRO</span> : <span className="h3g-free mono">grátis</span>}
          </button>
        );
      })}
      <p className="h3g-note">Estado e município são gratuitos. Sub-município (propriedade · parcela) é privado/pago.</p>
    </div>
  );
}

function UpgradeModal({ scale, onClose }) {
  if (!scale) return null;
  return (
    <div className="cb-overlay" onClick={onClose}>
      <div className="up-panel fade-up" onClick={(e) => e.stopPropagation()}>
        <div className="eyebrow" style={{ color: "var(--sv-coral)" }}>// Plano Pro</div>
        <h3 className="up-title">Resolução {scale.res} · {scale.label}</h3>
        <p className="up-body">Escalas sub-município (propriedade, parcela, gleba) fazem parte do plano pago. Estado e município permanecem gratuitos para todos.</p>
        <ul className="up-list">
          <li>Drill-down até a parcela/gleba (H3-10)</li>
          <li>Insights diagnósticos, preditivos e prescritivos por ativo</li>
          <li>Relatórios de conformidade exportáveis</li>
        </ul>
        <div className="row gap8">
          <button className="btn btn-primary" onClick={onClose}><Icon name="sparkles" size={13} /> Falar com vendas</button>
          <button className="btn" onClick={onClose}>Continuar no grátis</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CommandBar, H3GatePanel, UpgradeModal });