/* SEL.IA — Phone Participação Social. Roteiro: processo → SELIA chips →
   "Resuma contribuições" → answer → "faça relatório" → report modal. */

const PT_CHIPS = [
  "Resuma as contribuições da fase de Contribuições",
  "Quais entidades participaram e como se posicionaram?",
  "Há posições divergentes entre as contribuições?",
  "Gere um relatório consolidado das principais propostas",
];
const PT_ANS = [
  { k:"p", t:<>Na fase de <b>Contribuições</b> houve <b>12 manifestações</b>, com predominância de apoio à proposta, mas com diferenças relevantes sobre <b>prazo</b>, <b>ônus</b> e <b>salvaguardas</b>.</> },
  { k:"h", t:"Visão geral" },
  { k:"p", t:<>O conjunto das contribuições converge em torno de dois eixos:</> },
  { k:"li", n:"1.", t:<><b>Proteção dos ciclos tarifários e dos consumidores</b>, defendida sobretudo por conselhos de consumidores e pelo ONS.</> },
  { k:"li", n:"2.", t:<><b>Preservação do caráter "livre" e "não oneroso" do ajuste do CUST</b>, defendida principalmente por associações e agentes de geração.</> },
];
const PT_CONTRIB = [
  { org:"COCEN Paulista", ini:"CP", stance:"Apoio",    c:"#1f9a66", t:"apoiou a minuta — limite de 31/03 e exigência de garantias." },
  { org:"CONCEN/MS",      ini:"CM", stance:"Apoio",    c:"#1f9a66", t:"favorável à manutenção da data contratada." },
  { org:"ENGIE",          ini:"EN", stance:"Ressalva", c:"#ef9b3f", t:"vê restrições não previstas em lei ao ajuste do CUST." },
  { org:"ABEEólica",      ini:"AB", stance:"Ressalva", c:"#ef9b3f", t:"efeitos do ajuste independentes do ciclo tarifário." },
  { org:"Voltalia",       ini:"VO", stance:"Proposta", c:"#1f6cd9", t:"tratamento específico para EUST já pagos, com compensação." },
  { org:"PEC Energia",    ini:"PE", stance:"Proposta", c:"#1f6cd9", t:"postergação do início do CUST de até 84 meses." },
];
const PT_BARS = [["Favoráveis",6,"#1f9a66"],["Parcialmente favoráveis",3,"#ef9b3f"],["Ênfase em flexibilização",3,"#d91965"]];
const PT_TABLE = [
  ["Apoio com foco em neutralidade tarifária","COCEN Paulista, COCEN CPFL Piratininga, CONCEN/MS, CONEDP/ES, ONS, PEC Energia","Defendem disciplina procedimental para evitar efeitos redistributivos nos ciclos tarifários, com manutenção de garantias e prazos."],
  ["Apoio com ressalvas","INEL, CONCCEL, CONERGE","Concordam com a regulamentação, mas alertam que salvaguardas não devem gerar ônus incompatíveis com a lei."],
  ["Maior flexibilização para geradores","ABEEólica, ENGIE, Voltalia","Leitura mais ampla do ajuste livre e não oneroso, com menor rigidez quanto ao ciclo tarifário."],
];
const PT_TIPS = [
  { icon:"users", label:"Audiências, consultas e tomadas de subsídios", tag:"Part. social", corner:"tr" },
  { icon:"sparkles", label:"Chatbot especialista no processo em análise", tag:"IA", corner:"bl" },
  { icon:"message", label:"Pergunte qualquer coisa do processo", tag:"IA", corner:"br" },
  { icon:"filetext", label:"Gera relatórios exportáveis", tag:"Exportável", corner:"tr" },
];

const PhonePart = () => {
  const Q = "Resuma as contribuições da fase de Contribuições";
  const Q2 = "faça um relatório com o resumo das contribuições para apresentação à minha diretoria";
  const [phase, setPhase] = React.useState("proc"); // proc → selia → ask → answer → ask2 → report
  const [litChip, setLitChip] = React.useState(-1);
  const [typed, setTyped] = React.useState("");
  const [ans, setAns] = React.useState(false);
  const [aLi, setALi] = React.useState(0);
  const [typed2, setTyped2] = React.useState("");
  const [gen, setGen] = React.useState(false);
  const [repCard, setRepCard] = React.useState(false);
  const [modal, setModal] = React.useState(false);
  const [mIn, setMIn] = React.useState(false);
  const [bars, setBars] = React.useState(false);
  const [tip, setTip] = React.useState(-1);
  const [n, setN] = React.useState(0);
  const chatRef = React.useRef(null);
  const repBodyRef = React.useRef(null);

  React.useEffect(() => {
    const T = []; const p = (f,m)=>T.push(setTimeout(f,m));
    setPhase("proc"); setLitChip(-1); setTyped(""); setAns(false); setALi(0); setTyped2(""); setGen(false); setRepCard(false); setModal(false); setMIn(false); setBars(false); setTip(-1);
    p(()=>setTip(0), 700);
    p(()=>setPhase("selia"), 3200);
    p(()=>setTip(1), 3600);
    p(()=>setLitChip(0), 4600);              // "click" first chip
    p(()=>{setPhase("ask");}, 5100);
    p(()=>setTip(2), 5300);
    for (let i=1;i<=Q.length;i++) p(()=>setTyped(Q.slice(0,i)), 5300+i*22);
    const qe = 5300 + Q.length*22;
    p(()=>setPhase("answer"), qe+300);
    p(()=>setAns(true), qe+1700);
    for (let i=1;i<=PT_CONTRIB.length;i++) p(()=>setALi(i), qe+2200+i*1000);
    const ae = qe+2200+PT_CONTRIB.length*1000;
    // second exchange: generate report
    p(()=>setPhase("ask2"), ae+1200);
    for (let i=1;i<=Q2.length;i++) p(()=>setTyped2(Q2.slice(0,i)), ae+1200+i*20);
    const q2e = ae+1200+Q2.length*20;
    p(()=>setGen(true), q2e+300);
    p(()=>{setGen(false); setRepCard(true); setTip(3);}, q2e+2200);
    p(()=>{setModal(true);}, q2e+3400);
    p(()=>setMIn(true), q2e+3450);
    p(()=>setBars(true), q2e+4000);
    p(()=>setN(x=>x+1), q2e+13500);
    return ()=>T.forEach(clearTimeout);
  }, [n]);

  React.useEffect(()=>{ const c=chatRef.current; if(c) c.scrollTop = c.scrollHeight; }, [aLi, typed, typed2, gen, repCard]);

  // auto-scroll the report modal to reveal chart + table
  React.useEffect(()=>{
    if(!mIn) return; const el=repBodyRef.current; if(!el) return;
    let raf, start;
    const begin=setTimeout(()=>{
      const dur=6000;
      const step=(t)=>{ if(!start) start=t; const p=Math.min(1,(t-start)/dur); const max=el.scrollHeight-el.clientHeight; el.scrollTop=max*(p<0.5?2*p*p:1-Math.pow(-2*p+2,2)/2); if(p<1) raf=requestAnimationFrame(step); };
      raf=requestAnimationFrame(step);
    }, 1200);
    return ()=>{ clearTimeout(begin); if(raf) cancelAnimationFrame(raf); };
  }, [mIn]);

  const isSelia = phase!=="proc";
  const tips = (<>{PT_TIPS.map((t,i)=>(
    <div key={i} className={"ph-tip "+t.corner+(tip===i?" show":"")}><span className="tic"><LandIcon name={t.icon} size={15}/></span><span className="ttx">{t.label}</span><span className="ttag">{t.tag}</span></div>
  ))}</>);

  return (
    <PhoneShell badge="1" tips={tips}>
      <div className="ph-pt">
        <div className="ph-pttabs">
          <span className={"ph-pttab"+(!isSelia?" on":"")}>Processo</span>
          <span className={"ph-pttab"+(isSelia?" on":"")}>SELIA</span>
        </div>
        <div className="ph-ptbody">
          {!isSelia && (
            <div className="ph-ptscroll">
              <div className="ph-ptbc">Participação Social <LandIcon name="chevright" size={13}/> <b>Consulta Pública 010/2026</b></div>
              <div className="ph-ptcard">
                <div className="h">Consulta Pública 010/2026</div>
                <div className="ph-ptbadges"><span className="ph-ptbadge" style={{background:"rgba(31,108,217,0.12)",color:"#1f6cd9"}}>Consulta Pública</span><span className="ph-ptbadge" style={{background:"#eef0f2",color:"#5a6068"}}>Encerrada</span></div>
                <div className="ph-ptacts"><span className="ph-ptact"><LandIcon name="refresh" size={18}/></span><span className="ph-ptact"><LandIcon name="share" size={18}/></span><span className="ph-ptact"><LandIcon name="bell" size={18}/></span><span className="ph-ptact vsite"><LandIcon name="arrow" size={15}/>Ver Site ANEEL</span></div>
                <div className="ph-ptobj">obter subsídios para aprimorar a proposta referente à Revisão Tarifária Periódica de 2026 da Energisa Sul-Sudeste – Distribuidora de Energia S.A. – ESS, a vigorar a partir de 12 de julho de 2026.</div>
                <div className="ph-ptmeta"><span><b>Modalidade:</b> Intercâmbio Documental</span></div>
                <div className="ph-ptmeta"><LandIcon name="newspaper" size={15}/><span><b>Período:</b> 24/04/2026 a 08/06/2026</span></div>
                <div className="ph-ptmeta"><LandIcon name="mail" size={15}/><span><b>Email:</b> <span className="lk">cp010_2026rv@aneel.gov.br</span></span></div>
              </div>
              <div className="ph-ptsei">
                <div className="t"><div className="ico"><LandIcon name="filesearch" size={18}/></div><div><div className="h2">Este processo gerou documentos no SEI</div><div className="s">Processo SEI: 48500030071202599 — Explore os documentos oficiais na SELIA</div></div></div>
                <div className="btn">Ver no SEI <LandIcon name="arrow" size={15}/></div>
              </div>
            </div>
          )}

          {isSelia && (
            <div className="ph-ptselia">
              <div className="ph-ptshead"><div className="ico"><LandIcon name="sparkles" size={17}/></div><div style={{flex:1}}><div className="nm">SELIA</div><div className="sub">Consulta Pública 010/2026</div></div><span className="ic2"><LandIcon name="history" size={18}/></span><span className="ic2" style={{marginLeft:10}}><LandIcon name="x" size={18}/></span></div>
              <div className="ph-ptsbody" ref={chatRef} style={{overflow:"hidden"}}>
                {phase==="selia" && (
                  <>
                    <div className="ph-ptwelcome"><div className="lg"><LandIcon name="sparkles" size={28}/></div><div className="t">SELIA</div><div className="s">Pergunte sobre este processo de participação social</div></div>
                    {PT_CHIPS.map((c,i)=>(<div key={i} className={"ph-ptchip"+(litChip===i?" lit":"")}>{c}</div>))}
                  </>
                )}
                {(phase==="ask"||phase==="answer"||phase==="ask2"||phase==="report") && (
                  <>
                    <div className="ph-ptq"><div className="b">{phase==="ask"?typed:Q}{phase==="ask"&&typed.length<Q.length&&<span className="ph-caret"/>}</div><div className="av">MH</div></div>
                    {(phase==="answer"||phase==="ask2"||phase==="report") && (
                      <div className="ph-pta"><div className="av"><LandIcon name="sparkles" size={17}/></div><div style={{flex:1,minWidth:0}}>
                        <div className="nm">SEL.IA</div>
                        {!ans ? <div className="ph-think"><i/><i/><i/></div> : <>
                          <p className="ph-ptp">Na fase de <b>Contribuições</b> houve <b>12 manifestações</b> — predominância de apoio, com ressalvas sobre <b>prazo, ônus e salvaguardas</b>.</p>
                          <div style={{display:"flex",alignItems:"center",gap:8,margin:"4px 0 10px",fontSize:12.5,fontWeight:700,color:"#9aa0a6",letterSpacing:"0.03em",textTransform:"uppercase"}}><LandIcon name="briefcase" size={14} style={{color:"#d91965"}}/>{aLi} de 12 manifestações analisadas</div>
                          <div style={{display:"flex",flexDirection:"column",gap:9}}>
                            {PT_CONTRIB.slice(0,aLi).map((c,i)=>(
                              <div key={i} className="ph-ptcontrib" style={{display:"flex",gap:11,alignItems:"flex-start"}}>
                                <div className={"ph-ptorg"+(i===aLi-1?" new":"")} style={{background:c.c}}>{c.ini}</div>
                                <div style={{flex:1,minWidth:0}}>
                                  <div style={{display:"flex",alignItems:"center",gap:7,flexWrap:"wrap"}}><span style={{fontSize:14.5,fontWeight:700,color:"#102b4e"}}>{c.org}</span><span style={{fontSize:11,fontWeight:700,padding:"2px 9px",borderRadius:9999,background:c.c+"22",color:c.c}}>{c.stance}</span></div>
                                  <div style={{fontSize:13.5,lineHeight:1.45,color:"#5a6068",marginTop:3}}>{c.t}</div>
                                </div>
                              </div>
                            ))}
                          </div>
                        </>}
                      </div></div>
                    )}
                    {(phase==="ask2"||phase==="report") && typed2 && (
                      <div className="ph-ptq"><div className="b">{typed2}{phase==="ask2"&&typed2.length<Q2.length&&<span className="ph-caret"/>}</div><div className="av">MH</div></div>
                    )}
                    {(gen||repCard) && (
                      <div className="ph-pta"><div className="av"><LandIcon name="sparkles" size={17}/></div><div style={{flex:1,minWidth:0}}>
                        {gen ? <div className="ph-ptgen"><span className="sp"/>Gerando relatório…</div> : <>
                          <p className="ph-ptp" style={{marginBottom:8}}>Preparei o relatório para apresentação executiva da diretoria:</p>
                          <div className="ph-ptrep"><div className="ric"><LandIcon name="filetext" size={18}/></div><div style={{flex:1,minWidth:0}}><div className="rn">Relatório gerencial — resumo das contribuições</div><div className="rm">Pronto para apresentação · Abrir relatório</div></div><LandIcon name="arrow" size={16} className="ra"/></div>
                        </>}
                      </div></div>
                    )}
                  </>
                )}
              </div>
              <div className="ph-ptinput"><div className="ph-ptinbox"><div className="f">Pergunte sobre este processo de participação social…</div><div className="s"><LandIcon name="send" size={18}/></div></div></div>
            </div>
          )}

          {/* report modal */}
          {modal && (
            <div className={"ph-ptmodal"+(mIn?" in":"")}>
              <div className="ph-ptmhead"><span className="t">Relatório gerencial</span><span className="dl"><LandIcon name="filetext" size={13}/>Baixar</span><span className="cl">Fechar</span></div>
              <div className="ph-ptmbody" ref={repBodyRef}>
                <div className="ph-ptmhero"><div className="h">Relatório gerencial – resumo das contribuições</div><div className="s">Consulta Pública 010/2026 · Fase de Contribuições · 12 manifestações analisadas</div></div>
                <div className="ph-ptmmsg"><b>Mensagem principal:</b> houve apoio majoritário ao objetivo regulatório, mas com divergência relevante sobre o alcance do direito de ajuste do CUST, especialmente quanto a prazo, efeitos por ciclo tarifário e ausência de ônus.</div>
                <div className="ph-ptmstat" style={{borderTopColor:"#d91965"}}><div className="lab">Contribuições</div><div className="num">12</div><div className="sub">manifestações na fase</div></div>
                <div className="ph-ptmstat" style={{borderTopColor:"#102b4e"}}><div className="lab">Apoio predominante</div><div className="num">9</div><div className="sub">favoráveis ou com ressalvas</div></div>
                <div className="ph-ptmstat" style={{borderTopColor:"#ef9b3f"}}><div className="lab">Tema crítico</div><div className="num">3</div><div className="sub">eixos: prazo, ônus e garantias</div></div>
                <div className="ph-ptmh2">Distribuição qualitativa das posições</div>
                <div className="ph-ptbars">{PT_BARS.map((b,i)=>(<div className="ph-ptbar" key={i}><div className="bar" style={{height:bars?(b[1]/6*100)+"%":"0%",background:b[2]}}/><span className="bl">{b[0]}</span></div>))}</div>
                <div className="ph-ptmh2">Leitura executiva por grupo de posição</div>
                <table className="ph-pttable"><thead><tr><th>Grupo</th><th>Entidades</th><th>Síntese</th></tr></thead><tbody>
                  {PT_TABLE.map((r,i)=>(<tr key={i}><td className="g">{r[0]}</td><td className="e">{r[1]}</td><td>{r[2]}</td></tr>))}
                </tbody></table>
              </div>
              <div className="ph-ptmfoot"><span className="b"><LandIcon name="filetext" size={14}/>Exportar PDF</span></div>
            </div>
          )}
        </div>
      </div>
    </PhoneShell>
  );
};
window.PhonePart = PhonePart;