// AppFrame.jsx — fiel ao Parrot AI (sidebar + toolbar)
// Props:
//   tab: 'transcricao' | 'contexto'
//   transcript, suggestion
//   contextText (if tab===contexto)
//   showFerramentas, ferramentasHighlight: 'qr'|'stealth'|'overlay'|null
//   stealth (app fades to transparent)
//   recording
//   caretInContext (if typing context)

function AppFrame({
  tab='transcricao', transcript=[], suggestion=null,
  contextText='', caretInContext=false,
  showFerramentas=false, ferramentasHighlight=null,
  stealth=false, recording=false,
  sideActive='mic',
}){
  return (
    <div style={{
      width:'100%',height:'100%',
      background:'#ffffff',
      borderRadius:10,
      overflow:'hidden',
      display:'flex',flexDirection:'column',
      boxShadow:'0 30px 80px -20px rgba(13,27,50,0.35), 0 10px 24px -8px rgba(13,27,50,0.12)',
      border:'1px solid rgba(13,27,50,0.08)',
      fontFamily:'Inter, system-ui, sans-serif',
      color:'#0d1b32',
      position:'relative',
      opacity: stealth ? 0.0 : 1,
      transition:'opacity .45s ease',
    }}>
      {/* Windows title bar */}
      <div style={{height:28,background:'#1a1a1a',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 10px',color:'#c8c8c8',fontSize:11}}>
        <div style={{display:'flex',alignItems:'center',gap:6}}>
          <div style={{width:10,height:10,borderRadius:2,background:'#3b6fe8'}}/>
          Parrot AI
        </div>
        <div style={{display:'flex',gap:2,color:'#8a8a8a'}}>
          <span style={{width:28,textAlign:'center'}}>—</span>
          <span style={{width:28,textAlign:'center'}}>▢</span>
          <span style={{width:28,textAlign:'center'}}>✕</span>
        </div>
      </div>

      <div style={{flex:1,display:'flex',minHeight:0}}>
        {/* Sidebar */}
        <div style={{width:48,background:'#fafafa',borderRight:'1px solid #eceef2',display:'flex',flexDirection:'column',alignItems:'center',padding:'12px 0',gap:4}}>
          <div style={{width:32,height:32,borderRadius:8,background:'#3b6fe8',display:'grid',placeItems:'center',color:'#fff',fontWeight:700,fontSize:14,marginBottom:10}}>P</div>
          <SideIcon active={sideActive==='mic'}>🎤</SideIcon>
          <SideIcon active={sideActive==='ctx'}>📄</SideIcon>
          <SideIcon>🕑</SideIcon>
          <SideIcon>▦</SideIcon>
          <SideIcon>▥</SideIcon>
          <div style={{flex:1}}/>
          <SideIcon>💳</SideIcon>
          <SideIcon>⚙</SideIcon>
        </div>

        {/* Main */}
        <div style={{flex:1,display:'flex',flexDirection:'column',minWidth:0}}>
          {/* Toolbar */}
          <div style={{height:44,borderBottom:'1px solid #eceef2',display:'flex',alignItems:'center',padding:'0 12px',gap:8,background:'#fff',whiteSpace:'nowrap'}}>
            <div style={{display:'grid',gap:3,flexShrink:0}}>
              <div style={{width:14,height:1.5,background:'#5a6877'}}/>
              <div style={{width:14,height:1.5,background:'#5a6877'}}/>
              <div style={{width:14,height:1.5,background:'#5a6877'}}/>
            </div>
            <div style={{fontSize:13,fontWeight:600,color:'#0d1b32',letterSpacing:'-0.01em',flexShrink:0}}>Parrot AI</div>
            <div style={{width:1,height:16,background:'#eceef2',flexShrink:0}}/>
            <TDrop label="Áudio" icon="🔊"/>
            <TDrop label="Idioma" icon="🌐"/>
            <TDrop label="Ferramentas" icon="🔧" active={showFerramentas}/>
            <button style={{background:'#3b6fe8',color:'#fff',border:0,padding:'5px 11px',borderRadius:6,fontSize:12,fontWeight:500,display:'inline-flex',alignItems:'center',gap:5,cursor:'default',flexShrink:0}}>
              {recording ? <><span style={{width:7,height:7,borderRadius:4,background:'#fff'}}/>Gravando</> : <>▶ Iniciar</>}
            </button>
            <button style={{background:'#f5f5f5',color:'#7c8a98',border:'1px solid #eceef2',padding:'5px 10px',borderRadius:6,fontSize:12,flexShrink:0}}>▢ Parar</button>
            <button style={{background:'#f5f5f5',color:'#7c8a98',border:'1px solid #eceef2',padding:'5px 10px',borderRadius:6,fontSize:12,flexShrink:0}}>🗎 Resumo</button>
            <div style={{flex:1,minWidth:0}}/>
            <div style={{color:'#7c8a98',fontSize:13,flexShrink:0}}>🌙</div>
            <div style={{background:'#f5f5f5',border:'1px solid #eceef2',padding:'4px 9px',borderRadius:6,fontSize:11.5,display:'flex',alignItems:'center',gap:5,color:'#3b6fe8',flexShrink:0}}>
              💳 <span style={{color:'#0d1b32'}}>Gold</span> <span style={{color:'#7c8a98'}}>·9/25</span>
            </div>
            <div style={{fontSize:11,color:recording?'#2db672':'#7c8a98',display:'flex',alignItems:'center',gap:4,flexShrink:0}}>
              <span style={{width:6,height:6,borderRadius:4,background:recording?'#2db672':'#7c8a98'}}/>
              {recording ? 'gravando' : 'pronto'}
            </div>
          </div>

          {/* Ferramentas dropdown */}
          {showFerramentas && (
            <div style={{position:'absolute',top:100,left:300,width:230,background:'#fff',border:'1px solid #eceef2',borderRadius:10,boxShadow:'0 12px 30px rgba(13,27,50,0.18)',zIndex:20,padding:6}}>
              <FItem icon="▦" title="QR Mobile" sub="Conecta dispositivo móvel" highlight={ferramentasHighlight==='qr'}/>
              <FItem icon="◯" title="Stealth OFF" sub="Invisível em screen share" highlight={ferramentasHighlight==='stealth'}/>
              <FItem icon="◉" title="Overlay OFF" sub="Janela flutuante com IA" highlight={ferramentasHighlight==='overlay'}/>
            </div>
          )}

          {/* Tabs */}
          <div style={{display:'flex',gap:4,padding:'8px 20px 0',borderBottom:'1px solid #eceef2',background:'#fff'}}>
            <Tab on={tab==='transcricao'} icon="💬">Transcrição</Tab>
            <Tab on={tab==='contexto'} icon="📄">Contexto</Tab>
          </div>

          {/* Panels */}
          {tab==='transcricao' ? (
            <div style={{flex:1,display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,padding:14,minHeight:0,background:'#f8fafc'}}>
              <Panel title="TRANSCRIÇÃO AO VIVO">
                {transcript.length===0 ? (
                  <Empty>A transcrição aparecerá aqui durante a entrevista.</Empty>
                ) : (
                  <div style={{display:'flex',flexDirection:'column',gap:10}}>
                    {transcript.map((t,i)=>(
                      <div key={i} style={{fontSize:13,lineHeight:1.55,color:'#0d1b32'}}>
                        <span style={{fontWeight:600,fontSize:10.5,letterSpacing:'0.06em',marginRight:6,color:t.who==='E'?'#6691d6':'#3b6fe8'}}>{t.who==='E'?'ENTREV.':'VOCÊ·'}</span>
                        {t.text}{t.typing && <Caret/>}
                      </div>
                    ))}
                  </div>
                )}
              </Panel>
              <Panel title="SUGESTÕES DA IA" clearBtn>
                {!suggestion ? (
                  <Empty>As sugestões aparecerão aqui durante a entrevista.</Empty>
                ) : (
                  <div style={{fontSize:13,lineHeight:1.65,color:'#0d1b32'}}>
                    <div style={{fontSize:10,color:'#3b6fe8',letterSpacing:'0.08em',marginBottom:10,fontWeight:600}}>{suggestion.q}</div>
                    <div>{suggestion.text}{suggestion.typing && <Caret/>}</div>
                  </div>
                )}
              </Panel>
            </div>
          ) : (
            <ContextPanel text={contextText} caret={caretInContext}/>
          )}
        </div>
      </div>
    </div>
  );
}

function ContextPanel({text,caret}){
  return (
    <div style={{flex:1,padding:'18px 24px',background:'#fff',display:'flex',flexDirection:'column',gap:14,minHeight:0}}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between'}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <div style={{fontSize:18,fontWeight:600,color:'#0d1b32',letterSpacing:'-0.01em'}}>Entrevista 23/04 15:50:22</div>
          <span style={{color:'#7c8a98',fontSize:13}}>✎</span>
        </div>
        <div style={{padding:'4px 12px',border:'1px solid #d6e1f5',background:'#eef3fd',borderRadius:6,fontSize:11.5,color:'#3b6fe8',display:'flex',alignItems:'center',gap:6}}>
          <span style={{width:7,height:7,borderRadius:4,background:'#3b6fe8',animation:'blink 1s steps(2) infinite'}}/>Sessão ao vivo
        </div>
      </div>
      <div style={{fontSize:12.5,color:'#7c8a98'}}>Cole o currículo do candidato, diretrizes específicas, tom desejado, etc. O contexto é individual desta sessão e será usado pela IA ao gerar sugestões.</div>
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <div style={{fontSize:10.5,letterSpacing:'0.12em',fontWeight:600,color:'#7c8a98'}}>TEMPLATES</div>
        <div style={{padding:'5px 10px',border:'1px solid #eceef2',borderRadius:6,fontSize:12,color:'#0d1b32',display:'flex',alignItems:'center',gap:8,minWidth:140,background:'#fafbfc'}}>
          — nenhum — <span style={{marginLeft:'auto',color:'#7c8a98'}}>▾</span>
        </div>
        <div style={{padding:'5px 12px',background:'#f5f5f5',border:'1px solid #eceef2',borderRadius:6,fontSize:12,color:'#a8b0bc'}}>Carregar</div>
        <div style={{color:'#7c8a98'}}>⚙</div>
      </div>
      <div style={{
        flex:1,border:'1px solid #a9c1ec',borderRadius:8,padding:'14px 16px',
        background:'#fff',minHeight:0,overflow:'auto',
        fontSize:13,lineHeight:1.6,color:'#0d1b32',
        boxShadow:'inset 0 0 0 2px #eef3fd',
      }}>
        {text ? (
          <span style={{whiteSpace:'pre-wrap'}}>{text}{caret && <Caret/>}</span>
        ) : (
          <span style={{color:'#b0bac6',fontStyle:'italic'}}>Ex: Candidato — João Silva, 5 anos de experiência em React/Node. Formação em Ciência da Computação. Pretende R$ 12k. Tom: respostas curtas (máx 50 palavras), confiante e objetivo.{caret && <Caret/>}</span>
        )}
      </div>
      <div style={{display:'flex',gap:8}}>
        <button style={{background:'#3b6fe8',color:'#fff',border:0,padding:'9px 16px',borderRadius:6,fontSize:13,fontWeight:500,display:'inline-flex',alignItems:'center',gap:6}}>💾 Salvar contexto</button>
        <button style={{background:'#fff',color:'#0d1b32',border:'1px solid #eceef2',padding:'9px 14px',borderRadius:6,fontSize:13,display:'inline-flex',alignItems:'center',gap:6}}>📎 Anexar arquivo</button>
        <button style={{background:'#fff',color:'#0d1b32',border:'1px solid #eceef2',padding:'9px 14px',borderRadius:6,fontSize:13,display:'inline-flex',alignItems:'center',gap:6}}>🗑 Limpar</button>
      </div>
    </div>
  );
}

function Tab({on,icon,children}){
  return <div style={{padding:'10px 12px',fontSize:13,color:on?'#3b6fe8':'#7c8a98',borderBottom:on?'2px solid #3b6fe8':'2px solid transparent',marginBottom:-1,display:'flex',alignItems:'center',gap:6}}>{icon} {children}</div>;
}
function SideIcon({children,active}){
  return <div style={{width:32,height:32,borderRadius:6,display:'grid',placeItems:'center',fontSize:14,color:active?'#3b6fe8':'#7c8a98',background:active?'#eaf0fe':'transparent'}}>{children}</div>;
}
function TDrop({label,icon,active}){
  return <div style={{display:'inline-flex',alignItems:'center',gap:5,padding:'5px 9px',borderRadius:6,fontSize:12,color:active?'#3b6fe8':'#0d1b32',background:active?'#eaf0fe':'transparent',border:active?'1px solid #d0dcfc':'1px solid transparent',flexShrink:0}}><span style={{fontSize:11}}>{icon}</span>{label}<span style={{fontSize:8,color:'#7c8a98'}}>▼</span></div>;
}
function Panel({title,clearBtn,children}){
  return (
    <div style={{background:'#fff',border:'1px solid #eceef2',borderRadius:8,padding:'14px 16px',display:'flex',flexDirection:'column',gap:12,position:'relative',minHeight:0,overflow:'hidden'}}>
      <div style={{fontSize:10.5,letterSpacing:'0.12em',color:'#7c8a98',fontWeight:600}}>{title}</div>
      {clearBtn && <div style={{position:'absolute',right:10,top:10,padding:'4px 8px',border:'1px solid #eceef2',borderRadius:5,fontSize:11,color:'#7c8a98',background:'#fafbfc'}}>🗑 Limpar</div>}
      <div style={{flex:1,overflow:'hidden'}}>{children}</div>
    </div>
  );
}
function FItem({icon,title,sub,highlight}){
  return (
    <div style={{display:'flex',alignItems:'center',gap:10,padding:'10px 10px',borderRadius:6,background:highlight?'#eaf0fe':'transparent',transition:'background .2s'}}>
      <div style={{width:24,height:24,display:'grid',placeItems:'center',color:'#3b6fe8'}}>{icon}</div>
      <div>
        <div style={{fontSize:12.5,fontWeight:500,color:'#0d1b32'}}>{title}</div>
        <div style={{fontSize:11,color:'#7c8a98',marginTop:1}}>{sub}</div>
      </div>
    </div>
  );
}
function Empty({children}){
  return <div style={{color:'#b0bac6',fontStyle:'italic',fontSize:13}}>{children}</div>;
}
function Caret(){
  return <span style={{color:'#3b6fe8',animation:'blink 1s steps(2) infinite'}}>▍</span>;
}

// Typewriter reveal
function typed(text, startT, durT, t){
  if (t < startT) return '';
  const p = Math.min(1, (t-startT)/durT);
  return text.slice(0, Math.floor(text.length*p));
}

Object.assign(window,{AppFrame, typed});