/* SEL.IA — Phone mockup. Mobile hero. Native 390-wide, downscale-only.
   Screen 1: Chat Regulatório (faithful to prints) with full animation. */

const PH_TIPS = [
  { icon:"zap", label:"Deep Search varre todas as fontes em segundos", tag:"IA", corner:"bl" },
  { icon:"sparkles", label:"Resposta com fontes auditáveis", tag:"IA", corner:"tr" },
  { icon:"book", label:"Cada citação com link à norma", tag:"Auditável", corner:"br" },
];

const PH_REFS = [
  { doc:"MÓDULO 3 — CONEXÃO AO SISTEMA DE DISTRIBUIÇÃO", sec:"Seção 3.0 Introdução", q:"# Seção 3.0 Introdução ## Conteúdo 1. Além desta seção introdutória, este módulo está estruturado da seguinte forma…" },
  { doc:"MÓDULO 3 — CONEXÃO AO SISTEMA DE DISTRIBUIÇÃO", sec:"Seção 3.1 Requisitos para Conexão de Microgeração", q:"6. A solicitação de conexão deve ser realizada por meio do formulário padronizado, acompanhada da documentação…" },
  { doc:"MÓDULO 5 — SISTEMAS DE MEDIÇÃO", sec:"Seção 5.2 Prazos de instalação", q:"Os prazos de instalação do sistema de medição observam a tipologia da unidade consumidora e a complexidade…" },
  { doc:"MÓDULO 6 — INFORMAÇÕES REQUERIDAS E OBRIGAÇÕES", sec:"Seção 6.3 Acesso ao sistema", q:"22. A distribuidora deve encaminhar à ANEEL os registros relativos aos processos de conexão de acessantes…" },
  { doc:"REN 1.000/2021 — Regras de Prestação", sec:"Título III — Atendimento", q:"Os prazos de ligação e religação observam a modalidade de atendimento e a tipologia da unidade consumidora…" },
];

const PhoneChat = () => {
  const Q = "O que o PRODIST diz sobre prazos de ligação?";
  const A = "O PRODIST trata prazos de ligação (conexão/energização) distribuindo responsabilidades e prazos entre etapas (solicitação, vistoria, projeto/instalação do sistema de medição, comissionamento e cadastro). Muitos prazos são específicos por tipologia de conexão e remetem às Regras de Prestação do Serviço Público de Distribuição de Energia Elétrica (ex.: REN 1.000).";
  const [typed, setTyped] = React.useState(""); const [step, setStep] = React.useState(0);
  const [aTyped, setATyped] = React.useState(""); const [actions, setActions] = React.useState(false);
  const [zoom, setZoom] = React.useState(false); const [modal, setModal] = React.useState(false);
  const [mIn, setMIn] = React.useState(false); const [hi, setHi] = React.useState(-1); const [n, setN] = React.useState(0);
  const [tip, setTip] = React.useState(-1);
  const refsBox = React.useRef(null), cardRefs = React.useRef([]), scrollRef = React.useRef(null);

  React.useEffect(() => {
    const T = []; const p = (f,m)=>T.push(setTimeout(f,m));
    setTyped("");setStep(0);setATyped("");setActions(false);setZoom(false);setModal(false);setMIn(false);setHi(-1);setTip(-1);
    for(let i=1;i<=Q.length;i++) p(()=>setTyped(Q.slice(0,i)), 500+i*30);
    const qe=500+Q.length*30; p(()=>setStep(1), qe+250); p(()=>setStep(2), qe+1300);
    for(let i=1;i<=A.length;i++) p(()=>setATyped(A.slice(0,i)), qe+1300+i*12);
    const ae=qe+1300+A.length*12; p(()=>setStep(3), ae+150); p(()=>setActions(true), ae+700); p(()=>setZoom(true), ae+1600);
    const ma=ae+2900; p(()=>{setZoom(false);setModal(true);}, ma); p(()=>setMIn(true), ma+50);
    for(let i=0;i<PH_REFS.length;i++) p(()=>setHi(i), ma+700+i*900);
    // timed didactic tooltips (one at a time, synced to the beats)
    p(()=>setTip(0), qe+600);            // thinking → deep search
    p(()=>setTip(1), ae+300);            // answer → fontes auditáveis
    p(()=>setTip(2), ma+200);            // modal → citações com link
    p(()=>setTip(-1), ma+700+PH_REFS.length*900);
    p(()=>setN(x=>x+1), ma+700+PH_REFS.length*900+2200);
    return ()=>T.forEach(clearTimeout);
  }, [n]);

  // scroll the chat so the latest content stays in view (vertical)
  React.useEffect(()=>{ const s=scrollRef.current; if(s){ s.style.transform = `translateY(${-Math.min(step>=3?(aTyped.length/A.length)*150:0, 150)}px)`; } }, [aTyped, step]);
  React.useEffect(()=>{ if(hi<0) return; const c=cardRefs.current[hi], l=refsBox.current; if(c&&l){ const cr=c.getBoundingClientRect(), lr=l.getBoundingClientRect(); l.scrollTop += (cr.top-lr.top)-14; } }, [hi]);

  const tips = (
    <>
      {PH_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-subrow">
        <span className="hist"><LandIcon name="history" size={16}/>Histórico</span>
        <span className="cur">Chat Regulatório</span>
      </div>
      <div className="ph-body">
        <div className="ph-scroll"><div className="ph-scrollinner" ref={scrollRef}>
          <div className="ph-chat">
            {step>=1 && <>
              <div className="ph-ts">13:18</div>
              <div className="ph-urow"><div className="ph-ubub">{typed}{typed.length<Q.length && <span className="ph-caret"/>}</div><div className="ph-uav">MH</div></div>
            </>}
            {step>=2 && (
              <div className="ph-airow"><div className="ph-aiav">AI</div><div style={{flex:1,minWidth:0}}>
                <div className="ph-aihead"><span className="nm">SEL.IA</span><span className="deep"><LandIcon name="sparkles" size={11}/>Deep Search</span><span className="ts">13:18</span></div>
                {step===2 ? <div className="ph-think"><i/><i/><i/></div> : (
                  <div className="ph-ans">
                    <h>Resumo rápido</h>
                    <p>{renderBold(aTyped)}{aTyped.length<A.length && <span className="ph-caret"/>}</p>
                    {step>=3 && aTyped.length>=A.length && (
                      <div className={"ph-actions"+(actions?" show":"")}>
                        <span className="ph-abtn"><LandIcon name="copy" size={20}/></span>
                        <span className="ph-abtn"><LandIcon name="thumbup" size={20}/></span>
                        <span className="ph-abtn"><LandIcon name="thumbdown" size={20}/></span>
                        <span className={"ph-abtn src"+(zoom?" zoom":"")}><LandIcon name="book" size={20}/></span>
                        <span className="ph-abtn"><LandIcon name="dots" size={20}/></span>
                      </div>
                    )}
                  </div>
                )}
              </div></div>
            )}
          </div>
        </div></div>
      </div>

      <div className="ph-input">
        <div className="ph-inbox"><div className="field">Digite sua mensagem…</div><div className="send"><LandIcon name="send" size={18}/></div></div>
        <div className="ph-deeppill"><LandIcon name="search" size={15}/>Deep Search</div>
        <div className="ph-disc">SEL.IA pode cometer erros. Verifique informações importantes.</div>
      </div>

      {modal && (
        <div className={"ph-ov"+(mIn?" in":"")}>
          <div className="ph-sheet">
            <div className="ph-shead"><div className="t"><LandIcon name="filetext" size={19}/>Fontes e Referências</div><div className="s">Documentos e normas utilizados para fundamentar esta resposta</div><span className="x"><LandIcon name="x" size={18}/></span></div>
            <div className="ph-smeta"><span className="c"><LandIcon name="layers" size={17}/>15 referências encontradas</span><span className="exp">Expandir todos</span></div>
            <div className="ph-srefs" ref={refsBox}>
              {PH_REFS.map((r,i)=>(
                <div key={i} ref={el=>cardRefs.current[i]=el} className={"ph-ref"+(hi===i?" hi":"")}>
                  <div className="rh"><div className="ic"><LandIcon name="book" size={16}/></div><div style={{flex:1,minWidth:0}}><div className="tt">{r.doc}</div><div className="se">{r.sec}</div></div><span className="chev"><LandIcon name="chevright" size={16} style={{transform:"rotate(90deg)"}}/></span></div>
                  <div className="qu">"{r.q}"</div>
                  <div className="vm">Ver conteúdo completo →</div>
                </div>
              ))}
            </div>
            <span className="ph-sclose">Fechar</span>
          </div>
        </div>
      )}
    </PhoneShell>
  );
};

/* render **bold** markers as <b> */
function renderBold(text) {
  const parts = text.split(/(\*\*[^*]+\*\*)/g);
  return parts.map((p, i) => p.startsWith("**") && p.endsWith("**") ? <b key={i}>{p.slice(2, -2)}</b> : <React.Fragment key={i}>{p}</React.Fragment>);
}

/* shared phone shell: device frame + top app bar. `tips` render at stage level
   (outside the device) so corner tooltips can overhang into the gutter. */
const PhoneShell = ({ children, badge, tips }) => (
  <div className="ph-stage">
    <div className="ph-device">
      <div className="ph-screen">
        <div className="ph-notch"/>
        <div className="ph-top">
          <span className="burger"><i/><i/><i/></span>
          <span className="logo"><span className="mk"><LandIcon name="sparkles" size={17}/></span>SEL<span className="ia">.IA</span></span>
          <span className="sp"/>
          <span className="bell"><LandIcon name="bell" size={20}/>{badge && <span className="bdg">{badge}</span>}</span>
          <span className="me"><span className="av">MH</span><span className="cv"><LandIcon name="chevright" size={12} style={{transform:"rotate(90deg)"}}/></span></span>
        </div>
        {children}
      </div>
    </div>
    {tips}
  </div>
);

const PH_SCREENS = [
  { id:"chat", label:"Chat Regulatório", icon:"message", dur:19500 },
  { id:"sei",  label:"Processo SEI", icon:"filesearch", dur:21000 },
  { id:"dir",  label:"Painel da Diretoria", icon:"users", dur:27500 },
  { id:"part", label:"Participação Social", icon:"clipboard", dur:31500 },
];

/* Full phone mockup: 4 screens auto-rotating + selector pills below the device
   (clickable, hover pauses) — same pattern as the notebook. */
const PhoneMockup = ({ light }) => {
  const [s, setS] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [run, setRun] = React.useState(0);
  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setS(v => (v + 1) % PH_SCREENS.length), PH_SCREENS[s].dur);
    return () => clearTimeout(t);
  }, [s, paused, run]);
  const go = (i) => { setS(i); setRun(r => r + 1); };
  const Scr = [PhoneChat, window.PhoneSei, window.PhoneDir, window.PhonePart][s] || PhoneChat;
  return (
    <div className={"ph-outer"+(light?" light":"")}>
      <div key={s+"-"+run}><Scr/></div>
      <div className="ph-tabs">
        <div className="ph-hint">Clique para alternar as telas — ou veja girar sozinho</div>
        {PH_SCREENS.map((v,i)=>(
          <button key={v.id} className={"ph-tab"+(s===i?" on":"")} onClick={()=>go(i)}>
            <span className="bul"/><LandIcon name={v.icon} size={14}/>{v.label}
          </button>
        ))}
      </div>
    </div>
  );
};
window.PhoneMockup = PhoneMockup;
window.PhoneChat = PhoneChat;