/* global React, Icon, Button, Badge, Card, brl, PageHead */

const IA_AGENTS = {
  comercial: {
    title: "IA Comercial",
    sub: "Negocia, cria orçamentos e fecha pedidos com clientes B2B",
    icon: "trending-up",
    tone: "brand",
    stats: { conv: 0, fechados: 0, ticket: 0, taxa: 0 },
    metrics: [
      { l: "Conversas iniciadas", v: "—", d: "sem dados" },
      { l: "Orçamentos gerados",  v: "—", d: "sem dados" },
      { l: "Pedidos fechados",    v: "—", d: "sem dados" },
      { l: "Ticket médio",        v: "—", d: "sem dados" },
    ],
    prompt: "Você é o atendente comercial da empresa. Use a tabela de preços do canal (distribuidor, salão ou cliente final) conforme o cadastro do contato. Nunca conceda desconto acima de 10% sem aprovação humana. Quando o ticket passar de R$ 5.000, transfira para um humano.",
    capabilities: ["Consultar estoque", "Gerar orçamento", "Aplicar tabela de preço", "Calcular frete", "Criar pedido draft", "Transferir para humano"],
    sample: "Configure este agente com as instruções personalizadas da sua empresa."
  },
  sac: {
    title: "IA de SAC",
    sub: "Suporte ao cliente em primeira camada com transbordo para humano",
    icon: "message-square",
    tone: "info",
    stats: { conv: 0, fechados: 0, ticket: 0, taxa: 0 },
    metrics: [
      { l: "Atendimentos",         v: "—", d: "sem dados" },
      { l: "Resolvidos s/ humano", v: "—", d: "sem dados" },
      { l: "Transferidos",         v: "—", d: "sem dados" },
      { l: "NPS pós-IA",           v: "—", d: "sem dados" },
    ],
    prompt: "Você é o atendente de suporte da empresa. Resolva dúvidas sobre rastreio, troca, prazo e uso de produto. Se a dúvida for fiscal, jurídica ou envolver reembolso acima de R$ 500, transfira para um humano com o resumo do caso.",
    capabilities: ["Rastrear pedido", "Consultar NF-e", "Política de troca", "Catálogo de uso", "Abrir ticket", "Transferir para humano"],
    sample: "Configure este agente com as instruções personalizadas da sua empresa."
  },
  interna: {
    title: "IA Interna",
    sub: "Copiloto do time — relatórios, automações e perguntas de negócio",
    icon: "sparkles",
    tone: "success",
    stats: { conv: 0, fechados: 0, ticket: 0, taxa: 0 },
    metrics: [
      { l: "Consultas da equipe", v: "—", d: "sem dados" },
      { l: "Relatórios gerados",  v: "—", d: "sem dados" },
      { l: "Automações ativas",   v: "—", d: "sem dados" },
      { l: "Horas economizadas",  v: "—", d: "sem dados" },
    ],
    prompt: "Você é o copiloto interno da empresa. Tem acesso a vendas, estoque, CRM, financeiro e NF-e. Responda perguntas de negócio com dados reais, gere CSV/PDF quando solicitado e nunca exponha dados de cliente para usuários sem permissão.",
    capabilities: ["SQL read-only", "Gerar relatório", "Comparar períodos", "Detectar anomalias", "Cron + webhook", "Permissão por papel"],
    sample: "Configure este agente com as instruções personalizadas da sua empresa."
  }
};

function IADetail({ which }) {
  const a = IA_AGENTS[which];
  return (
    <div className="canvas">
      <div className="page-head">
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: a.tone === "info" ? "rgba(107,163,214,0.14)" : a.tone === "success" ? "rgba(91,177,122,0.14)" : "rgba(201,163,107,0.14)",
                        color: a.tone === "info" ? "var(--tm-info)" : a.tone === "success" ? "var(--tm-success)" : "var(--tm-brand-champagne)",
                        display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name={a.icon} size={26} />
          </div>
          <div>
            <div className="page-title">{a.title}</div>
            <div className="page-sub">{a.sub}</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <span style={{ fontSize: 12, color: "var(--tm-fg-3)" }}>Agente ativo</span>
          <span className="toggle on"><span className="knob" /></span>
          <Button variant="secondary" icon="play" size="sm">Testar</Button>
          <Button variant="primary" icon="save" size="sm">Salvar</Button>
        </div>
      </div>

      {/* KPIs */}
      <div className="grid-4">
        {a.metrics.map((m, i) => (
          <div key={i} className="kpi">
            <div className="lbl">{m.l}</div>
            <div className="val">{m.v}</div>
            <div className="delta"><span className="muted">{m.d}</span></div>
          </div>
        ))}
      </div>

      {/* Config */}
      <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16, marginTop: 16 }}>
        <Card title="Instruções do agente"
              action={<span className="muted" style={{ fontSize: 11 }}>Tom · pt-BR profissional · você</span>}>
          <div style={{ padding: 20 }}>
            <textarea className="input" rows={6} defaultValue={a.prompt}
              style={{ minHeight: 140, padding: 12, lineHeight: 1.55, fontFamily: "var(--tm-font-ui)" }} />

            <div style={{ marginTop: 18 }}>
              <div className="muted" style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>Capacidades habilitadas</div>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                {a.capabilities.map(c => <span key={c} className="chip active">{c}</span>)}
                <span className="chip"><Icon name="plus" size={12} /> Adicionar</span>
              </div>
            </div>

            <div style={{ marginTop: 18, padding: 14, background: "var(--tm-bg-1)", borderRadius: 8, border: "1px solid var(--tm-line-1)" }}>
              <div className="muted" style={{ fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>Conversa de exemplo</div>
              <pre style={{ margin: 0, fontFamily: "var(--tm-font-ui)", fontSize: 12.5, color: "var(--tm-fg-2)", whiteSpace: "pre-wrap", lineHeight: 1.55 }}>{a.sample}</pre>
            </div>
          </div>
        </Card>

        <Card title="Canais e roteamento">
          <div style={{ padding: 20, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              { ch: "WhatsApp Business",  on: false, color: "#25D366", count: 0 },
              { ch: "Instagram Direct",   on: false, color: "#E4405F", count: 0 },
              { ch: "Facebook Messenger", on: false, color: "#1877F2", count: 0 },
              { ch: "E-mail",             on: false, color: "#C9A36B", count: 0 },
              { ch: "Webchat",            on: false, color: "#6BA3D6", count: 0 },
            ].map((c, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: c.color }} />
                <span style={{ flex: 1, fontSize: 13 }}>{c.ch}</span>
                <span className="muted" style={{ fontSize: 11 }}>{c.count > 0 ? `${c.count} hoje` : "—"}</span>
                <span className={`toggle ${c.on ? "on" : ""}`}><span className="knob" /></span>
              </div>
            ))}

            <div style={{ marginTop: 6, paddingTop: 14, borderTop: "1px solid var(--tm-line-1)" }}>
              <div className="muted" style={{ fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>Transbordo para humano</div>
              <div style={{ fontSize: 12.5, color: "var(--tm-fg-2)", lineHeight: 1.6 }}>
                • Ticket acima de R$ 5.000,00<br />
                • Cliente VIP solicita humano<br />
                • Desconto acima de 10%<br />
                • IA detectou frustração ({">"} 2 mensagens)
              </div>
            </div>
          </div>
        </Card>
      </div>

      {/* Conversation log */}
      <Card title="Conversas recentes do agente"
            action={<a className="gold" style={{ fontSize: 12, cursor: "pointer" }}>Ver todas</a>}
            style={{ marginTop: 16 }}>
        <div style={{ padding: "40px 0", textAlign: "center", color: "var(--tm-fg-3)" }}>
          <Icon name="message-square" size={32} style={{ opacity: 0.3, marginBottom: 10 }} />
          <div style={{ fontSize: 13 }}>Nenhuma conversa registrada</div>
          <div style={{ fontSize: 12, marginTop: 4 }}>Conecte um canal para ativar o agente</div>
        </div>
      </Card>
    </div>
  );
}

function IAComercial() { return <IADetail which="comercial" />; }
function IASac()       { return <IADetail which="sac" />; }
function IAInterna()   { return <IADetail which="interna" />; }

Object.assign(window, { IAComercial, IASac, IAInterna });