/* SEL.IA — Phone SEI screen. Faithful to prints, notebook roteiro:
   header → timeline walk + doc summary → docs converge into AI wheel → consolidated overview. */

const PHS_TL = [
  { d:"03/06/26", t:"Memorando", ic:"newspaper", c:"#2563eb" },
  { d:"05/06/26", t:"Voto", ic:"filetext", c:"#7c3aed" },
  { d:"08/06/26", t:"Despacho", ic:"newspaper", c:"#16a34a" },
  { d:"09/06/26", t:"Memória", ic:"filetext", c:"#d91965" },
];
const PHS_SUM = "Processo 48500.003331/2024-72 — reunião realizada em 03/06/2026 às 16h: ENEL SP apresentou defesa no procedimento ligado ao Termo de Intimação nº 49/2024, sobre falhas no fornecimento após eventos climáticos extremos.";
const PHS_WCHIPS = [
  { l:"Memória", c:"#d91965", tx:-110, ty:-92 }, { l:"Voto", c:"#7c3aed", tx:96, ty:-96 },
  { l:"Despacho", c:"#16a34a", tx:-128, ty:-8 }, { l:"Parecer", c:"#ef9b3f", tx:120, ty:-2 },
  { l:"Nota Téc.", c:"#0ea5b7", tx:-92, ty:80 }, { l:"Decisório", c:"#2563eb", tx:92, ty:84 },
  { l:"Memorando", c:"#2563eb", tx:0, ty:-118 }, { l:"Ofício", c:"#16a34a", tx:0, ty:112 },
];
const PHS_FLY = [
  { c:"#d91965", l:"Memória" }, { c:"#7c3aed", l:"Voto" }, { c:"#2563eb", l:"Memorando" },
  { c:"#16a34a", l:"Despacho" }, { c:"#ef9b3f", l:"Parecer" }, { c:"#0ea5b7", l:"Nota Téc." },
  { c:"#2563eb", l:"Decisório" }, { c:"#16a34a", l:"Ofício" },
];
const PHS_TIPS = [
  { icon:"filesearch", label:"Centenas de documentos por processo, indexados", tag:"SEI", corner:"tr" },
  { icon:"sparkles", label:"Resumo de cada documento gerado por IA", tag:"IA", corner:"bl" },
  { icon:"sparkles", label:"IA analisa todos os docs e gera a visão geral", tag:"IA", corner:"br" },
];

const PhoneSei = () => {
  const [active, setActive] = React.useState(0);
  const [sum, setSum] = React.useState("");
  const [phase, setPhase] = React.useState("walk"); // walk → complete → compile → done
  const [wIn, setWIn] = React.useState(false);
  const [wMerge, setWMerge] = React.useState(false);
  const [ovLi, setOvLi] = React.useState(0);
  const [tip, setTip] = React.useState(-1);
  const [n, setN] = React.useState(0);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const T = []; const p = (f,m)=>T.push(setTimeout(f,m));
    setActive(0); setSum(""); setPhase("walk"); setWIn(false); setWMerge(false); setOvLi(0); setTip(-1);
    p(()=>setTip(0), 500);
    for (let i=1;i<=PHS_TL.length-1;i++) p(()=>setActive(i), 700+i*850);
    const we = 700 + (PHS_TL.length-1)*850 + 500;
    p(()=>setSum(" "), we);
    for (let i=1;i<=PHS_SUM.length;i++) p(()=>setSum(PHS_SUM.slice(0,i)), we+i*14);
    const se = we + PHS_SUM.length*14;
    p(()=>setTip(1), we+400);
    // complete the purple line (all processed), still same screen
    p(()=>setPhase("complete"), se+900);
    // docs lift from the timeline row and orbit the core (continuous)
    p(()=>{setPhase("compile"); setTip(2);}, se+1900);
    p(()=>setWIn(true), se+2050);
    // consolidated overview
    p(()=>setPhase("done"), se+5200);
    for (let i=1;i<=7;i++) p(()=>setOvLi(i), se+4900+i*420);
    p(()=>setN(x=>x+1), se+4900+7*420+3500);
    return ()=>T.forEach(clearTimeout);
  }, [n]);

  React.useEffect(()=>{ const s=scrollRef.current; if(s && phase==="walk"){ s.scrollTop = s.scrollHeight; } }, [sum, phase]);

  const synth = phase==="compile" || phase==="done";
  const tips = (<>{PHS_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-body">
        <div className="ph-scroll" ref={scrollRef} style={{overflow:"hidden"}}>
          <div className="ph-sei">
            <div className="ph-back"><LandIcon name="arrow" size={17} style={{transform:"rotate(180deg)"}}/>Voltar para busca</div>
            <div className="ph-seibadge"><LandIcon name="filesearch" size={14}/>Processo SEI · <b>48500.903331/2024-72</b></div>

            {/* process header */}
            <div className="ph-pcard">
              <div className="pn">48500.903331/2024-72</div>
              <div className="ph-stbadge">Em andamento</div>
              <div className="ptipo">Fiscalização da Distribuição: Processo Administrativo Sancionador</div>
              <div className="ph-pacts">
                <span className="ph-pact"><LandIcon name="refresh" size={18}/></span>
                <span className="ph-pact"><LandIcon name="share" size={18}/></span>
                <span className="ph-pact bell"><LandIcon name="bell" size={18}/></span>
                <span className="ph-pact"><LandIcon name="filetext" size={18}/></span>
                <span className="ph-pact vsei"><LandIcon name="arrow" size={15}/>Ver no SEI</span>
              </div>
              <div className="ph-pdesc">Apuração de falhas da Enel SP na recomposição do fornecimento após eventos climáticos extremos, com verificação de medidas estruturais e possível recomendação de caducidade da concessão.</div>
            </div>

            {/* timeline */}
            <div className="ph-tlcard">
              <div className="ph-tltitle">Linha do Tempo do Processo</div>
              <div className="ph-tlsub">{synth ? "381 documentos · sintetizando…" : "381 documentos (158 com resumo)"}</div>
              <div className="ph-tlctrl"><span className="tog"/><span className="sp"><LandIcon name="sparkles" size={14}/></span>Somente com resumo</div>
              <div className="ph-tltrack">
                {PHS_TL.map((d,i)=>{ const on=!synth&&i===active, past=synth||i<active; return (
                  <div key={i} className={"ph-tlnode"+(on?" on":"")+(past?" past":"")} style={{"--nc":d.c}}>
                    <span className="bar"/><div className="dot"><LandIcon name={d.ic} size={16}/></div>
                    <div className="d">{d.d}</div><div className="ty">{d.t}</div>
                  </div>
                );})}
              </div>
            </div>

            {/* doc summary */}
            {!synth && (
              <div className="ph-doccard">
                <div className="ph-docmeta"><span className="ph-doctag">Memória</span><span className="ph-docdate">9 de junho de 2026</span><span className="ph-docpag"><LandIcon name="chevright" size={14} style={{transform:"rotate(180deg)"}}/>381 / 381<LandIcon name="chevright" size={14}/></span></div>
                <div className="ph-doch">Reunião de 03/06/2026 — defesa da ENEL SP</div>
                <div className="ph-dockick"><LandIcon name="sparkles" size={13}/>Resumo do documento por IA</div>
                <div className="ph-docsum">{sum.trim()}{phase==="walk"&&sum.length<PHS_SUM.length&&sum.length>0&&<span className="ph-caret"/>}</div>
                {sum.length>=PHS_SUM.length && <div className="ph-docvm">Ver mais</div>}
              </div>
            )}
          </div>
        </div>

        {/* AI wheel — docs lift from the timeline row and orbit the core (continuous) */}
        {synth && (
          <div className={"ph-synth"+(phase==="compile"?" spin":"")}>
            <div className="ph-syprocno"><LandIcon name="filesearch" size={13}/>Processo SEI · <b>48500.903331/2024-72</b></div>
            <div className="ph-syring">
              <div className={"ph-sycore"+(wIn?" on":"")}><LandIcon name="sparkles" size={30}/></div>
              {PHS_FLY.map((d,i)=>(
                <span key={i} className={"ph-fly"+(wIn?" orbit":"")} style={{color:d.c,"--rowx":((i+0.5)/PHS_FLY.length*100)+"%","--a":(i/PHS_FLY.length)+"turn",transitionDelay:(wIn?i*60:0)+"ms"}}><LandIcon name="newspaper" size={15}/></span>
              ))}
            </div>
            <div className="ph-sycap" style={{opacity:wIn?1:0}}>Reunindo os documentos da linha do tempo<span className="d3"><i/><i/><i/></span></div>
          </div>
        )}

        {/* consolidated overview */}
        {phase==="done" && (
          <div className="ph-ov2">
            <div className="ph-ov2head"><div className="ic"><LandIcon name="sparkles" size={20}/></div><div><div className="t1">Visão Geral do Processo</div><div className="t2">Resumo do processo gerado por IA</div></div></div>
            <div className="ph-ov2body">
              <div className="ph-ov2title">RELATÓRIO TÉCNICO CONSOLIDADO</div>
              <div className="ph-ov2meta">Processo SEI nº 48500903331202472<br/>Tema: <b>Fiscalização da Distribuição: Processo Administrativo Sancionador</b></div>
              <div className="ph-ov2div"/>
              <div className="ph-ov2sec">1. Identificação</div>
              {ovLi>=1 && <div className="ph-ov2li"><span className="dt"/><span><b>Número do processo:</b> 48500903331202472</span></div>}
              {ovLi>=2 && <div className="ph-ov2li sub"><span className="dt"/><span>Número SEI associado: 48500.903331/2024-72</span></div>}
              {ovLi>=3 && <div className="ph-ov2li"><span className="dt"/><span><b>Tipo:</b> Fiscalização da Distribuição: Processo Administrativo Sancionador</span></div>}
              {ovLi>=4 && <div className="ph-ov2li"><span className="dt"/><span><b>Unidade responsável:</b> Superintendência de Fiscalização Técnica dos Serviços de Energia Elétrica (SFT)</span></div>}
              {ovLi>=5 && <div className="ph-ov2li"><span className="dt"/><span><b>Partes envolvidas:</b></span></div>}
              {ovLi>=6 && <div className="ph-ov2li sub"><span className="dt"/><span>Parte interessada principal: ELETROPAULO METROPOLITANA ELETRICIDADE DE SÃO PAULO S.A. (ENEL SP)</span></div>}
              {ovLi>=7 && <div className="ph-ov2li sub"><span className="dt"/><span>Outras partes: ARSESP, Ministério de Minas e Energia (MME)</span></div>}
            </div>
          </div>
        )}
      </div>
    </PhoneShell>
  );
};
window.PhoneSei = PhoneSei;