/* Welcome / Hub — three tabs, suggestion grid, mode introduction */

const WELCOME_TABS = [
  { id: 'start',     label: 'Começar',          icon: 'sparkle'  },
  { id: 'plans',     label: 'Planos',            icon: 'calc'     },
  { id: 'import',    label: 'Importar processo', icon: 'process'  },
  { id: 'agents',    label: 'Agentes',           icon: 'bolt'     },
  { id: 'templates', label: 'Templates',         icon: 'book'     },
  { id: 'calc',      label: 'Cálculos',          icon: 'calc'     },
  { id: 'juris',     label: 'Jurisprudência',    icon: 'scale'    },
];

const MODE_CARDS = [
  {
    id: 'chat',
    title: 'Conversar',
    sub: 'Resposta direta',
    icon: 'chat',
    color: '#0ea5e9',
    glow: 'rgba(14, 165, 233, 0.4)',
    body: 'Pergunte algo objetivo. Resposta concisa, sem rastros de raciocínio. Ideal para checar súmula, prazo simples, formatação.',
    speed: 'Rápido · ~2s',
  },
  {
    id: 'reasoning',
    title: 'Raciocínio',
    sub: 'Cadeia visível',
    icon: 'brain',
    color: '#6366f1',
    glow: 'rgba(99, 102, 241, 0.4)',
    body: 'O modelo expõe a cadeia de raciocínio antes da resposta. Use para teses, análises de mérito, comparação de precedentes.',
    speed: 'Médio · ~8s',
  },
  {
    id: 'agent',
    title: 'Agêntico',
    sub: 'Com ferramentas',
    icon: 'bolt',
    color: '#8b5cf6',
    glow: 'rgba(139, 92, 246, 0.4)',
    body: 'Análise aprofundada com execução automática de verificações, cálculos e consultas. Ideal para pedidos complexos que exigem múltiplas etapas.',
    speed: 'Mais lento · ~15s',
  },
  {
    id: 'pecas',
    title: 'Peças',
    sub: 'Redação de alto nível',
    icon: 'process',
    color: '#f59e0b',
    glow: 'rgba(245, 158, 11, 0.4)',
    body: 'Modo especializado para criação de peças processuais completas: contestações, apelações, embargos, REsp, recursos trabalhistas.',
    speed: 'Denso · ~20s',
  },
  {
    id: 'recursos',
    title: 'Recursos',
    sub: 'Protocolo recursal',
    icon: 'scale',
    color: '#10b981',
    glow: 'rgba(16, 185, 129, 0.4)',
    body: 'Especializado em recursos excepcionais e ordinários: cotejo analítico, repercussão geral, prequestionamento exaustivo.',
    speed: 'Denso · ~20s',
  },
  {
    id: 'revisao',
    title: 'Revisão',
    sub: 'Pré-protocolo',
    icon: 'check',
    color: '#0891b2',
    glow: 'rgba(8, 145, 178, 0.35)',
    body: 'Auditoria integral da peça: gramática, estrutura, tese, prova, pedidos, riscos processuais e correções prontas para aplicar.',
    speed: 'Premium · ~25s',
  },
  {
    id: 'calculos',
    title: 'Cálculos',
    sub: 'Motores judiciais',
    icon: 'calc',
    color: '#7c3aed',
    glow: 'rgba(124, 58, 237, 0.32)',
    body: 'Liquidação cível e trabalhista com memória de cálculo, premissas, relatório e parecer técnico.',
    speed: 'Motor · imediato',
  },
  {
    id: 'adversarial',
    title: 'Adversarial',
    sub: 'Premium estratégico',
    icon: 'eye',
    color: '#ef4444',
    glow: 'rgba(239, 68, 68, 0.35)',
    body: 'Analisa forças, fraquezas, riscos probatórios e ataques prováveis contra a sua tese ou a tese adversária, sempre com documentos anexados.',
    speed: 'Premium · ~25s',
  },
  {
    id: 'sustentacao',
    title: 'Sustentação Oral',
    sub: 'Tribuna premium',
    icon: 'mic',
    color: '#06b6d4',
    glow: 'rgba(6, 182, 212, 0.35)',
    body: 'Transforma a cópia integral e anexos em roteiro oral persuasivo, com versões por tempo, objeções prováveis e pedido final.',
    speed: 'Premium · ~20s',
  },
  {
    id: 'audiencia',
    title: 'Audiência',
    sub: 'Perguntas e prova',
    icon: 'user',
    color: '#14b8a6',
    glow: 'rgba(20, 184, 166, 0.35)',
    body: 'Cria perguntas para testemunhas, partes e depoimento pessoal, com follow-ups, contradita e finalidade probatória clara.',
    speed: 'Premium · ~18s',
  },
  {
    id: 'sentenca',
    title: 'Sentença',
    sub: 'Simulação judicial',
    icon: 'book',
    color: '#64748b',
    glow: 'rgba(100, 116, 139, 0.35)',
    body: 'Simula uma provável sentença com postura de magistrado: relatório, fundamentos, dispositivo, riscos e pontos decisivos.',
    speed: 'Premium · ~25s',
  },
  {
    id: 'quesitos',
    title: 'Quesitos',
    sub: 'Assistente técnico',
    icon: 'calc',
    color: '#22c55e',
    glow: 'rgba(34, 197, 94, 0.35)',
    body: 'Formula quesitos periciais, estratégia de assistente técnico, documentos necessários e impugnação preventiva do laudo.',
    speed: 'Premium · ~18s',
  },
  {
    id: 'audio',
    title: 'Áudio',
    sub: 'Transcrição precisa',
    icon: 'mic',
    color: '#ec4899',
    glow: 'rgba(236, 72, 153, 0.35)',
    body: 'Transcreve áudios anexados com marcação por minutos e segundos, destacando confissões, datas, valores e pontos probatórios.',
    speed: 'Premium · variável',
  },
  {
    id: 'relatorio',
    title: 'Relatório',
    sub: 'Análise folha a folha',
    icon: 'relatorio',
    color: '#f97316',
    glow: 'rgba(249, 115, 22, 0.35)',
    body: 'Resume o processo ID a ID ou folha a folha: fatos, decisões, provas, partes e pontos-chave em alto nível. Ideal para petições iniciais longas, acórdãos e laudos.',
    speed: 'Premium · ~20s',
  },
];

const COMMERCIAL_PLANS = [
  { id: 'starter', name: 'Essencial', price: 'R$ 59,90', meta: '100 unidades com APIs incluídas', items: ['100 interações/mês', '10 DeepResearch', '60 min de áudio', '1 usuário'], note: 'Melhor porta de entrada: baixo custo mensal, recursos premium e limite suficiente para rotina individual.' },
  { id: 'pro', name: 'Profissional', price: 'R$ 97', meta: '220 unidades com automação completa', items: ['220 interações/mês', '25 DeepResearch', '150 min de áudio', 'Peças, revisão, cálculos e OCR'], note: 'Melhor custo-benefício para uso diário, com folga para peças complexas e pesquisas recorrentes.', featured: true },
  { id: 'office', name: 'Escritório', price: 'R$ 297', meta: '650 unidades e 3 usuários', items: ['650 interações/mês', '80 DeepResearch', '450 min de áudio', 'Controle por usuário'], note: 'Equipe pequena com governança de consumo, previsibilidade e suporte prioritário.' },
  { id: 'enterprise', name: 'Enterprise', price: 'Sob proposta', meta: 'Ambiente e limites dedicados', items: ['SSO/SLA', 'APIs geridas pela SynapIA', 'Segregação de dados', 'Treinamento'], note: 'Para órgãos, departamentos jurídicos e escritórios com requisitos próprios.' },
];

const COST_MATRIX = [
  ['Conversa rápida', 'US$ 0,015', '1 unidade'],
  ['Peças/recursos', 'US$ 0,12', '3 unidades'],
  ['DeepResearch', 'US$ 0,10', '3 unidades'],
  ['OCR/Vision', 'US$ 0,08', '2 unidades'],
  ['Áudio STT', 'US$ 0,006/min', 'por minuto'],
];

// ── Tutorial interativo de criação de agentes ──────────────────────────────
const AGENT_TUTORIAL_STEPS = [
  {
    icon: 'bolt',
    title: '1. O que é um agente?',
    body: 'Um agente é um assistente com identidade, especialização e modo de operação próprios. Você cria uma vez e usa sempre que precisar — ele já sabe como se comportar.',
  },
  {
    icon: 'brain',
    title: '2. Escolha o modo',
    body: '"Peças" gera contestações, petições e recursos. "Recursos" foca em cotejo analítico e admissibilidade. "Agêntico" pesquisa jurisprudência antes de responder. "Raciocínio" expõe o raciocínio passo a passo.',
  },
  {
    icon: 'sparkle',
    title: '3. Escreva as instruções',
    body: 'Informe área do direito, estilo de escrita, tribunais-alvo e verbas que o agente deve priorizar. Quanto mais específico, melhor. Use "✨ Aprimorar com IA" para a IA expandir suas instruções automaticamente.',
  },
  {
    icon: 'check',
    title: '4. Salve e use',
    body: 'O agente fica salvo no seu dispositivo. Ele aparece na lista com badge "Meu agente". Clique "Usar agente" a qualquer momento para ativá-lo.',
  },
];

const AgentTutorial = () => {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(0);
  return (
    <div style={{ marginBottom: 20 }}>
      <button onClick={() => setOpen(o => !o)}
        style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 14px', borderRadius: 8,
          border: '1px solid var(--border-2)', background: open ? 'var(--bg-3)' : 'transparent',
          color: 'var(--muted)', fontSize: 12, cursor: 'pointer', width: '100%', textAlign: 'left', transition: 'all 0.2s' }}>
        <I.brain size={13}/>
        <span style={{ flex: 1 }}>📖 Como criar seu primeiro agente — tutorial passo a passo</span>
        <span style={{ fontSize: 10, transition: 'transform 0.2s', display: 'inline-block', transform: open ? 'rotate(180deg)' : 'none' }}>▼</span>
      </button>
      {open && (
        <div style={{ marginTop: 8, padding: '16px 20px', background: 'var(--bg-3)', borderRadius: 10, border: '1px solid var(--border-2)' }}>
          {/* Steps nav */}
          <div style={{ display: 'flex', gap: 6, marginBottom: 16 }}>
            {AGENT_TUTORIAL_STEPS.map((s, i) => (
              <button key={i} onClick={() => setStep(i)}
                style={{ flex: 1, padding: '6px 4px', borderRadius: 6, border: 'none',
                  background: step === i ? 'var(--accent)' : 'var(--border-2)',
                  color: step === i ? '#fff' : 'var(--muted)', fontSize: 10, cursor: 'pointer', fontWeight: step === i ? 700 : 400 }}>
                {i+1}
              </button>
            ))}
          </div>
          {/* Step content */}
          <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--accent)', flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {React.createElement(I[AGENT_TUTORIAL_STEPS[step].icon] || I.bolt, { size: 18, style: { color: '#fff' } })}
            </div>
            <div>
              <div style={{ fontWeight: 700, fontSize: 14, marginBottom: 4, color: 'var(--ink)' }}>{AGENT_TUTORIAL_STEPS[step].title}</div>
              <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)', lineHeight: 1.6 }}>{AGENT_TUTORIAL_STEPS[step].body}</p>
            </div>
          </div>
          {/* Nav buttons */}
          <div style={{ display: 'flex', gap: 8, marginTop: 14, justifyContent: 'flex-end' }}>
            {step > 0 && <button className="btn-ghost" style={{ fontSize: 12, padding: '5px 12px' }} onClick={() => setStep(s => s - 1)}>← Anterior</button>}
            {step < AGENT_TUTORIAL_STEPS.length - 1
              ? <button className="btn-primary" style={{ fontSize: 12, padding: '5px 12px' }} onClick={() => setStep(s => s + 1)}>Próximo →</button>
              : <button className="btn-ghost" style={{ fontSize: 12, padding: '5px 12px' }} onClick={() => setOpen(false)}>✓ Entendi</button>
            }
          </div>
        </div>
      )}
    </div>
  );
};

const Welcome = ({ profile, bridge, onPickPrompt, onPickMode, onPickAgent, agents, onAgentsChange, availableSkills = [], selectedSkills = [], onToggleSkill, onSkillsChange, onOpenExtension, onOpenUsage, onOnboardingStart, mode }) => {
  const [tab, setTab] = React.useState('start');
  const [showCreateAgent, setShowCreateAgent] = React.useState(false);
  const [agentWizardStep, setAgentWizardStep] = React.useState(0);
  const [newAgent, setNewAgent] = React.useState({ nome: '', descricao: '', modoDefault: 'pecas', systemSupplement: '', color: '#1a56db', icon: 'user' });
  const [savingAgent, setSavingAgent] = React.useState(false);
  const [refiningPrompt, setRefiningPrompt] = React.useState(false);
  const [showSkillCreator, setShowSkillCreator] = React.useState(false);
  const [newSkill, setNewSkill] = React.useState({ name: '', description: '', when_to_use: '', content: '' });
  const [savingSkill, setSavingSkill] = React.useState(false);
  const [refiningSkill, setRefiningSkill] = React.useState(false);

  const greeting = (() => {
    const h = new Date().getHours();
    if (h < 12) return 'Bom dia';
    if (h < 18) return 'Boa tarde';
    return 'Boa noite';
  })();

  return (
    <div className="welcome">
      <div className="welcome-head" style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 48, animation: 'fade-in-up 0.8s ease-out'}}>
        {/* — Premium Hero Logo — */}
        <div className="hero-logo-container" style={{ position: 'relative', width: 200, height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
          {/* Ambient radial backdrop — strong glow */}
          <div style={{
            position: 'absolute', inset: -60,
            background: 'radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, rgba(139, 92, 246, 0.08) 40%, transparent 70%)',
            borderRadius: '50%', filter: 'blur(40px)',
            animation: 'brand-breathe 4s ease-in-out infinite',
            pointerEvents: 'none'
          }} />
          {/* Ring 1 — inner cyan gradient ring (closest) */}
          <div style={{
            position: 'absolute', inset: -4,
            borderRadius: '50%',
            background: 'conic-gradient(from 0deg, rgba(14, 165, 233, 0.35), rgba(139, 92, 246, 0.2), rgba(14, 165, 233, 0.05), rgba(14, 165, 233, 0.35))',
            WebkitMask: 'radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px))',
            mask: 'radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px))',
            animation: 'logo-ring-spin 8s linear infinite',
            pointerEvents: 'none'
          }} />
          {/* Ring 2 — mid purple dashed */}
          <div style={{
            position: 'absolute', inset: -14,
            borderRadius: '50%',
            border: '1.5px dashed rgba(139, 92, 246, 0.18)',
            animation: 'logo-ring-spin 20s linear infinite reverse',
            pointerEvents: 'none'
          }} />
          {/* Ring 3 — outer cyan solid */}
          <div style={{
            position: 'absolute', inset: -26,
            borderRadius: '50%',
            border: '1px solid rgba(14, 165, 233, 0.1)',
            animation: 'logo-ring-spin 30s linear infinite',
            pointerEvents: 'none'
          }} />
          {/* Ring 4 — outermost whisper */}
          <div style={{
            position: 'absolute', inset: -40,
            borderRadius: '50%',
            border: '1px solid rgba(14, 165, 233, 0.05)',
            pointerEvents: 'none'
          }} />
          {/* Orbiting dot — small cyan ticker */}
          <div style={{
            position: 'absolute', inset: -14,
            borderRadius: '50%',
            animation: 'logo-ring-spin 6s linear infinite',
            pointerEvents: 'none'
          }}>
            <div style={{
              position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%) translateY(-50%)',
              width: 6, height: 6, borderRadius: '50%',
              background: 'var(--accent)',
              boxShadow: '0 0 8px var(--accent), 0 0 16px var(--accent-soft)'
            }} />
          </div>
          {/* The Logo */}
          <img
            src="/logo.png"
            alt="SynapIA"
            style={{
              width: 140, height: 140,
              borderRadius: '50%',
              objectFit: 'cover',
              boxShadow: '0 0 50px rgba(14, 165, 233, 0.3), 0 0 100px rgba(139, 92, 246, 0.12), 0 12px 40px rgba(0,0,0,0.2)',
              border: '2.5px solid rgba(14, 165, 233, 0.2)',
              animation: 'brand-breathe 4s ease-in-out infinite',
              position: 'relative', zIndex: 2
            }}
          />
        </div>
        <h1 className="welcome-title" style={{textAlign: 'center', maxWidth: 600}}>
          <span className="welcome-greet" style={{ fontSize: 16, color: 'var(--muted)', display: 'block', marginBottom: 8, letterSpacing: 1 }}>{greeting}{profile?.name ? `, ${profile.name}` : ''}.</span>
          <span className="welcome-prompt" style={{ fontSize: 42, fontWeight: 700, fontFamily: 'var(--font-serif)', letterSpacing: '-1px', background: 'linear-gradient(to right, var(--ink), var(--muted))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>
            O que vamos construir hoje?
          </span>
        </h1>
      </div>

      <div className="welcome-tabs" role="tablist">
        {WELCOME_TABS.map(t => {
          const Ic = I[t.icon];
          return (
            <button key={t.id} className={`wt ${tab === t.id ? 'active' : ''}`}
                    role="tab" aria-selected={tab === t.id} onClick={() => setTab(t.id)}>
              <Ic size={14}/>
              {t.label}
            </button>
          );
        })}
      </div>

      {tab === 'start' && (
        <div className="welcome-pane">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 10 }}>
            {MODE_CARDS.map(card => {
              const Ic = I[card.icon] || I.sparkle;
              return (
                <button
                  key={card.id}
                  onClick={() => onPickMode && onPickMode(card.id)}
                  style={{
                    position: 'relative', overflow: 'hidden', minHeight: 158,
                    display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10,
                    padding: '16px 16px 14px', textAlign: 'left', cursor: 'pointer',
                    background: 'var(--bg-elev)', border: '1px solid var(--border)', borderRadius: 'var(--r-2)',
                    color: 'var(--ink)', boxShadow: 'var(--sh-sm)', transition: 'transform .14s, border-color .14s, box-shadow .14s'
                  }}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.borderColor = card.color; e.currentTarget.style.boxShadow = `0 10px 30px ${card.glow}`; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.boxShadow = 'var(--sh-sm)'; }}
                >
                  <span style={{
                    width: 38, height: 38, borderRadius: 8, flexShrink: 0,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: card.color, color: '#fff', boxShadow: `0 8px 24px ${card.glow}`
                  }}>
                    <Ic size={18}/>
                  </span>
                  <span style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                    <strong style={{ fontSize: 15, fontWeight: 700, letterSpacing: 0 }}>{card.title}</strong>
                    <small style={{ color: card.color, fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>{card.sub}</small>
                  </span>
                  <span style={{ color: 'var(--muted)', fontSize: 12.5, lineHeight: 1.5, flex: 1 }}>{card.body}</span>
                  <span style={{ display: 'flex', width: '100%', alignItems: 'center', justifyContent: 'space-between', color: 'var(--soft)', fontSize: 11.5 }}>
                    <span>{card.speed}</span>
                    <I.arrowR size={12}/>
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      )}

      {tab === 'plans' && (
        <div className="welcome-pane">
          <div style={{ display: 'grid', gap: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-end', flexWrap: 'wrap' }}>
              <div>
                <div className="eyebrow">COMERCIAL</div>
                <h3 style={{ margin: '4px 0 6px', color: 'var(--ink)', fontSize: 24 }}>Planos prontos para vender</h3>
                <p style={{ margin: 0, color: 'var(--muted)', maxWidth: 690, fontSize: 13.5 }}>
                  Preços pensados para adoção rápida, alto valor percebido e previsibilidade técnica. A plataforma gerencia as APIs automaticamente e mede o consumo individual por usuário, sem repassar configuração técnica ao cliente.
                </p>
              </div>
              <a className="btn-ghost" href="/planos.html" target="_blank" rel="noreferrer" style={{ textDecoration: 'none', fontSize: 12 }}>
                <I.arrowR size={12}/> Página pública
              </a>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 12 }}>
              {COMMERCIAL_PLANS.map(plan => (
                <article key={plan.id} style={{
                  border: `1px solid ${plan.featured ? 'var(--accent)' : 'var(--border)'}`,
                  background: plan.featured ? 'linear-gradient(180deg, rgba(14,165,233,.14), var(--bg-elev))' : 'var(--bg-elev)',
                  borderRadius: 8, padding: 18, boxShadow: plan.featured ? '0 18px 50px rgba(14,165,233,.12)' : 'var(--sh-sm)'
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
                    <h4 style={{ margin: 0, fontSize: 17, color: 'var(--ink)' }}>{plan.name}</h4>
                    {plan.featured && <span style={{ color: 'var(--accent)', fontSize: 10, fontWeight: 800, letterSpacing: 1 }}>RECOMENDADO</span>}
                  </div>
                  <div style={{ margin: '12px 0 2px', color: 'var(--ink)', fontSize: 30, fontWeight: 800 }}>{plan.price}<small style={{ color: 'var(--muted)', fontSize: 12, fontWeight: 600 }}>{plan.price.startsWith('R$') ? '/mês' : ''}</small></div>
                  <div style={{ color: 'var(--accent)', fontWeight: 800, fontSize: 12, marginBottom: 12 }}>{plan.meta}</div>
                  <ul style={{ margin: 0, paddingLeft: 18, color: 'var(--fg-2)', fontSize: 12.5, lineHeight: 1.8 }}>
                    {plan.items.map(item => <li key={item}>{item}</li>)}
                  </ul>
                  <p style={{ margin: '12px 0 0', color: 'var(--muted)', fontSize: 12, lineHeight: 1.5 }}>{plan.note}</p>
                </article>
              ))}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 12 }}>
              <div style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-elev)', padding: 16 }}>
                <div className="eyebrow">CUSTO POR FUNÇÃO</div>
                <div style={{ display: 'grid', gap: 8, marginTop: 10 }}>
                  {COST_MATRIX.map(([name, cost, unit]) => (
                    <div key={name} style={{ display: 'grid', gridTemplateColumns: '1fr auto auto', gap: 10, alignItems: 'center', fontSize: 12.5, color: 'var(--fg-2)' }}>
                      <strong style={{ color: 'var(--ink)' }}>{name}</strong>
                      <span>{cost}</span>
                      <span style={{ color: 'var(--muted)' }}>{unit}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--bg-elev)', padding: 16 }}>
                <div className="eyebrow">APIS AUTOMÁTICAS</div>
                <p style={{ margin: '8px 0 12px', color: 'var(--muted)', fontSize: 13, lineHeight: 1.55 }}>
                  O usuário não precisa contratar nem colar chaves. O SynapIA roteia modelos, áudio, OCR e pesquisa pelo backend, enquanto cada conta tem limite, custo estimado e histórico de uso próprios.
                </p>
                <button className="btn-primary" onClick={onOpenUsage} style={{ fontSize: 12 }} disabled={!onOpenUsage}>
                  <I.settings size={12}/> Configurar no painel de uso
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'import' && (
        <div className="welcome-pane">
          <div className="import-card" style={{ gridTemplateColumns: '1fr' }}>
            <div className="import-left">
              <div className="eyebrow">EXTENSÃO SYNAPIA</div>
              <h3>Traga o processo inteiro com um clique</h3>
              <p>A extensão captura inteiro teor e andamentos de qualquer tribunal e envia diretamente para o Studio — tudo estruturado e pronto para análise.</p>
              <div className="import-steps">
                {[
                  ['1', 'Abra o processo no tribunal'],
                  ['2', 'Clique no ícone hexagonal na barra do navegador'],
                  ['3', 'Selecione "Exportar para SynapIA Studio"'],
                ].map(([n, t]) => (
                  <div key={n} className="istep">
                    <span className="istep-n">{n}</span>
                    <span>{t}</span>
                  </div>
                ))}
              </div>
              <div className="import-actions">
                <button className="btn-primary" onClick={onOpenExtension}>Conectar extensão</button>
                <button className="btn-ghost" onClick={onOnboardingStart}>Ver tutorial</button>
              </div>
            </div>
          </div>
        </div>
      )}

      {tab === 'agents' && (
        <div className="welcome-pane">
          {/* ── Cabeçalho com ações ── */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 20, gap: 12, flexWrap: 'wrap' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 4 }}>AGENTES ESPECIALIZADOS</div>
              <p style={{ margin: 0, color: 'var(--muted)', fontSize: 13, maxWidth: 480 }}>
                Abaixo estão <strong>exemplos</strong> de agentes para você explorar. Crie seus próprios agentes com instruções personalizadas.
              </p>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn-ghost" style={{ gap: 6, fontSize: 12 }} onClick={() => { setShowSkillCreator(true); }}>
                <I.sparkle size={12}/> Criar skill
              </button>
              <button className="btn-primary" style={{ gap: 6 }} onClick={() => { setAgentWizardStep(0); setShowCreateAgent(true); }}>
                <I.bolt size={12}/> Criar agente
              </button>
            </div>
          </div>

          {/* ── Tutorial colapsável ── */}
          <AgentTutorial />

          {/* ── Combinações de conhecimento ── */}
          <div className="agent-knowledge-panel">
            <div className="agent-knowledge-head">
              <div>
                <div className="eyebrow">FONTES + SKILLS</div>
                <h3>Monte combinações para o agente usar no chat</h3>
                <p>Selecione skills Markdown como conhecimento ativo. Elas entram no contexto do agente, aparecem como chamadas no chat e podem ser combinadas com uploads, processo importado e perfil de escrita.</p>
              </div>
              <button className="btn-ghost" onClick={() => onSkillsChange && onSkillsChange()}><I.redo size={12}/> Atualizar</button>
            </div>
            <div className="agent-combo-grid">
              <div className="agent-combo-card">
                <span className="combo-k">Upload</span>
                <strong>Anexos como base documental</strong>
                <small>PDF, DOCX, imagens, XML, CSV e texto entram como prova, contrato, regulamento ou inteiro teor.</small>
              </div>
              <div className="agent-combo-card">
                <span className="combo-k">Processo</span>
                <strong>PJe, Eproc e Projudi</strong>
                <small>A extensão envia documentos, andamentos e inteiro teor para o Studio.</small>
              </div>
              <div className="agent-combo-card">
                <span className="combo-k">Skills</span>
                <strong>Playbooks densos</strong>
                <small>Use para teses, rotinas de cálculo, tribunal-alvo, padrões de revisão e checklists.</small>
              </div>
            </div>
            <div className="skill-picker-grid">
              {(() => {
                const skills = [...(availableSkills || [])].sort((a, b) => {
                  if (a.name === 'revisao-peca-premium') return -1;
                  if (b.name === 'revisao-peca-premium') return 1;
                  return String(a.name || '').localeCompare(String(b.name || ''));
                }).slice(0, 24);
                return skills.map(sk => {
                const active = selectedSkills.includes(sk.name);
                return (
                  <button key={sk.name} className={`skill-pick ${active ? 'active' : ''}`} onClick={() => onToggleSkill && onToggleSkill(sk.name)}>
                    <span className="skill-pick-mark">{active ? <I.check size={11} sw={2.2}/> : <I.bolt size={11}/>}</span>
                    <span className="skill-pick-body">
                      <strong>{sk.name}</strong>
                      <small>{sk.when_to_use || sk.description || 'Skill especializada'}</small>
                    </span>
                  </button>
                );
                });
              })()}
              {(!availableSkills || availableSkills.length === 0) && <div className="skill-empty">Nenhuma skill Markdown cadastrada ainda.</div>}
            </div>
          </div>

          {/* ── Grade de agentes ── */}
          <div className="agents-grid">
            {(agents || []).map(ag => {
              const Ic = I[ag.icon] || I.user;
              const modeMeta = (typeof MODE_META !== 'undefined' && MODE_META[ag.modoDefault]) || { label: ag.modoDefault };
              return (
                <div key={ag.id} className={`agent-card${ag.isDefault ? ' agent-card-example' : ''}`}>
                  <div className="agent-head">
                    <span className="agent-icon" style={{ background: ag.color || 'var(--blue)' }}>
                      <Ic size={16} style={{ color: '#fff' }}/>
                    </span>
                    <div className="agent-name">{ag.nome}</div>
                    {ag.isDefault
                      ? <span className="agent-badge agent-badge-example">Exemplo</span>
                      : <span className="agent-badge agent-badge-custom">Meu agente</span>
                    }
                  </div>
                  <div className="agent-meta">Modo: {modeMeta.label}</div>
                  <p className="agent-desc">{ag.descricao}</p>
                  <button className="agent-cta" onClick={() => onPickAgent && onPickAgent(ag)}>
                    Usar agente <I.arrowR size={11} sw={2}/>
                  </button>
                </div>
              );
            })}
          </div>

          {/* ── Modal Wizard: Criar Agente ── */}
          {showCreateAgent && (
            <div className="ob-overlay" onClick={() => setShowCreateAgent(false)}>
              <div className="ob-card agent-wizard" onClick={e => e.stopPropagation()} style={{ maxWidth: 580 }}>
                <button className="ob-close" onClick={() => setShowCreateAgent(false)}><I.x size={14} sw={2}/></button>

                {/* Stepper */}
                <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--border-2)' }}>
                  {['Identidade','Comportamento','Personalizar'].map((label, i) => (
                    <button key={i} onClick={() => setAgentWizardStep(i)}
                      style={{ flex: 1, padding: '12px 8px', fontSize: 12, fontWeight: agentWizardStep === i ? 700 : 400,
                        color: agentWizardStep === i ? 'var(--accent)' : 'var(--muted)',
                        background: 'none', border: 'none', borderBottom: agentWizardStep === i ? '2px solid var(--accent)' : '2px solid transparent',
                        cursor: 'pointer', transition: 'all 0.2s', letterSpacing: 0.5 }}>
                      <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 18, height: 18,
                        borderRadius: '50%', background: agentWizardStep === i ? 'var(--accent)' : 'var(--border-2)',
                        color: agentWizardStep === i ? '#fff' : 'var(--muted)', fontSize: 10, marginRight: 6 }}>{i+1}</span>
                      {label}
                    </button>
                  ))}
                </div>

                <div className="ob-body" style={{ textAlign: 'left', padding: '24px 28px 16px' }}>

                  {/* PASSO 1 — Identidade */}
                  {agentWizardStep === 0 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                      <div>
                        <div className="ob-eyebrow">PASSO 1 DE 3</div>
                        <h3 style={{ margin: '4px 0 4px', fontSize: 20, fontFamily: 'var(--font-serif)' }}>Dê uma identidade ao agente</h3>
                        <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>Nome e descrição ajudam a lembrar para quê ele serve.</p>
                      </div>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <span className="eyebrow">Nome do agente <span style={{color:'var(--accent)'}}>*</span></span>
                        <input value={newAgent.nome} onChange={e => setNewAgent(a => ({ ...a, nome: e.target.value }))}
                          placeholder="Ex.: Especialista em FGTS, Advogado Tributarista..."
                          style={{ padding: '9px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 14, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                      </label>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <span className="eyebrow">Descrição curta</span>
                        <input value={newAgent.descricao} onChange={e => setNewAgent(a => ({ ...a, descricao: e.target.value }))}
                          placeholder="Ex.: Calcular FGTS, multa de 40%, levantamento judicial..."
                          style={{ padding: '9px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 14, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                      </label>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <span className="eyebrow">Modo padrão</span>
                        <select value={newAgent.modoDefault} onChange={e => setNewAgent(a => ({ ...a, modoDefault: e.target.value }))}
                          style={{ padding: '9px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 14, background: 'var(--bg-elev)', color: 'var(--ink)' }}>
                          <option value="chat">💬 Conversar — respostas rápidas e objetivas</option>
                          <option value="reasoning">🧠 Raciocínio — análises e teses complexas</option>
                          <option value="agent">⚡ Agêntico — pesquisa com ferramentas</option>
                          <option value="pecas">📄 Peças — geração de peças processuais</option>
                          <option value="recursos">📋 Recursos — recursos e contrarrazões</option>
                        </select>
                        <span style={{ fontSize: 11, color: 'var(--muted)', marginTop: 2 }}>
                          {newAgent.modoDefault === 'pecas' && '→ Ideal para contestações, petições, memoriais e qualquer peça inicial ou de defesa.'}
                          {newAgent.modoDefault === 'recursos' && '→ Ideal para apelação, REsp, RE, RR, agravos e contrarrazões.'}
                          {newAgent.modoDefault === 'agent' && '→ O agente pesquisa jurisprudência e legislação antes de responder.'}
                          {newAgent.modoDefault === 'reasoning' && '→ O modelo mostra sua cadeia de raciocínio antes da resposta final.'}
                          {newAgent.modoDefault === 'chat' && '→ Resposta direta, sem raciocínio explícito. Mais rápido.'}
                        </span>
                      </label>
                    </div>
                  )}

                  {/* PASSO 2 — Comportamento */}
                  {agentWizardStep === 1 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                      <div>
                        <div className="ob-eyebrow">PASSO 2 DE 3</div>
                        <h3 style={{ margin: '4px 0 4px', fontSize: 20, fontFamily: 'var(--font-serif)' }}>Defina o comportamento</h3>
                        <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>
                          Escreva as instruções que definem como o agente deve agir. Seja específico: tribunal-alvo, verbas que calcula, tipo de argumento preferido, estilo de escrita.
                        </p>
                      </div>
                      <div style={{ padding: '10px 14px', background: 'var(--bg-3)', borderRadius: 8, border: '1px solid var(--border-2)', fontSize: 12, color: 'var(--muted)', lineHeight: 1.7 }}>
                        <strong style={{ color: 'var(--ink)', display: 'block', marginBottom: 4 }}>💡 Dicas para boas instruções:</strong>
                        Inclua: <em>área do direito</em>, <em>tipo de peça preferido</em>, <em>tribunais-alvo</em>, <em>tom e estilo</em>.<br/>
                        Ex.: <em>"Especialista em Direito do Consumidor. Foca em CDC, dano moral presumido, teoria do risco. Prefere argumentação sistemática. Usa linguagem assertiva."</em>
                      </div>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <span className="eyebrow">Instruções do sistema</span>
                          <button
                            disabled={refiningPrompt || !newAgent.systemSupplement}
                            onClick={async () => {
                              setRefiningPrompt(true);
                              try {
                                const r = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' },
                                  body: JSON.stringify({ message: `Melhore e expanda estas instruções de sistema para um agente jurídico chamado "${newAgent.nome}" com modo ${newAgent.modoDefault}. Torne mais específicas, profissionais e eficazes. Responda APENAS com as instruções melhoradas, sem explicação:\n\n${newAgent.systemSupplement}`, mode: 'chat' }) });
                                const j = await r.json();
                                if (j.reply) setNewAgent(a => ({ ...a, systemSupplement: j.reply.trim() }));
                              } catch {} finally { setRefiningPrompt(false); }
                            }}
                            style={{ fontSize: 11, padding: '3px 10px', borderRadius: 6, border: '1px solid var(--accent)', background: 'transparent', color: 'var(--accent)', cursor: refiningPrompt || !newAgent.systemSupplement ? 'not-allowed' : 'pointer', opacity: refiningPrompt || !newAgent.systemSupplement ? 0.5 : 1, display: 'flex', alignItems: 'center', gap: 4 }}>
                            <I.sparkle size={10}/> {refiningPrompt ? 'Aprimorando...' : '✨ Aprimorar com IA'}
                          </button>
                        </div>
                        <textarea value={newAgent.systemSupplement} onChange={e => setNewAgent(a => ({ ...a, systemSupplement: e.target.value }))}
                          placeholder="Descreva a especialidade, área de atuação, estilo de escrita, tribunais preferidos, verbas que calcula..."
                          rows={7}
                          style={{ padding: '9px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 13, resize: 'vertical', background: 'var(--bg-elev)', color: 'var(--ink)', lineHeight: 1.6 }}/>
                        <span style={{ fontSize: 11, color: 'var(--muted)' }}>
                          Escreva pelo menos algumas linhas e clique em "✨ Aprimorar com IA" para a IA expandir e melhorar automaticamente.
                        </span>
                      </label>
                    </div>
                  )}

                  {/* PASSO 3 — Personalizar */}
                  {agentWizardStep === 2 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                      <div>
                        <div className="ob-eyebrow">PASSO 3 DE 3</div>
                        <h3 style={{ margin: '4px 0 4px', fontSize: 20, fontFamily: 'var(--font-serif)' }}>Personalize a aparência</h3>
                        <p style={{ margin: 0, fontSize: 13, color: 'var(--muted)' }}>Cor e ícone para identificar o agente rapidamente.</p>
                      </div>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                        <span className="eyebrow">Cor do agente</span>
                        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                          {['#1a56db','#0e7490','#7c3aed','#059669','#dc2626','#b45309','#6b21a8','#0f766e','#be185d','#0369a1'].map(c => (
                            <button key={c} onClick={() => setNewAgent(a => ({ ...a, color: c }))}
                              style={{ width: 28, height: 28, borderRadius: '50%', background: c, border: newAgent.color === c ? '3px solid var(--ink)' : '2px solid transparent', cursor: 'pointer', transition: 'transform 0.1s', transform: newAgent.color === c ? 'scale(1.2)' : 'scale(1)' }}/>
                          ))}
                        </div>
                      </label>
                      <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                        <span className="eyebrow">Ícone</span>
                        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                          {['scale','bolt','user','brain','hex','process','book','sparkle','check'].map(iconId => {
                            const IconC = I[iconId] || I.user;
                            return (
                              <button key={iconId} onClick={() => setNewAgent(a => ({ ...a, icon: iconId }))}
                                style={{ width: 36, height: 36, borderRadius: 8, background: newAgent.icon === iconId ? newAgent.color : 'var(--bg-3)',
                                  border: newAgent.icon === iconId ? `2px solid ${newAgent.color}` : '2px solid var(--border-2)',
                                  display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.15s' }}>
                                <IconC size={16} style={{ color: newAgent.icon === iconId ? '#fff' : 'var(--muted)' }}/>
                              </button>
                            );
                          })}
                        </div>
                      </label>
                      {/* Preview */}
                      <div style={{ padding: 14, background: 'var(--bg-3)', borderRadius: 10, border: '1px solid var(--border-2)' }}>
                        <div className="eyebrow" style={{ marginBottom: 8 }}>Prévia</div>
                        <div className="agent-head">
                          <span className="agent-icon" style={{ background: newAgent.color || '#1a56db' }}>
                            {React.createElement(I[newAgent.icon] || I.user, { size: 16, style: { color: '#fff' } })}
                          </span>
                          <div className="agent-name">{newAgent.nome || 'Meu Agente'}</div>
                          <span className="agent-badge agent-badge-custom">Meu agente</span>
                        </div>
                        <div className="agent-meta" style={{ marginTop: 6 }}>Modo: {newAgent.modoDefault}</div>
                        <p className="agent-desc">{newAgent.descricao || 'Descrição do agente...'}</p>
                      </div>
                    </div>
                  )}
                </div>

                <div className="ob-foot">
                  <span className="eyebrow" style={{ fontSize: 10 }}>Salvo localmente</span>
                  <div className="ob-actions">
                    {agentWizardStep > 0 && <button className="btn-ghost" onClick={() => setAgentWizardStep(s => s - 1)}>← Voltar</button>}
                    {agentWizardStep < 2
                      ? <button className="btn-primary" disabled={agentWizardStep === 0 && !newAgent.nome} onClick={() => setAgentWizardStep(s => s + 1)}>
                          Próximo →
                        </button>
                      : <button className="btn-primary" disabled={savingAgent || !newAgent.nome} onClick={async () => {
                          if (!newAgent.nome) return;
                          setSavingAgent(true);
                          try {
                            const r = await fetch('/api/agents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newAgent) });
                            const j = await r.json();
                            if (j.ok) {
                              setShowCreateAgent(false);
                              setAgentWizardStep(0);
                              setNewAgent({ nome: '', descricao: '', modoDefault: 'pecas', systemSupplement: '', color: '#1a56db', icon: 'user' });
                              if (onAgentsChange) onAgentsChange();
                            }
                          } catch {} finally { setSavingAgent(false); }
                        }}>
                          {savingAgent ? 'Salvando...' : '✓ Criar agente'}
                        </button>
                    }
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* ── Modal: Criador de Skills ── */}
          {showSkillCreator && (
            <div className="ob-overlay" onClick={() => setShowSkillCreator(false)}>
              <div className="ob-card" onClick={e => e.stopPropagation()} style={{ maxWidth: 620 }}>
                <button className="ob-close" onClick={() => setShowSkillCreator(false)}><I.x size={14} sw={2}/></button>
                <div className="ob-body" style={{ textAlign: 'left', padding: '24px 28px 16px' }}>
                  <div className="ob-eyebrow">CRIADOR DE SKILLS</div>
                  <h2 style={{ margin: '4px 0 4px', fontSize: 22, fontFamily: 'var(--font-serif)' }}>Nova Skill Personalizada</h2>
                  <p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16 }}>
                    Skills são playbooks especializados injetados no agente. O SynapIA refina o rascunho para um SKILL.md denso, com gatilhos, protocolo de execução, fontes e checklist.
                  </p>
                  <div className="skill-tutorial-box">
                    <strong>Como uma skill funciona</strong>
                    <span>Ela não é só uma nota: define quando deve ser usada, quais fontes priorizar, que perguntas fazer antes de concluir e como validar a resposta. Ao selecioná-la acima, o chat mostra a skill chamada no bloco de execução.</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span className="eyebrow">Nome da skill <span style={{color:'var(--accent)'}}>*</span></span>
                      <input value={newSkill.name} onChange={e => setNewSkill(s => ({ ...s, name: e.target.value }))}
                        placeholder="Ex.: calculos-fgts, recurso-agravo-regimental..."
                        style={{ padding: '8px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'monospace', fontSize: 13, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                      <span style={{ fontSize: 11, color: 'var(--muted)' }}>Somente letras minúsculas, números e hífens.</span>
                    </label>
                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span className="eyebrow">Descrição (quando usar)</span>
                      <input value={newSkill.description} onChange={e => setNewSkill(s => ({ ...s, description: e.target.value }))}
                        placeholder="Ex.: Use quando precisar calcular FGTS, multa de 40% e levantamento judicial"
                        style={{ padding: '8px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 13, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                    </label>
                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <span className="eyebrow">Gatilhos de uso</span>
                      <input value={newSkill.when_to_use} onChange={e => setNewSkill(s => ({ ...s, when_to_use: e.target.value }))}
                        placeholder="Ex.: Use quando houver discussão sobre FGTS, multa de 40%, alvará ou execução trabalhista"
                        style={{ padding: '8px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 13, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                    </label>
                    <label style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span className="eyebrow">Conteúdo da skill</span>
                        <button
                          disabled={refiningSkill || !newSkill.content}
                          onClick={async () => {
                            setRefiningSkill(true);
                            try {
                              const r = await fetch('/api/skills/refine', { method: 'POST', headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify(newSkill) });
                              const j = await r.json();
                              if (j.ok && j.content) setNewSkill(s => ({ ...s, content: j.content.trim(), description: j.description || s.description, when_to_use: j.when_to_use || s.when_to_use }));
                            } catch {} finally { setRefiningSkill(false); }
                          }}
                          style={{ fontSize: 11, padding: '3px 10px', borderRadius: 6, border: '1px solid var(--accent)', background: 'transparent', color: 'var(--accent)', cursor: refiningSkill || !newSkill.content ? 'not-allowed' : 'pointer', opacity: refiningSkill || !newSkill.content ? 0.5 : 1, display: 'flex', alignItems: 'center', gap: 4 }}>
                          <I.sparkle size={10}/> {refiningSkill ? 'Gerando...' : '✨ Expandir com IA'}
                        </button>
                      </div>
                      <textarea value={newSkill.content} onChange={e => setNewSkill(s => ({ ...s, content: e.target.value }))}
                        placeholder={`Cole o rascunho bruto da skill. Pode ser desorganizado: regra, tese, trecho de manual, jurisprudência, checklist, fonte, estratégia. O refinador transforma em SKILL.md de alto nível.\n\nExemplo:\n- Regras específicas de FGTS\n- Como calcular multa de 40%\n- Fontes oficiais e perguntas obrigatórias antes de concluir`}
                        rows={10}
                        style={{ padding: '9px 12px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontFamily: 'inherit', fontSize: 13, resize: 'vertical', background: 'var(--bg-elev)', color: 'var(--ink)', lineHeight: 1.6 }}/>
                    </label>
                  </div>
                </div>
                <div className="ob-foot">
                  <span className="eyebrow" style={{ fontSize: 10 }}>Salvo como SKILL.md</span>
                  <div className="ob-actions">
                    <button className="btn-ghost" onClick={() => setShowSkillCreator(false)}>Cancelar</button>
                    <button className="btn-primary" disabled={savingSkill || !newSkill.name || !newSkill.content} onClick={async () => {
                      if (!newSkill.name || !newSkill.content) return;
                      setSavingSkill(true);
                      try {
                        const r = await fetch('/api/skills', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(newSkill) });
                        const j = await r.json();
                        if (j.ok) {
                          setShowSkillCreator(false);
                          setNewSkill({ name: '', description: '', when_to_use: '', content: '' });
                          if (onSkillsChange) onSkillsChange();
                          alert('Skill criada e refinada. Selecione-a no painel Fontes + Skills para usar no chat.');
                        } else { alert('Erro: ' + (j.error || 'Falha ao salvar')); }
                      } catch (e) { alert('Erro ao salvar skill.'); } finally { setSavingSkill(false); }
                    }}>
                      {savingSkill ? 'Salvando...' : '✓ Criar skill'}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      )}

      {tab === 'templates' && (
        <TemplatesTab onPickPrompt={onPickPrompt} onPickMode={onPickMode}/>
      )}

      {tab === 'calc' && (
        <CalculationsTab onPickPrompt={onPickPrompt} onPickMode={onPickMode}/>
      )}

      {tab === 'juris' && (
        <JurisTab onPickPrompt={onPickPrompt} onPickMode={onPickMode}/>
      )}
    </div>
  );
};

window.Welcome = Welcome;

// ============================================================================
// JURIS TAB — busca full-text no banco local LanceDB (540k STF/STJ)
// ============================================================================
const JURIS_TIPOS = [
  { value: 'acordao',              label: 'Acórdão' },
  { value: 'sumula',               label: 'Súmula' },
  { value: 'sumula_vinculante',    label: 'Súmula Vinculante' },
  { value: 'sumula_stj',           label: 'Súmula STJ' },
  { value: 'informativo',          label: 'Informativo' },
  { value: 'tema_repetitivo_stj',  label: 'Tema Repetitivo' },
  { value: 'monocratica',          label: 'Monocrática' },
];

const JurisTab = ({ onPickPrompt, onPickMode }) => {
  const [query, setQuery]         = React.useState('');
  const [tribunais, setTribunais] = React.useState([]);
  const [tipos, setTipos]         = React.useState([]);
  const [limit, setLimit]         = React.useState(10);
  const [loading, setLoading]     = React.useState(false);
  const [results, setResults]     = React.useState(null); // null = nunca buscou
  const [error, setError]         = React.useState('');
  const [expanded, setExpanded]   = React.useState(null);

  const toggleArr = (arr, setArr, v) =>
    setArr(arr.includes(v) ? arr.filter(x => x !== v) : [...arr, v]);

  const search = async () => {
    if (!query.trim()) return;
    setLoading(true);
    setError('');
    setResults(null);
    setExpanded(null);
    try {
      const body = { query: query.trim(), limit };
      if (tribunais.length) body.tribunais = tribunais;
      if (tipos.length)     body.tipos = tipos;
      const r = await fetch('/api/lancedb/search', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const j = await r.json();
      if (!j.ok) throw new Error(j.error || 'Erro desconhecido');
      // Parse markdown → array de docs via endpoint raw
      // Usa endpoint que retorna JSON diretamente via script Python
      const r2 = await fetch('/api/lancedb/search-raw', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const j2 = await r2.json();
      setResults(j2.ok ? j2.docs : []);
    } catch (e) {
      setError(String(e.message || e));
      setResults([]);
    } finally {
      setLoading(false);
    }
  };

  const sendToChat = (doc) => {
    const txt = `Analise a seguinte decisão do ${doc.tribunal} (${doc.tipo}):\n\n**Processo:** ${doc.processo}\n**Relator:** ${doc.relator}\n**Data:** ${(doc.data_julgamento||'').slice(0,10)}\n**Órgão:** ${doc.orgao_julgador||''}\n\n${doc.texto_busca}\n\nFaça uma análise crítica desta decisão e diga como ela se aplica ao meu caso.`;
    if (onPickMode) onPickMode('chat');
    if (onPickPrompt) onPickPrompt(txt);
    setTimeout(() => {
      const ta = document.querySelector('textarea');
      if (ta) { ta.focus(); ta.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
    }, 80);
  };

  const usarNoAgente = (doc) => {
    const txt = `Usando o banco local de jurisprudência, analise o seguinte precedente do ${doc.tribunal} sobre "${query}" e relacione com o caso em questão:\n\nProcesso: ${doc.processo} | Relator: ${doc.relator} | Data: ${(doc.data_julgamento||'').slice(0,10)}\n${doc.texto_busca}`;
    if (onPickMode) onPickMode('agent');
    if (onPickPrompt) onPickPrompt(txt);
    setTimeout(() => {
      const ta = document.querySelector('textarea');
      if (ta) { ta.focus(); ta.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
    }, 80);
  };

  const getTribBadgeColor = (t) =>
    t === 'STF' ? '#7c3aed' : t === 'STJ' ? '#0e7490' : '#374151';

  const getTipoLabel = (v) =>
    (JURIS_TIPOS.find(t => t.value === v) || { label: v }).label;

  return (
    <div className="welcome-pane juris-pane">
      {/* Header */}
      <div className="juris-header">
        <div className="juris-header-left">
          <div className="juris-header-icon">
            <I.scale size={20} sw={1.8} style={{ color: '#fff' }}/>
          </div>
          <div>
            <div className="juris-title">Banco de Jurisprudência Local</div>
            <div className="juris-sub">540.148 decisões · STF &amp; STJ · Busca full-text offline</div>
          </div>
        </div>
        <div className="juris-badge">
          <span className="juris-badge-dot"/>
          Offline · sem internet
        </div>
      </div>

      {/* Search bar */}
      <div className="juris-search-row">
        <div className="juris-search-wrap">
          <I.search size={16} style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)', pointerEvents: 'none' }}/>
          <input
            className="juris-search-input"
            placeholder="Ex.: dano moral inscrição indevida cadastro inadimplentes"
            value={query}
            onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && search()}
          />
        </div>
        <button
          className="btn-primary juris-search-btn"
          onClick={search}
          disabled={loading || !query.trim()}
        >
          {loading
            ? <><span className="juris-spinner"/><span>Buscando…</span></>
            : <><I.search size={14} sw={2}/><span>Buscar</span></>
          }
        </button>
      </div>

      {/* Filters */}
      <div className="juris-filters">
        <div className="juris-filter-group">
          <span className="eyebrow" style={{ fontSize: 10 }}>Tribunal</span>
          <div className="juris-chips">
            {['STF', 'STJ'].map(t => (
              <button
                key={t}
                className={`juris-chip ${tribunais.includes(t) ? 'active' : ''}`}
                onClick={() => toggleArr(tribunais, setTribunais, t)}
                style={tribunais.includes(t) ? { background: getTribBadgeColor(t), borderColor: getTribBadgeColor(t), color: '#fff' } : {}}
              >{t}</button>
            ))}
          </div>
        </div>
        <div className="juris-filter-group">
          <span className="eyebrow" style={{ fontSize: 10 }}>Tipo</span>
          <div className="juris-chips">
            {JURIS_TIPOS.map(t => (
              <button
                key={t.value}
                className={`juris-chip ${tipos.includes(t.value) ? 'active' : ''}`}
                onClick={() => toggleArr(tipos, setTipos, t.value)}
              >{t.label}</button>
            ))}
          </div>
        </div>
        <div className="juris-filter-group" style={{ marginLeft: 'auto', minWidth: 110 }}>
          <span className="eyebrow" style={{ fontSize: 10 }}>Resultados</span>
          <select
            className="juris-select"
            value={limit}
            onChange={e => setLimit(Number(e.target.value))}
          >
            {[5, 10, 20, 30].map(n => <option key={n} value={n}>{n} resultados</option>)}
          </select>
        </div>
      </div>

      {/* Error */}
      {error && (
        <div className="juris-error">
          <I.x size={14} sw={2}/> {error}
        </div>
      )}

      {/* Empty state */}
      {results === null && !loading && (
        <div className="juris-empty">
          <I.scale size={40} sw={1.2} style={{ color: 'var(--border-strong)', marginBottom: 12 }}/>
          <div style={{ fontWeight: 600, color: 'var(--ink-2)', marginBottom: 6 }}>Pesquise no banco local</div>
          <div style={{ fontSize: 13, color: 'var(--muted)', maxWidth: 360, textAlign: 'center', lineHeight: 1.6 }}>
            Digite termos jurídicos e pressione Enter. Busca FTS diretamente no LanceDB local — sem precisar do servidor Ratio ou de internet.
          </div>
        </div>
      )}

      {/* No results */}
      {results !== null && results.length === 0 && !loading && !error && (
        <div className="juris-empty">
          <I.search size={36} sw={1.2} style={{ color: 'var(--border-strong)', marginBottom: 12 }}/>
          <div style={{ fontWeight: 600, color: 'var(--ink-2)', marginBottom: 6 }}>Nenhum resultado</div>
          <div style={{ fontSize: 13, color: 'var(--muted)' }}>Tente termos sem acentos ou mais gerais.</div>
        </div>
      )}

      {/* Results */}
      {results !== null && results.length > 0 && (
        <div className="juris-results">
          <div className="juris-results-header">
            <span className="eyebrow">{results.length} resultado{results.length !== 1 ? 's' : ''} encontrado{results.length !== 1 ? 's' : ''}</span>
          </div>
          {results.map((doc, i) => {
            const isOpen = expanded === i;
            const dataFmt = (doc.data_julgamento || '').slice(0, 10).split('-').reverse().join('/');
            return (
              <div key={i} className={`juris-card ${isOpen ? 'open' : ''}`}>
                <div className="juris-card-head" onClick={() => setExpanded(isOpen ? null : i)}>
                  <div className="juris-card-badges">
                    <span className="juris-trib-badge" style={{ background: getTribBadgeColor(doc.tribunal) }}>
                      {doc.tribunal}
                    </span>
                    <span className="juris-tipo-badge">{getTipoLabel(doc.tipo)}</span>
                  </div>
                  <div className="juris-card-main">
                    <div className="juris-card-processo">{doc.processo || '—'}</div>
                    <div className="juris-card-meta">
                      {doc.relator && <span><I.user size={11} sw={2}/> {doc.relator}</span>}
                      {dataFmt && dataFmt !== '//' && <span><I.clock size={11} sw={2}/> {dataFmt}</span>}
                      {doc.orgao_julgador && <span>{doc.orgao_julgador}</span>}
                      {doc.ramo_direito && <span className="juris-ramo">{doc.ramo_direito}</span>}
                    </div>
                    <div className="juris-card-snippet">
                      {(doc.texto_busca || '').slice(0, isOpen ? 9999 : 220)}{!isOpen && (doc.texto_busca||'').length > 220 ? '…' : ''}
                    </div>
                  </div>
                  <I.arrowDown size={14} sw={2} style={{ flexShrink: 0, color: 'var(--muted)', transition: 'transform .2s', transform: isOpen ? 'rotate(180deg)' : 'none' }}/>
                </div>
                {isOpen && (
                  <div className="juris-card-actions">
                    <button className="juris-action-btn" onClick={() => sendToChat(doc)}>
                      <I.chat size={13} sw={2}/> Analisar no chat
                    </button>
                    <button className="juris-action-btn accent" onClick={() => usarNoAgente(doc)}>
                      <I.bolt size={13} sw={2}/> Usar no agente
                    </button>
                    {doc.url && (
                      <a className="juris-action-btn" href={doc.url} target="_blank" rel="noopener noreferrer">
                        <I.link size={13} sw={2}/> Inteiro teor
                      </a>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

window.JurisTab = JurisTab;


// ============================================================================
const TEMPLATES = [
  // PEÇAS PROCESSUAIS
  { id: 'contestacao_trab', code: 'CT', cat: 'Trabalhista', title: 'Contestação Trabalhista',
    hint: '6 seções · preliminares + mérito + pedidos · CLT/Súm. TST',
    mode: 'pecas',
    fields: [
      { k: 'reclamante', label: 'Nome do reclamante', placeholder: 'João da Silva' },
      { k: 'reclamada', label: 'Empresa reclamada', placeholder: 'XYZ Ltda' },
      { k: 'verbas', label: 'Verbas pleiteadas (lista)', placeholder: 'Horas extras, adicional noturno, FGTS', textarea: true },
      { k: 'fatos_chave', label: 'Fatos-chave da defesa', placeholder: 'Cumpria 8h diárias, recebeu corretamente...', textarea: true },
      { k: 'preliminares', label: 'Preliminares (opcional)', placeholder: 'Inépcia, ilegitimidade, prescrição...' }
    ],
    promptTpl: (v) => `Elabore CONTESTAÇÃO TRABALHISTA padrão doutoral para a reclamada ${v.reclamada}, em face do reclamante ${v.reclamante}.\n\n## VERBAS PLEITEADAS\n${v.verbas}\n\n## FATOS DA DEFESA\n${v.fatos_chave}\n\n${v.preliminares ? `## PRELIMINARES A ARGUIR\n${v.preliminares}\n` : ''}\nEstruture com: I — Preliminares; II — Mérito (impugnação por verba); III — Da prescrição (art. 11 CLT); IV — Dos pedidos. Cite CLT, súmulas TST verificadas e o art. 818 da CLT (ônus da prova). Use modo Peças.`
  },
  { id: 'apelacao', code: 'AP', cat: 'Recursal', title: 'Apelação Cível',
    hint: 'CPC art. 1.009 · efeito devolutivo amplo · cotejo dispositivo',
    mode: 'recursos',
    fields: [
      { k: 'apelante', label: 'Apelante', placeholder: 'João da Silva' },
      { k: 'apelado', label: 'Apelado', placeholder: 'Banco XYZ S.A.' },
      { k: 'sentenca', label: 'Sentença recorrida (síntese)', placeholder: 'Julgou improcedentes os pedidos...', textarea: true },
      { k: 'razoes_chave', label: 'Razões-chave da reforma', placeholder: 'Cerceamento de defesa; valoração indevida da prova...', textarea: true }
    ],
    promptTpl: (v) => `Elabore APELAÇÃO CÍVEL com razões doutorais. Apelante: ${v.apelante}. Apelado: ${v.apelado}.\n\n## SENTENÇA RECORRIDA\n${v.sentenca}\n\n## RAZÕES DE REFORMA\n${v.razoes_chave}\n\nEstruture com: I — Tempestividade e preparo (CPC arts. 1.003 e 1.007); II — Síntese do julgado; III — Razões de reforma (cada tópico em subseção); IV — Pedidos (reforma total/parcial). Cite CPC, jurisprudência STJ verificada e súmulas aplicáveis.`
  },
  { id: 'resp', code: 'RE', cat: 'Excepcional', title: 'Recurso Especial (REsp)',
    hint: 'CF 105 III · prequestionamento · cotejo analítico',
    mode: 'recursos',
    fields: [
      { k: 'recorrente', label: 'Recorrente', placeholder: 'João da Silva' },
      { k: 'recorrido', label: 'Recorrido', placeholder: 'Banco XYZ S.A.' },
      { k: 'alinea', label: 'Alínea', placeholder: 'a — contrariedade a lei federal' },
      { k: 'dispositivos', label: 'Dispositivos federais violados', placeholder: 'art. 373, I, CPC; art. 422, CC', textarea: true },
      { k: 'acordao', label: 'Acórdão recorrido (síntese)', placeholder: 'O TJ/SP entendeu...', textarea: true },
      { k: 'paradigma', label: 'Acórdão paradigma (se alínea c)', placeholder: 'STJ, REsp 1.234.567/RJ, Rel...' }
    ],
    promptTpl: (v) => `Elabore RECURSO ESPECIAL ao STJ com cotejo analítico doutoral.\nRecorrente: ${v.recorrente}. Recorrido: ${v.recorrido}.\nAlínea: ${v.alinea}.\nDispositivos federais violados: ${v.dispositivos}.\n\n## ACÓRDÃO RECORRIDO\n${v.acordao}\n\n${v.paradigma ? `## PARADIGMA (alínea c)\n${v.paradigma}\n` : ''}\nEstruture: I — Pressupostos de admissibilidade (cabimento, tempestividade, preparo, prequestionamento — Súm. 282/356 STF, Súm. 211 STJ); II — Razões de mérito por dispositivo violado; III — Cotejo analítico (se alínea c); IV — Pedido de reforma. Use modo Recursos.`
  },
  { id: 'rextr', code: 'RX', cat: 'Excepcional', title: 'Recurso Extraordinário (RE)',
    hint: 'CF 102 III · repercussão geral · prequestionamento exaustivo',
    mode: 'recursos',
    fields: [
      { k: 'recorrente', label: 'Recorrente', placeholder: '' },
      { k: 'recorrido', label: 'Recorrido', placeholder: '' },
      { k: 'alinea', label: 'Alínea', placeholder: 'a — contrariedade à CF' },
      { k: 'dispositivos_cf', label: 'Dispositivos da CF violados', placeholder: 'art. 5º, LV; art. 93, IX' },
      { k: 'tema_rg', label: 'Tema/Repercussão Geral aplicável', placeholder: 'Ex.: Tema 1.058 STF' },
      { k: 'sintese', label: 'Síntese do acórdão e da violação', placeholder: '', textarea: true }
    ],
    promptTpl: (v) => `Elabore RECURSO EXTRAORDINÁRIO ao STF com fundamentação doutoral.\nRecorrente: ${v.recorrente}. Recorrido: ${v.recorrido}.\nAlínea: ${v.alinea}. Dispositivos CF violados: ${v.dispositivos_cf}.\n${v.tema_rg ? `Tema/RG: ${v.tema_rg}\n` : ''}\n## SÍNTESE\n${v.sintese}\n\nEstruture: I — Cabimento, tempestividade e preparo; II — Repercussão geral fundamentada (art. 1.035 CPC); III — Prequestionamento exaustivo (Súm. 282/356 STF); IV — Mérito constitucional; V — Pedido. Use modo Recursos.`
  },
  { id: 'embargos_decl', code: 'ED', cat: 'Recursal', title: 'Embargos de Declaração',
    hint: 'CPC art. 1.022 · omissão / contradição / obscuridade / erro material',
    mode: 'pecas',
    fields: [
      { k: 'embargante', label: 'Embargante', placeholder: '' },
      { k: 'decisao', label: 'Decisão embargada (data e ementa)', placeholder: '', textarea: true },
      { k: 'vicios', label: 'Vícios apontados (lista)', placeholder: 'Omissão quanto ao pedido X; contradição entre fundamentos Y e Z;', textarea: true }
    ],
    promptTpl: (v) => `Elabore EMBARGOS DE DECLARAÇÃO com fundamento no CPC art. 1.022.\nEmbargante: ${v.embargante}.\n\n## DECISÃO EMBARGADA\n${v.decisao}\n\n## VÍCIOS APONTADOS\n${v.vicios}\n\nEstruture cada vício em subseção (omissão / contradição / obscuridade / erro material), com pedido de saneamento E, conforme o caso, prequestionamento (Súm. 98 STJ, art. 1.025 CPC). Use modo Peças.`
  },
  { id: 'embargos_diverg', code: 'EDI', cat: 'Excepcional', title: 'Embargos de Divergência',
    hint: 'STJ/STF · cotejo entre acórdão recorrido e paradigma',
    mode: 'recursos',
    fields: [
      { k: 'embargante', label: 'Embargante', placeholder: '' },
      { k: 'embargado', label: 'Embargado', placeholder: '' },
      { k: 'acordao_emb', label: 'Acórdão embargado (síntese)', placeholder: '', textarea: true },
      { k: 'paradigma', label: 'Acórdão paradigma (cite tribunal/relator/data)', placeholder: '', textarea: true },
      { k: 'tese_diverg', label: 'Tese divergente', placeholder: '', textarea: true }
    ],
    promptTpl: (v) => `Elabore EMBARGOS DE DIVERGÊNCIA com cotejo analítico doutoral.\nEmbargante: ${v.embargante}. Embargado: ${v.embargado}.\n\n## ACÓRDÃO EMBARGADO\n${v.acordao_emb}\n\n## ACÓRDÃO PARADIGMA\n${v.paradigma}\n\n## TESE DIVERGENTE\n${v.tese_diverg}\n\nEstruture: I — Cabimento (RISTJ art. 266 e ss.); II — Demonstração da divergência (similitude fática + tese contrária); III — Mérito; IV — Pedido. Use modo Recursos.`
  },
  { id: 'agravo_inst', code: 'AI', cat: 'Recursal', title: 'Agravo de Instrumento',
    hint: 'CPC art. 1.015 · taxatividade mitigada (Tema 988 STJ)',
    mode: 'pecas',
    fields: [
      { k: 'agravante', label: 'Agravante', placeholder: '' },
      { k: 'agravado', label: 'Agravado', placeholder: '' },
      { k: 'decisao_int', label: 'Decisão interlocutória recorrida', placeholder: '', textarea: true },
      { k: 'urgencia', label: 'Pedido de efeito suspensivo (justifique)', placeholder: 'Periculum: ... Fumus: ...', textarea: true }
    ],
    promptTpl: (v) => `Elabore AGRAVO DE INSTRUMENTO. Agravante: ${v.agravante}. Agravado: ${v.agravado}.\n\n## DECISÃO RECORRIDA\n${v.decisao_int}\n\n## EFEITO SUSPENSIVO\n${v.urgencia}\n\nEstruture: I — Cabimento (CPC 1.015 ou Tema 988 STJ); II — Tempestividade e peças obrigatórias (CPC 1.017); III — Razões de reforma; IV — Pedido de efeito suspensivo + mérito. Use modo Peças.`
  },
  { id: 'mand_seg', code: 'MS', cat: 'Especial', title: 'Mandado de Segurança',
    hint: 'L. 12.016 · direito líquido e certo · liminar',
    mode: 'pecas',
    fields: [
      { k: 'impetrante', label: 'Impetrante', placeholder: '' },
      { k: 'autoridade', label: 'Autoridade coatora', placeholder: 'Sec. Receita do Município X' },
      { k: 'ato', label: 'Ato coator (resumo)', placeholder: '', textarea: true },
      { k: 'direito', label: 'Direito líquido e certo invocado', placeholder: '', textarea: true },
      { k: 'liminar', label: 'Justifique a liminar (fumus + periculum)', placeholder: '', textarea: true }
    ],
    promptTpl: (v) => `Elabore MANDADO DE SEGURANÇA (L. 12.016/2009).\nImpetrante: ${v.impetrante}. Autoridade coatora: ${v.autoridade}.\n\n## ATO COATOR\n${v.ato}\n\n## DIREITO LÍQUIDO E CERTO\n${v.direito}\n\n## LIMINAR\n${v.liminar}\n\nEstruture: I — Cabimento e legitimidade; II — Direito líquido e certo (prova pré-constituída); III — Pedido de liminar (art. 7º, III); IV — Mérito; V — Pedidos. Use modo Peças.`
  },
  // CÁLCULOS — usam o modo agêntico (motor automático)
  { id: 'calc_rescisao', code: 'CR', cat: 'Cálculo', title: 'Cálculo de Rescisão Trabalhista',
    hint: 'Saldo + aviso + 13º + férias + FGTS + multa · auto via motor',
    mode: 'agent',
    fields: [
      { k: 'salario', label: 'Salário base mensal (R$)', placeholder: '3500.00' },
      { k: 'admissao', label: 'Data de admissão', placeholder: '2018-03-15', type: 'date' },
      { k: 'demissao', label: 'Data de demissão', placeholder: '2026-04-10', type: 'date' },
      { k: 'motivo', label: 'Motivo', placeholder: '', select: ['sem_justa_causa','rescisao_indireta','pedido_demissao','justa_causa','acordo_484a','fim_contrato'] },
      { k: 'aviso', label: 'Aviso prévio', placeholder: '', select: ['indenizado','trabalhado','nao_devido'] },
      { k: 'fgts', label: 'Saldo FGTS estimado (R$)', placeholder: '12000' },
      { k: 'ferias_v', label: 'Tem férias vencidas?', placeholder: '', select: ['sim','nao'] }
    ],
    promptTpl: (v) => `Calcule a rescisão trabalhista usando o motor calcular_verbas_rescisorias com:\n• salario_base: ${v.salario}\n• data_admissao: ${v.admissao}\n• data_demissao: ${v.demissao}\n• motivo: ${v.motivo}\n• aviso_previo: ${v.aviso}\n• saldo_fgts_estimado: ${v.fgts || 0}\n• ferias_vencidas: ${v.ferias_v === 'sim'}\n\nApresente memória de cálculo, fundamentação legal e pontos para confirmação.`
  },
  { id: 'calc_liquidacao', code: 'CL', cat: 'Cálculo', title: 'Liquidação de Sentença (ADC 58)',
    hint: 'IPCA-E + SELIC + Lei 14.905/2024 · INSS/IRRF · auto',
    mode: 'agent',
    fields: [
      { k: 'parcelas', label: 'Parcelas (uma por linha: descrição;valor;data YYYY-MM-DD)', placeholder: 'Horas extras;5000;2022-08-15\nFérias indenizadas;3500;2022-12-01', textarea: true },
      { k: 'ajuiz', label: 'Data de ajuizamento', placeholder: '2023-01-20', type: 'date' },
      { k: 'atual', label: 'Data atual / liquidação', placeholder: '2026-04-29', type: 'date' },
      { k: 'ipca_pre', label: 'IPCA-E acumulado pré-judicial (%)', placeholder: '12.5' },
      { k: 'selic', label: 'SELIC acumulada (%)', placeholder: '24.7' },
      { k: 'ipca_pos', label: 'IPCA pós-Lei 14.905 (%)', placeholder: '3.2' },
      { k: 'juros_pos', label: 'Taxa legal pós-Lei 14.905 (%)', placeholder: '2.1' }
    ],
    promptTpl: (v) => {
      const lines = (v.parcelas || '').split('\n').map(l => l.trim()).filter(Boolean);
      const parcelas = lines.map(l => { const [d,vh,dt] = l.split(';').map(s => s.trim()); return { descricao: d, valor_historico: parseFloat(vh), data_devida: dt }; });
      return `Calcule a liquidação usando calcular_liquidacao_sentenca:\n• parcelas: ${JSON.stringify(parcelas)}\n• data_ajuizamento: ${v.ajuiz}\n• data_atual: ${v.atual}\n• ipca_pre_pct: ${v.ipca_pre || 0}\n• selic_pct: ${v.selic || 0}\n• ipca_pos_pct: ${v.ipca_pos || 0}\n• juros_legal_pos_pct: ${v.juros_pos || 0}\n\nApresente o resultado em tabela, com discriminação por parcela, total bruto, descontos e líquido. Use modo Agêntico.`;
    }
  },
  { id: 'calc_he', code: 'HE', cat: 'Cálculo', title: 'Horas Extras + Reflexos',
    hint: 'HE 50/100% · DSR · 13º · férias · FGTS · auto',
    mode: 'agent',
    fields: [
      { k: 'sal', label: 'Salário mensal (R$)', placeholder: '3500' },
      { k: 'jornada', label: 'Jornada semanal (h)', placeholder: '44' },
      { k: 'he50', label: 'HE 50% por semana', placeholder: '8' },
      { k: 'he100', label: 'HE 100% por semana (dom/feriados)', placeholder: '0' },
      { k: 'meses', label: 'Meses do período', placeholder: '24' }
    ],
    promptTpl: (v) => `Calcule horas extras com calcular_horas_extras:\n• salario_mensal: ${v.sal}\n• jornada_semanal: ${v.jornada}\n• he_semana_50: ${v.he50 || 0}\n• he_semana_100: ${v.he100 || 0}\n• meses_periodo: ${v.meses}\n• com_reflexos: true\n\nDevolva o total mensal e total do período em tabela.`
  },
  { id: 'pericia', code: 'PE', cat: 'Análise', title: 'Quesitos de Perícia',
    hint: 'Insalubridade · contábil · médica · grafotécnica',
    mode: 'agent',
    fields: [
      { k: 'tipo', label: 'Tipo de perícia', placeholder: '', select: ['insalubridade','contabil','medica','grafotecnica'] },
      { k: 'caso', label: 'Contexto do caso (opcional)', placeholder: 'Operador exposto a ruído > 85 dB...', textarea: true }
    ],
    promptTpl: (v) => `Use gerar_quesitos_pericia com tipo_pericia: ${v.tipo}.\n${v.caso ? `Contexto do caso: ${v.caso}\nApós receber os quesitos padrão, ADAPTE-OS ao caso.` : 'Apresente os quesitos padrão.'}`
  },
  { id: 'auditoria', code: 'AU', cat: 'Análise', title: 'Auditoria de Minuta',
    hint: 'Score 0–100 · vícios · estilo doutoral · súmulas',
    mode: 'agent',
    fields: [
      { k: 'minuta', label: 'Cole a minuta a auditar', placeholder: 'EXCELENTÍSSIMO SENHOR JUIZ...', textarea: true }
    ],
    promptTpl: (v) => `Audite a minuta abaixo:\n1. Use auditar_minuta para checklist.\n2. Use estilo_juridico_profissional para diagnóstico de registro.\n3. Use analisar_ortografia para revisão.\n\nMinuta:\n"""\n${v.minuta}\n"""\n\nApresente: score consolidado, itens faltantes, vícios e recomendações cirúrgicas.`
  }
];

const TemplatesTab = ({ onPickPrompt, onPickMode }) => {
  const [active, setActive] = React.useState(null);
  const [values, setValues] = React.useState({});
  const [filter, setFilter] = React.useState('all');

  const cats = ['all', ...new Set(TEMPLATES.map(t => t.cat))];
  const visible = filter === 'all' ? TEMPLATES : TEMPLATES.filter(t => t.cat === filter);

  const open = (tpl) => {
    setActive(tpl);
    const initial = {};
    tpl.fields.forEach(f => initial[f.k] = '');
    setValues(initial);
  };

  const submit = () => {
    if (!active) return;
    // valida campos obrigatórios mínimos (todos não-textarea sem default)
    const txt = active.promptTpl(values);
    onPickMode && active.mode && onPickMode(active.mode);
    onPickPrompt(txt);
    setActive(null);
  };

  return (
    <div className="welcome-pane">
      <div className="tpl-filter-row">
        <span className="tpl-filter-label">Categoria:</span>
        {cats.map(c => (
          <button key={c} className={`tpl-filter-chip ${filter === c ? 'active' : ''}`} onClick={() => setFilter(c)}>
            {c === 'all' ? 'Todos' : c}
          </button>
        ))}
        <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--soft)' }}>{visible.length} templates</span>
      </div>
      <div className="template-grid">
        {visible.map(t => (
          <button key={t.id} className="template-card" onClick={() => open(t)}>
            <span className="template-code">{t.code}</span>
            <div className="template-body">
              <div className="template-cat">{t.cat}</div>
              <div className="template-title">{t.title}</div>
              <div className="template-hint">{t.hint}</div>
            </div>
            <I.arrowR size={14} sw={2}/>
          </button>
        ))}
      </div>

      {active && (
        <div className="ob-overlay" onClick={() => setActive(null)}>
          <div className="ob-card" onClick={e => e.stopPropagation()} style={{ maxWidth: 600 }}>
            <button className="ob-close" onClick={() => setActive(null)}><I.x size={14} sw={2}/></button>
            <div className="ob-body" style={{ textAlign: 'left', padding: '28px 28px 12px' }}>
              <div className="ob-eyebrow">{active.cat.toUpperCase()} · {active.code}</div>
              <h2 className="ob-title" style={{ textAlign: 'left' }}>{active.title}</h2>
              <p style={{ margin: '4px 0 16px', fontSize: 13, color: 'var(--muted)' }}>{active.hint}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {active.fields.map(f => (
                  <label key={f.k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                    <span className="eyebrow">{f.label}</span>
                    {f.select ? (
                      <select value={values[f.k] || ''} onChange={e => setValues(v => ({ ...v, [f.k]: e.target.value }))}
                        style={{ padding: '8px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontSize: 13.5, background: 'var(--bg-elev)', color: 'var(--ink)' }}>
                        <option value="">— selecione —</option>
                        {f.select.map(o => <option key={o} value={o}>{o}</option>)}
                      </select>
                    ) : f.textarea ? (
                      <textarea value={values[f.k] || ''} onChange={e => setValues(v => ({ ...v, [f.k]: e.target.value }))}
                        placeholder={f.placeholder} rows={4}
                        style={{ padding: '8px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontSize: 13, fontFamily: 'inherit', resize: 'vertical', background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                    ) : (
                      <input type={f.type || 'text'} value={values[f.k] || ''} onChange={e => setValues(v => ({ ...v, [f.k]: e.target.value }))}
                        placeholder={f.placeholder}
                        style={{ padding: '8px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', fontSize: 13.5, background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                    )}
                  </label>
                ))}
              </div>
            </div>
            <div className="ob-foot">
              <span className="eyebrow">Modo: {active.mode}</span>
              <div className="ob-actions">
                <button className="btn-ghost" onClick={() => setActive(null)}>Cancelar</button>
                <button className="btn-primary" onClick={submit}>Gerar prompt <I.arrowR size={12} sw={2}/></button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.TemplatesTab = TemplatesTab;

const CALC_MODES = {
  civil: {
    title: 'Liquidação cível',
    icon: 'scale',
    hint: 'Cole sentença, acordo, valores ou uma lista simples de parcelas. A IA extrai valores e datas; os índices oficiais são estimados automaticamente.',
    placeholder: 'Ex.: Sentença condenou ao pagamento de dano moral de R$ 10.000,00 desde 15/09/2024 e dano material de R$ 2.500,00 desde 10/06/2023. Honorários de 10%.',
    fields: [
      { k: 'parcelasTexto', label: 'Parcelas estruturadas', textarea: true, placeholder: 'Dano moral;10000;2024-09-15;indenizatoria' },
      { k: 'dataCalculo', label: 'Data do cálculo', type: 'date' },
      { k: 'multaPct', label: 'Multa (%)', placeholder: '0' },
      { k: 'honorariosPct', label: 'Honorários (%)', placeholder: '10' },
      { k: 'correcaoPct', label: 'Correção manual (%)', placeholder: 'auto' },
      { k: 'jurosPct', label: 'Juros/taxa legal manual (%)', placeholder: 'auto' },
    ],
  },
  trabalhista: {
    title: 'Liquidação trabalhista',
    icon: 'calc',
    hint: 'Informe verbas, datas e ajuizamento em texto corrido. O motor aplica ADC 58, Lei 14.905/2024 e gera memória estimada compatível com conferência no PJe-Calc.',
    placeholder: 'Ex.: Ajuizamento em 10/03/2024. Horas extras de R$ 5.000,00 devidas em 15/08/2022; adicional noturno de R$ 1.800,00 devido em 10/01/2023. Honorários de 10%.',
    fields: [
      { k: 'parcelasTexto', label: 'Parcelas estruturadas', textarea: true, placeholder: 'Horas extras;5000;2022-08-15\nAdicional noturno;1800;2023-01-10' },
      { k: 'dataAjuizamento', label: 'Data de ajuizamento', type: 'date' },
      { k: 'dataCalculo', label: 'Data do cálculo', type: 'date' },
      { k: 'honorariosPct', label: 'Honorários (%)', placeholder: '10' },
      { k: 'ipcaPrePct', label: 'IPCA-E pré-judicial manual (%)', placeholder: 'auto' },
      { k: 'selicPct', label: 'SELIC até 29/08/2024 manual (%)', placeholder: 'auto' },
      { k: 'ipcaPosPct', label: 'IPCA pós-Lei 14.905 manual (%)', placeholder: 'auto' },
      { k: 'jurosLegalPct', label: 'Taxa legal pós-Lei 14.905 manual (%)', placeholder: 'auto' },
    ],
  },
};

const CalculationsTab = ({ onPickPrompt, onPickMode }) => {
  const [tipo, setTipo] = React.useState('civil');
  const [values, setValues] = React.useState({});
  const [dadosLivres, setDadosLivres] = React.useState('');
  const [uploads, setUploads] = React.useState([]);
  const [attachmentIds, setAttachmentIds] = React.useState([]);
  const [advanced, setAdvanced] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [downloading, setDownloading] = React.useState('');
  const [result, setResult] = React.useState(null);
  const [error, setError] = React.useState('');
  const fileInputRef = React.useRef(null);
  const cfg = CALC_MODES[tipo] || CALC_MODES.civil;
  const setValue = (k, v) => setValues(prev => ({ ...prev, [k]: v }));
  const resetCalc = (resetType = false) => {
    if (resetType) setTipo('civil');
    setValues({});
    setDadosLivres('');
    setUploads([]);
    setAttachmentIds([]);
    setResult(null);
    setError('');
    if (fileInputRef.current) fileInputRef.current.value = '';
  };
  const handleFiles = async (files) => {
    const selected = Array.from(files || []);
    if (!selected.length) return;
    setUploading(true); setError('');
    try {
      const out = await api.upload(selected);
      setUploads(prev => [...prev, ...(out.arquivos || [])]);
      setAttachmentIds(prev => [...prev, ...(out.attachmentIds || [])].filter(Boolean));
    } catch (e) {
      setError(e.message || 'Falha ao importar documentos');
    } finally { setUploading(false); }
  };
  const run = async () => {
    setLoading(true); setError(''); setResult(null);
    try {
      const now = await api.systemNow().catch(() => null);
      const out = await api.judicialCalc({ tipo, dadosLivres, documentoTexto: dadosLivres, attachmentIds, dataHoraSistema: now, ...values });
      setResult(out);
      if (onPickMode) onPickMode('calculos');
    } catch (e) {
      setError(e.message || 'Falha no cálculo');
    } finally { setLoading(false); }
  };
  const downloadReport = async (format) => {
    if (!result?.markdown) return;
    setDownloading(format);
    try {
      await api.downloadDocument({ format, content: result.markdown, title: `memoria_calculo_${tipo}` });
    } catch (e) {
      setError(e.message || 'Falha ao gerar documento');
    } finally { setDownloading(''); }
  };
  const sendToChat = () => {
    if (!result?.markdown) return;
    onPickMode && onPickMode('calculos');
    onPickPrompt && onPickPrompt(`Revise este cálculo judicial e transforme em relatório/parecer final para protocolo:\n\n${result.markdown}`);
  };
  return (
    <div className="welcome-pane">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: 10, marginBottom: 14 }}>
        {Object.entries(CALC_MODES).map(([id, item]) => {
          const Ic = I[item.icon] || I.calc;
          return (
            <button key={id} onClick={() => { setTipo(id); setValues({}); setDadosLivres(''); setUploads([]); setAttachmentIds([]); setResult(null); setError(''); if (fileInputRef.current) fileInputRef.current.value = ''; }}
              style={{ textAlign: 'left', padding: 16, borderRadius: 'var(--r-2)', border: tipo === id ? '1px solid var(--accent)' : '1px solid var(--border)', background: tipo === id ? 'rgba(14,165,233,.08)' : 'var(--bg-elev)', color: 'var(--ink)', cursor: 'pointer' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}><Ic size={16}/><strong>{item.title}</strong></span>
              <small style={{ color: 'var(--muted)', lineHeight: 1.45 }}>{item.hint}</small>
            </button>
          );
        })}
      </div>

      <div className="import-card" style={{ gridTemplateColumns: 'minmax(0, 1fr)', alignItems: 'start' }}>
        <div className="import-left">
          <div className="eyebrow">MOTOR AUTOMÁTICO</div>
          <h3>{cfg.title}</h3>
          <p>Cole os dados em linguagem natural ou importe peças, planilhas e documentos do processo. A IA extrai parcelas, datas e honorários; o motor busca índices públicos quando possível e devolve memória com parecer.</p>
          <div style={{ marginTop: 14, padding: 12, border: '1px dashed var(--border-2)', borderRadius: 'var(--r-2)', background: 'var(--bg-elev)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
              <div>
                <div className="eyebrow">Documentos do processo</div>
                <small style={{ color: 'var(--muted)' }}>PDF, DOCX, TXT, imagens ou planilhas. A IA lerá os anexos junto com o texto colado.</small>
              </div>
              <button className="btn-ghost" type="button" disabled={uploading} onClick={() => fileInputRef.current?.click()}>
                <I.attach size={13}/> {uploading ? 'Importando...' : 'Importar documentos'}
              </button>
            </div>
            <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={e => handleFiles(e.target.files)} />
            {uploads.length > 0 && (
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
                {uploads.map((f, idx) => (
                  <span key={`${f.attachmentId || f.nome || idx}-${idx}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 9px', borderRadius: 'var(--r-1)', border: '1px solid var(--border)', color: 'var(--muted)', fontSize: 12 }}>
                    <I.file size={13}/> {f.nome || f.name || `Documento ${idx + 1}`}
                  </span>
                ))}
              </div>
            )}
          </div>
          <label style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 14 }}>
            <span className="eyebrow">Dados do cálculo</span>
            <textarea rows={6} value={dadosLivres} onChange={e => setDadosLivres(e.target.value)} placeholder={cfg.placeholder} style={{ padding: '12px 14px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', resize: 'vertical', background: 'var(--bg-elev)', color: 'var(--ink)', fontFamily: 'inherit', lineHeight: 1.55 }}/>
          </label>
          <button className="btn-ghost" style={{ marginTop: 10 }} onClick={() => setAdvanced(v => !v)}>
            {advanced ? 'Ocultar ajustes manuais' : 'Ajustes manuais'} <I.arrowR size={11}/>
          </button>
          {advanced && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))', gap: 10, marginTop: 12 }}>
              {cfg.fields.map(f => (
                <label key={f.k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <span className="eyebrow">{f.label}</span>
                  {f.textarea ? (
                    <textarea rows={4} value={values[f.k] || ''} onChange={e => setValue(f.k, e.target.value)} placeholder={f.placeholder} style={{ padding: '9px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', resize: 'vertical', background: 'var(--bg-elev)', color: 'var(--ink)', fontFamily: 'inherit' }}/>
                  ) : (
                    <input type={f.type || 'text'} value={values[f.k] || ''} onChange={e => setValue(f.k, e.target.value)} placeholder={f.placeholder || ''} style={{ padding: '9px 10px', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', background: 'var(--bg-elev)', color: 'var(--ink)' }}/>
                  )}
                </label>
              ))}
            </div>
          )}
          <div className="import-actions" style={{ marginTop: 14 }}>
            <button className="btn-primary" disabled={loading || uploading || (!dadosLivres.trim() && !values.parcelasTexto && !attachmentIds.length)} onClick={run}>{loading ? 'Calculando...' : 'Calcular automaticamente'}</button>
            <button className="btn-ghost" onClick={() => resetCalc()}>Limpar</button>
          </div>
          {error && <p style={{ color: 'var(--danger)', fontSize: 12.5, marginTop: 10 }}>{error}</p>}
        </div>
        <div className="agent-knowledge-panel" style={{ margin: '16px 0 0' }}>
          <div className="agent-knowledge-head">
            <div>
              <div className="eyebrow">RELATÓRIO E PARECER</div>
              <h3>{result ? 'Resultado calculado' : 'Aguardando dados'}</h3>
              <p>{result ? `${result.extraidoPorIA ? 'Dados extraídos pela IA. ' : ''}${result.indicesAuto ? 'Índices estimados automaticamente. ' : ''}Memória pronta para revisão técnica no chat.` : 'O resultado aparecerá aqui com quadro-resumo, memória e parecer.'}</p>
            </div>
          </div>
          {result?.markdown ? (
            <>
              <pre style={{ whiteSpace: 'pre-wrap', maxHeight: 460, overflow: 'auto', fontSize: 12.5, lineHeight: 1.55, background: 'var(--bg-elev)', border: '1px solid var(--border-2)', borderRadius: 'var(--r-2)', padding: 14 }}>{result.markdown}</pre>
              <div className="import-actions" style={{ marginTop: 12 }}>
                <button className="btn-primary" onClick={sendToChat}>Revisar no chat <I.arrowR size={12}/></button>
                <button className="btn-ghost" disabled={!!downloading} onClick={() => downloadReport('word')}><I.download size={13}/> {downloading === 'word' ? 'Gerando...' : 'Word'}</button>
                <button className="btn-ghost" disabled={!!downloading} onClick={() => downloadReport('pdf')}><I.download size={13}/> {downloading === 'pdf' ? 'Gerando...' : 'PDF'}</button>
              </div>
            </>
          ) : <div className="skill-empty">Preencha os parâmetros e execute o motor.</div>}
        </div>
      </div>
    </div>
  );
};

window.CalculationsTab = CalculationsTab;

