/* SEL.IA — Phone Diretoria screen. Roteiro: Todos (donut 14608) → open list →
   select Agnes (click) → Agnes (donut 2152) → Chat → question → speech summary. */

const DIR_DON_ALL = [["Geração",44.9,"#d91965"],["Transmissão",23.4,"#1f6cd9"],["Distribuição",16.9,"#102b4e"],["Comercialização",6.3,"#5bb3e6"],["Tarifa",5.8,"#ef9b3f"],["Outros",2.7,"#aab0b6"]];
const DIR_DON_AG = [["Geração",52.8,"#d91965"],["Transmissão",20.7,"#1f6cd9"],["Distribuição",15.0,"#102b4e"],["Comercialização",4.9,"#5bb3e6"],["Tarifa",4.2,"#ef9b3f"],["Outros",2.3,"#aab0b6"]];
const DIR_ATOS = [["Resolução Autorizativa",45.1,"#d91965"],["Despacho",31.6,"#102b4e"],["Não informado",14.4,"#c3c8cf"],["Resolução Homologatória",4.0,"#1f6cd9"],["Outros",4.9,"#aab0b6"]];
const DIR_LIST = [
  { ini:"AM", nm:"Agnes Maria de Aragão da Costa", rl:"Diretora", mt:"Mandato: 2022-2028", pr:"2.152", mo:"6", cls:"am" },
  { ini:"FL", nm:"Fernando Luiz Mosna Ferreira da Silva", rl:"Diretor", mt:"Mandato: 2022-2026", pr:"2.171", mo:"4", c:"#102b4e" },
  { ini:"GN", nm:"Gentil Nogueira de Sá Júnior", rl:"Diretor", mt:"Mandato: N/A", pr:"186", mo:"11", c:"#5a8e3a" },
];
const DIR_ANS = [
  { k:"h", t:"Resumo das Falas de Agnes — Geração Distribuída" },
  { k:"li", t:"Cautela com subsídios cruzados da GD entre consumidores." },
  { k:"li", t:"Defesa de uma transição gradual nas regras de compensação (REN 1.000)." },
  { k:"li", t:"Ênfase em sinal locacional e justiça tarifária." },
  { k:"li", t:"Voto majoritariamente alinhado à área técnica nos processos de GD." },
  { k:"qh", t:"Exemplo de Citação Literal" },
  { k:"q", t:"“…é preciso calibrar o incentivo à geração distribuída sem transferir custos indevidos aos demais consumidores; a transição prevista na REN 1.000 e o sinal locacional ajudam a equilibrar essa conta.” — Agnes, 9º RPO, 5/5/2026" },
];

const DIR_TIPS = [
  { icon:"users", label:"Perfil e estatísticas de cada diretor", tag:"Painel", corner:"tr" },
  { icon:"grid", label:"Distribuição de processos por tema", tag:"Análise", corner:"bl" },
  { icon:"message", label:"Pergunte sobre as falas de cada diretor", tag:"IA", corner:"br" },
  { icon:"sparkles", label:"Resumo das falas com citações literais", tag:"Auditável", corner:"tr" },
];

const donutGrad = (data) => {
  let acc = 0; const stops = data.map(([,v,c]) => { const a = acc; acc += v; return `${c} ${a}% ${acc}%`; });
  return `conic-gradient(${stops.join(",")})`;
};

const DonutSVG = ({ data, num }) => {
  let acc = 0;
  return (
    <div className="ph-donut">
      <svg viewBox="0 0 42 42">
        <circle className="ring" cx="21" cy="21" r="15.915"/>
        {data.map(([,v,c],i)=>{ const off = acc; acc += v; return (
          <circle key={i} cx="21" cy="21" r="15.915" fill="none" stroke={c} strokeWidth="6"
            strokeDasharray={`${v} ${100-v}`} strokeDashoffset={25 - off}
            style={{transition:"stroke-dasharray 700ms ease, stroke-dashoffset 700ms ease"}}/>
        );})}
      </svg>
      <div className="hole"><div className="num">{num}</div><div className="lbl">processos</div></div>
    </div>
  );
};

const PhoneDir = () => {
  const Q = "Qual foi o padrão de votação desta diretora em relação ao tema de Geração Distribuída nas últimas reuniões da diretoria ANEEL?";
  const [phase, setPhase] = React.useState("all"); // all → list → agnes → chat → answer
  const [listIn, setListIn] = React.useState(false);
  const [click, setClick] = React.useState(false);
  const [hClick, setHClick] = React.useState(false);
  const [typed, setTyped] = React.useState("");
  const [ans, setAns] = React.useState(false);
  const [aLi, setALi] = React.useState(0);
  const [tip, setTip] = React.useState(-1);
  const [n, setN] = React.useState(0);
  const chatRef = React.useRef(null);

  React.useEffect(() => {
    const T = []; const p = (f,m)=>T.push(setTimeout(f,m));
    setPhase("all"); setListIn(false); setClick(false); setHClick(false); setTyped(""); setAns(false); setALi(0); setTip(-1);
    p(()=>setTip(0), 600);
    p(()=>setTip(1), 2600);
    p(()=>setHClick(true), 3300);              // "click" the select-directors header
    p(()=>setHClick(false), 4000);
    p(()=>{setPhase("list"); setListIn(true);}, 3900);
    p(()=>setClick(true), 5000);
    p(()=>setClick(false), 5900);
    p(()=>{setListIn(false);}, 5800);
    p(()=>setPhase("agnes"), 6300);
    p(()=>setPhase("chat"), 8800);
    p(()=>setTip(2), 9000);
    for (let i=1;i<=Q.length;i++) p(()=>setTyped(Q.slice(0,i)), 9300+i*22);
    const qe = 9300 + Q.length*22;
    p(()=>setPhase("answer"), qe+300);
    p(()=>{setAns(true); setTip(3);}, qe+1900);
    for (let i=1;i<=DIR_ANS.length;i++) p(()=>setALi(i), qe+2400+i*650);
    p(()=>setN(x=>x+1), qe+2400+DIR_ANS.length*650+3500);
    return ()=>T.forEach(clearTimeout);
  }, [n]);

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

  const sel = phase!=="all" && phase!=="list" ? true : phase==="list";
  const isChat = phase==="chat" || phase==="answer";
  const dirHeader = (phase==="all") ? {cls:"td",ini:"TD",nm:"Todos os Diretores",rl:"Visão consolidada"} : {cls:"am",ini:"AM",nm:"Agnes Maria de Aragão da Costa",rl:"Diretora"};
  const donutData = (phase==="all"||phase==="list") ? DIR_DON_ALL : DIR_DON_AG;
  const donutNum = (phase==="all"||phase==="list") ? "14.608" : "2.152";

  const tips = (<>{DIR_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-dir">
        <div className={"ph-dhead"+(hClick?" click":"")}>
          {hClick && <span className="ph-dtap" style={{left:"auto",right:24,top:30}}/>}
          <div className={"ph-dhav "+dirHeader.cls}>{dirHeader.ini}</div>
          <div style={{minWidth:0}}><div className="ph-dhname">{dirHeader.nm}</div><div className="ph-dhrole">{dirHeader.rl}</div></div>
          <span className="ph-dhchev"><LandIcon name="chevright" size={18}/></span>
        </div>
        <div className="ph-dtabs">
          {[["Visão","grid"],["Proc.","filetext"],["Chat","message"],["Trans.","newspaper"]].map((t,i)=>{
            const on = (isChat&&i===2)||(!isChat&&i===0);
            return <span key={i} className={"ph-dtab"+(on?" on":"")}><LandIcon name={t[1]} size={14}/>{t[0]}</span>;
          })}
        </div>

        <div className="ph-dbody">
          {!isChat && (
            <div className="ph-dscroll">
              <div className="ph-dtitle">{(phase==="all"||phase==="list")?"Todos os Diretores":"Agnes Maria de Aragão da Costa"} — Visão Geral</div>
              <div className="ph-card">
                <div className="ph-card-t">Distribuição de Processos por Tema</div>
                <div className="ph-donutwrap">
                  <DonutSVG data={donutData} num={donutNum}/>
                  <div className="ph-legend">
                    {donutData.map((d,i)=>(<div className="ph-leg" key={i}><span className="sw" style={{background:d[2]}}/>{d[0]} - {d[1].toFixed(1)}%</div>))}
                  </div>
                </div>
              </div>
              <div className="ph-card-t" style={{margin:"4px 0 12px"}}>Estatísticas do Período</div>
              <div className="ph-statgrid">
                <div className="ph-stat2"><div className="v" style={{color:"#d91965"}}>{donutNum}</div><div className="l">Processos Relatados</div></div>
                <div className="ph-stat2"><div className="v" style={{color:"#102b4e"}}>{(phase==="all"||phase==="list")?"26":"6"}</div><div className="l">Este Mês</div></div>
                <div className="ph-stat2"><div className="v" style={{color:"#1f9a66"}}>{(phase==="all"||phase==="list")?"14.364":"2.075"}</div><div className="sub" style={{color:"#1f9a66"}}>(99,3% de aprovação)</div><div className="l">Aprovados</div></div>
                <div className="ph-stat2"><div className="v" style={{color:"#d91965"}}>{(phase==="all"||phase==="list")?"108":"18"}</div><div className="sub" style={{color:"#d91965"}}>(0,8% de rejeição)</div><div className="l">Rejeitados</div></div>
              </div>
              <div className="ph-card" style={{marginTop:14}}>
                <div className="ph-card-t">Tipos de Atos Administrativos</div>
                {DIR_ATOS.map((a,i)=>(
                  <div className="ph-atorow" key={i}><span className="al">{a[0]}</span><span className="at"><span style={{width:(phase!=="all"?a[1]:0)+"%",background:a[2]}}/></span><span className="av">{a[1].toFixed(1)}%</span></div>
                ))}
              </div>
            </div>
          )}

          {isChat && (
            <div className="ph-dchat" ref={chatRef} style={{overflow:"hidden",height:"100%"}}>
              <div className="ph-dq"><div className="b">{typed}{phase==="chat"&&typed.length<Q.length&&<span className="ph-caret"/>}</div><div className="av">MH</div></div>
              {phase==="answer" && (
                <div className="ph-da"><div className="av">AI</div><div style={{flex:1,minWidth:0}}>
                  <div><span className="nm">SEL.IA</span><span className="ts">17:38</span></div>
                  {!ans ? <div className="ph-think" style={{marginTop:8}}><i/><i/><i/></div> : <>
                    {DIR_ANS.map((b,i)=> aLi>=i+1 ? (
                      b.k==="h" ? <div className="ph-dah ph-dablock" key={i}>{b.t}</div>
                      : b.k==="qh" ? <div className="ph-dablock" key={i} style={{fontSize:14,fontWeight:700,color:"#102b4e",margin:"10px 0 6px"}}>{b.t}</div>
                      : b.k==="q" ? <div className="ph-dquote ph-dablock" key={i}>{b.t}</div>
                      : <div className="ph-dap ph-dablock" key={i} style={{display:"flex",gap:9}}><span style={{width:6,height:6,borderRadius:9999,background:"#d91965",marginTop:9,flexShrink:0}}/><span>{b.t}</span></div>
                    ) : null)}
                  </>}
                </div></div>
              )}
            </div>
          )}

          {/* directors list overlay */}
          {(phase==="list") && (
            <div className={"ph-dlist"+(listIn?" in":"")}>
              <div className="ph-dlist-sheet">
                <span className="ph-dlist-x"><LandIcon name="x" size={18}/></span>
                <div className="ph-dlist-scroll">
                  <div className="ph-dtd"><div className="ph-dc-av" style={{background:"#1f9a66"}}>TD</div><div style={{flex:1}}><div className="ph-dc-nm">Todos os Diretores</div><div className="ph-dc-rl">Visão consolidada</div><div className="ph-dc-rl">Dados agregados de todos</div><div className="ph-dc-stats"><span><b>14608</b> Processos</span></div><div className="ph-dc-stats"><span><b>5</b> Ativos</span><span><b>17</b> Ex-diretores</span></div></div></div>
                  <div className="ph-dlabel"><LandIcon name="users" size={13}/>Diretores Ativos</div>
                  {DIR_LIST.map((d,i)=>(
                    <div key={i} className={"ph-dcard2"+(i===0?" sel":"")+(click&&i===0?" click":"")}>
                      {click&&i===0&&<span className="ph-dtap"/>}
                      <div className={"ph-dc-av"+(d.cls?" "+d.cls:"")} style={d.c?{background:d.c}:(d.cls==="am"?{background:"linear-gradient(135deg,#ef9b3f,#d91965)"}:null)}>{d.ini}</div>
                      <div style={{flex:1,minWidth:0}}><div className="ph-dc-nm">{d.nm}</div><div className="ph-dc-rl">{d.rl}</div><div className="ph-dc-mt">{d.mt}</div><div className="ph-dc-stats"><span><b>{d.pr}</b> Processos</span><span><b>{d.mo}</b> Este mês</span></div></div>
                    </div>
                  ))}
                </div>
                <div className="ph-dlist-foot">
                  <div className="ft"><LandIcon name="grid" size={15}/>Estatísticas Gerais</div>
                  <div className="fr"><span>Total de Processos:</span><b>14608</b></div>
                  <div className="fr"><span>Reuniões com Transcrições:</span><b>25</b></div>
                  <div className="fr"><span>Horas de Transcrição:</span><b>86h</b></div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </PhoneShell>
  );
};
window.PhoneDir = PhoneDir;