/* SEL.IA — "Atendimento" regulatory assistant chat (área Atendimento). Loops 3 consumer Q&As.
   Reuses dados.css chat styling (.dd-*) + atendimento.css (.at-*). */

const AT_Q = [
  { id:"relig",
    q:"Estou solicitando a religação. Qual o prazo que a distribuidora tem para religar?",
    norm:"REN nº 1.000/2021 · Art. 309",
    highlight:{ k:"Prazo de religação", v:"até 24h (urbano) · 48h (rural)" },
    a:<>Após a regularização do débito ou da pendência, a distribuidora deve <b>restabelecer o fornecimento</b> dentro do prazo regulatório. Se não cumprir, há <b>compensação automática</b> ao consumidor.</>,
    steps:["Regularize o débito/pendência que motivou a suspensão.","A distribuidora tem até 24h (área urbana) ou 48h (rural) para religar.","Não cumprido o prazo, é devida compensação financeira na fatura."] },
  { id:"gd",
    q:"O que eu preciso fazer para instalar geração distribuída (GD) na minha unidade?",
    norm:"PRODIST Módulo 3 · REN nº 1.000/2021",
    a:<>A conexão de GD segue o <b>procedimento de acesso</b> do PRODIST Módulo 3. Em resumo, são quatro etapas até começar a compensar energia:</>,
    steps:["Envie a Solicitação de Acesso à distribuidora com o projeto do sistema.","A distribuidora emite o Parecer de Acesso, dentro dos prazos do PRODIST.","Instale o sistema e solicite a vistoria técnica.","Aprovada a vistoria, troca-se o medidor e inicia o Sistema de Compensação."] },
  { id:"comp",
    q:"Como funciona a compensação de energia da minha geração distribuída?",
    norm:"REN nº 1.000/2021 · SCEE · Lei 14.300/2022",
    highlight:{ k:"Validade dos créditos", v:"até 60 meses" },
    a:<>Pelo <b>Sistema de Compensação de Energia Elétrica (SCEE)</b>, a energia que você injeta na rede vira créditos que abatem o seu consumo.</>,
    steps:["A energia injetada na rede é convertida em créditos em kWh.","Os créditos abatem o consumo do mês na mesma unidade consumidora.","As sobras viram créditos, válidos por até 60 meses.","Aplica-se o componente Fio B conforme a transição da Lei 14.300/2022."] },
];

const AtendimentoScene = () => {
  const [qi, setQi] = React.useState(-1); // -1 = intro
  const [typed, setTyped] = React.useState("");
  const [phase, setPhase] = React.useState("intro"); // intro → ask → think → answer
  const [steps, setSteps] = React.useState(0);
  const [litChip, setLitChip] = React.useState(-1);
  const bodyRef = React.useRef(null);

  React.useEffect(() => {
    const T = []; const push = (fn, ms) => T.push(setTimeout(fn, ms));
    if (qi < 0) {
      setPhase("intro"); setTyped(""); setSteps(0); setLitChip(-1);
      push(() => setQi(0), 15000);   // autoplay só após ~15s de inatividade
      return () => T.forEach(clearTimeout);
    }
    const Q = AT_Q[qi];
    setPhase("ask"); setTyped(""); setSteps(0); setLitChip(-1);
    for (let i = 1; i <= Q.q.length; i++) push(() => setTyped(Q.q.slice(0, i)), 200 + i * 26);
    const qEnd = 200 + Q.q.length * 26;
    push(() => { setPhase("think"); setLitChip(qi); }, qEnd + 200);   // chip lights only AFTER the question is sent
    push(() => setPhase("answer"), qEnd + 1500);
    for (let i = 1; i <= Q.steps.length; i++) push(() => setSteps(i), qEnd + 2200 + i * 600);
    push(() => setQi((q) => (q + 1) % AT_Q.length), qEnd + 20000);   // próxima só após ~15s parado
    return () => T.forEach(clearTimeout);
  }, [qi]);

  React.useEffect(() => { const b = bodyRef.current; if (b) b.scrollTop = b.scrollHeight; }, [typed, phase, steps]);

  const Q = qi >= 0 ? AT_Q[qi] : null;
  return (
    <div className="dd-scene">
      <div className="dd-head">
        <div className="ico"><LandIcon name="message" size={20}/></div>
        <div><div className="t">Assistente Regulatório</div><div className="s">Atendimento · normas do setor elétrico</div></div>
        <div className="spacer"/>
        <div className="dd-base"><span className="dot"/>Base normativa conectada</div>
      </div>

      <div className="dd-caption">
        <span className="dd-stepnum"><LandIcon name="sparkles" size={14}/></span>
        <span className="dd-steptext">Tire dúvidas de atendimento — respostas com a norma que regulamenta</span>
      </div>

      {/* persistent, always-clickable suggestion bar (works even after an answer) */}
      <div className="at-chipbar">
        <span className="at-chipbar-lbl"><LandIcon name="sparkles" size={12}/>Perguntas:</span>
        {AT_Q.map((q, i) => (
          <span key={i} className={"at-chip" + (qi === i ? " lit" : "")} onClick={() => setQi(i)}>
            <LandIcon name={["zap","plug","chart"][i]} size={12}/>{["Prazo para religação?","Como instalar GD?","Como funciona a compensação?"][i]}
          </span>
        ))}
      </div>

      <div className="dd-body" ref={bodyRef}>
        <div className="at-intro">
          <div className="h">👋 Olá! Sou o assistente regulatório da SEL.IA</div>
          <div className="p">Posso ajudá-lo a entender normas e regulamentos do setor elétrico brasileiro. Clique numa pergunta acima — ou veja a SEL.IA responder sozinha.</div>
        </div>

        {Q && (
          <>
            <div className="dd-user">{typed}{phase === "ask" && typed.length < Q.q.length && <span className="caret"/>}</div>
            {phase !== "ask" && (
              <div className="dd-ai">
                <div className="dd-ai-ico"><LandIcon name="sparkles" size={15}/></div>
                <div className="dd-ai-body">
                  {phase === "think" ? (
                    <div className="dd-think"><i/><i/><i/></div>
                  ) : (
                    <>
                      <div className="dd-ai-text">{Q.a}</div>
                      <div><span className="at-norm"><LandIcon name="book" size={12}/>{Q.norm}</span></div>
                      {Q.highlight && <div className="at-highlight"><LandIcon name="check" size={16} style={{color:"#1f9a66"}}/><div><div className="k">{Q.highlight.k}</div><div className="v">{Q.highlight.v}</div></div></div>}
                      {steps > 0 && (
                        <>
                          <div className="at-steptitle">Passo a passo</div>
                          {Q.steps.slice(0, steps).map((s, i) => (
                            <div className="at-step" key={i}><span className="num">{i + 1}</span><span className="txt">{s}</span></div>
                          ))}
                          <div className="at-fonte"><LandIcon name="shield" size={11}/>Resposta fundamentada na norma citada · verifique sempre a versão vigente</div>
                        </>
                      )}
                    </>
                  )}
                </div>
              </div>
            )}
          </>
        )}
      </div>

      <div className="dd-input">
        <div className="dd-input-box"><span style={{flex:1}}>Digite sua mensagem…</span><span className="dd-deep"><LandIcon name="search" size={12}/>Deep Search</span><span className="send" style={{marginLeft:8}}><LandIcon name="send" size={13}/></span></div>
      </div>
    </div>
  );
};
window.AtendimentoScene = AtendimentoScene;

const AtendimentoEmbed = (props) => {
  const ref = React.useRef(null);
  const [box, setBox] = React.useState({ scale: 1, left: 0 });
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const fit = () => { const w = el.clientWidth; const scale = w / 1200; setBox({ scale, left: Math.max(0, (w - 1200 * scale) / 2) }); };
    fit(); const ro = new ResizeObserver(fit); ro.observe(el); return () => ro.disconnect();
  }, []);
  return (
    <div ref={ref} style={{ width:"100%", height: 700 * box.scale, position:"relative", overflow:"hidden" }}>
      <div style={{ position:"absolute", top:0, left:box.left, width:1200, height:700, transform:`scale(${box.scale})`, transformOrigin:"top left" }}>
        <AtendimentoScene {...props}/>
      </div>
    </div>
  );
};
window.AtendimentoEmbed = AtendimentoEmbed;