/* global React, Card, Badge, Button, Avatar, Icon, ICONS, Field */
const { useState: useStateBM, useEffect: useEffectBM } = React;

// ─── Shared input style ──────────────────────────────────────────────────────
const inp = {
  width:'100%', padding:'9px 12px', borderRadius:8, border:'1px solid var(--border-subtle)',
  background:'var(--bg-elevated)', color:'var(--fg-primary)', fontFamily:'inherit', fontSize:13, outline:'none',
  boxSizing:'border-box',
};

// ─── Modal shell ─────────────────────────────────────────────────────────────
function BMModal({ children, onClose, width = 720, title, subtitle, foot }) {
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(8,12,28,0.65)', backdropFilter:'blur(6px)',
      zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:24,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        width:'100%', maxWidth:width, maxHeight:'90vh', display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-subtle)', borderRadius:16,
        boxShadow:'0 24px 64px rgba(0,0,0,0.45)', overflow:'hidden',
      }}>
        {(title || subtitle) && (
          <div style={{ padding:'20px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:14 }}>
            <div>
              {subtitle && <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--geek-blue-300)' }}>{subtitle}</div>}
              {title && <h2 style={{ margin:'4px 0 0', fontSize:20, fontWeight:700 }}>{title}</h2>}
            </div>
            <button onClick={onClose} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', padding:6 }}>
              <Icon d={ICONS.x} size={18}/>
            </button>
          </div>
        )}
        <div style={{ flex:1, overflow:'auto' }}>{children}</div>
        {foot && <div style={{ padding:'14px 24px', borderTop:'1px solid var(--border-subtle)', display:'flex', justifyContent:'flex-end', gap:10 }}>{foot}</div>}
      </div>
    </div>
  );
}

// ─── Templates ───────────────────────────────────────────────────────────────
const BM_TEMPLATES = [
  { t:'Branding completo',      n:10, c:'linear-gradient(135deg,#1D39C4,#36CFC9)', tag:'Branding',  d:'Posicionamento, persona, valores, tom de voz, referências, entregáveis.' },
  { t:'Site / Landing page',    n:9,  c:'linear-gradient(135deg,#FA541C,#FADB14)', tag:'Web',       d:'Objetivo, público, jornada, conteúdo, integrações, prazos.' },
  { t:'Campanha de lançamento', n:8,  c:'linear-gradient(135deg,#7C3AED,#1D39C4)', tag:'Campanha',  d:'Big idea, canais, KPIs, público-alvo, peças, cronograma.' },
  { t:'Social Media mensal',    n:7,  c:'linear-gradient(135deg,#FADB14,#FA541C)', tag:'Conteúdo',  d:'Frequência, formatos, calendário editorial, métricas, aprovações.' },
  { t:'Catálogo de produtos',   n:7,  c:'linear-gradient(135deg,#36CFC9,#1D39C4)', tag:'Editorial', d:'SKUs, fotografia, copy, paginação, formato, gráfica.' },
  { t:'Identidade visual',      n:10, c:'linear-gradient(135deg,#1890FF,#7C3AED)', tag:'Branding',  d:'Marca, símbolo, paleta, tipografia, grid, manual de aplicação.' },
  { t:'Embalagem',              n:7,  c:'linear-gradient(135deg,#22C55E,#36CFC9)', tag:'Branding',  d:'SKUs, dimensões, materiais, regulação, aplicações, cronograma.' },
  { t:'Personalizado (do zero)',n:0,  c:'linear-gradient(135deg,#52525B,#27272A)', tag:'Custom',    d:'Comece em branco e monte as perguntas que precisar.' },
];

function TemplatesGalleryModal({ onClose, onPick, onCreateBlank }) {
  const [filter, setFilter] = useStateBM('todos');
  const [picked, setPicked] = useStateBM(null);
  const tags = ['todos', ...new Set(BM_TEMPLATES.map(t=>t.tag))];
  const list = filter==='todos' ? BM_TEMPLATES : BM_TEMPLATES.filter(t=>t.tag===filter);
  return (
    <BMModal onClose={onClose} title="Galeria de modelos" subtitle="Briefings · escolher um modelo" width={920}
      foot={<>
        <Button variant="ghost" onClick={onCreateBlank}>Criar do zero</Button>
        <Button variant="ghost" onClick={onClose}>Fechar</Button>
        <Button disabled={!picked} onClick={()=>{ onPick?.(picked); }}>Usar este modelo →</Button>
      </>}>
      <div style={{ padding:'16px 24px', borderBottom:'1px solid var(--border-subtle)', display:'flex', gap:8, flexWrap:'wrap' }}>
        {tags.map(t => (
          <button key={t} onClick={()=>setFilter(t)} style={{
            padding:'6px 12px', borderRadius:999, fontSize:12, fontWeight:600, cursor:'pointer',
            background: filter===t ? 'var(--primary)' : 'var(--bg-elevated)',
            color: filter===t ? '#fff' : 'var(--fg-secondary)', border:'1px solid transparent', textTransform:'capitalize',
          }}>{t}</button>
        ))}
      </div>
      <div style={{ padding:24, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14 }}>
        {list.map(t => {
          const active = picked?.t===t.t;
          return (
            <div key={t.t} onClick={()=>setPicked(t)} style={{
              padding:14, borderRadius:12, cursor:'pointer', background:'var(--bg-elevated)',
              border:`1.5px solid ${active ? 'var(--primary)' : 'var(--border-subtle)'}`,
              boxShadow: active ? '0 0 0 4px var(--primary-soft)' : 'none',
              display:'flex', flexDirection:'column', gap:10,
            }}>
              <div style={{ height:64, borderRadius:8, background:t.c, position:'relative', overflow:'hidden' }}>
                <div style={{ position:'absolute', inset:0, background:'radial-gradient(circle at 20% 20%, rgba(255,255,255,0.2), transparent 60%)' }}/>
                <div style={{ position:'absolute', top:8, right:8, padding:'3px 8px', borderRadius:6, background:'rgba(0,0,0,0.35)', color:'#fff', fontSize:10, fontWeight:700, letterSpacing:'0.04em', textTransform:'uppercase' }}>{t.tag}</div>
              </div>
              <div>
                <div style={{ fontSize:14, fontWeight:700 }}>{t.t}</div>
                <div style={{ fontSize:11, color:'var(--fg-muted)', fontFamily:'var(--font-mono)' }}>{t.n>0 ? `${t.n} questões` : 'Estrutura aberta'}</div>
              </div>
              <p style={{ margin:0, fontSize:12, color:'var(--fg-secondary)', lineHeight:1.45 }}>{t.d}</p>
            </div>
          );
        })}
      </div>
    </BMModal>
  );
}

// ─── Question system ──────────────────────────────────────────────────────────
const QUESTION_TYPES = [
  { id:'text',     label:'Texto curto',       desc:'Uma linha de resposta'              },
  { id:'textarea', label:'Texto longo',       desc:'Resposta detalhada em várias linhas' },
  { id:'radio',    label:'Múltipla escolha',  desc:'Cliente escolhe uma opção'          },
  { id:'checkbox', label:'Caixas de seleção', desc:'Cliente escolhe várias opções'      },
  { id:'date',     label:'Data',              desc:'Seleção de data no calendário'      },
  { id:'link',     label:'Link / URL',        desc:'Endereço web ou referência'         },
  { id:'file',     label:'Upload de arquivo', desc:'Foto, documento ou referência'      },
];

const QTYPE_COLORS = {
  text:'#1D39C4', textarea:'#7C3AED', radio:'#FA541C',
  checkbox:'#22C55E', date:'#FA8C16', link:'#36CFC9', file:'#EB2F96',
};

const mkQId = () => 'q' + Date.now().toString(36) + Math.random().toString(36).slice(2,5);

const QUESTION_BLUEPRINTS = {
  'Branding': [
    { id:'q1',  type:'text',     label:'Como você descreveria a sua marca em uma frase?',                         required:true,  options:[] },
    { id:'q2',  type:'textarea', label:'Conte a história da empresa — origem, valores e missão.',                  required:true,  options:[] },
    { id:'q3',  type:'radio',    label:'Qual é o tom de voz desejado?',                                            required:true,  options:['Sério e institucional','Amigável e próximo','Criativo e irreverente','Sofisticado e exclusivo'] },
    { id:'q4',  type:'textarea', label:'Quem é o público-alvo principal? Descreva perfil, idade e comportamento.', required:true,  options:[] },
    { id:'q5',  type:'text',     label:'Cite 3 concorrentes ou marcas do mesmo segmento.',                         required:false, options:[] },
    { id:'q6',  type:'radio',    label:'A marca já tem identidade visual?',                                        required:true,  options:['Sim, completa','Precisa de atualização','Não, vamos do zero'] },
    { id:'q7',  type:'link',     label:'Link de referências visuais (Pinterest, Behance, etc.)',                    required:false, options:[] },
    { id:'q8',  type:'textarea', label:'Quais entregáveis fazem parte do escopo deste projeto?',                   required:true,  options:[] },
    { id:'q9',  type:'date',     label:'Qual é a data limite para a entrega?',                                     required:true,  options:[] },
    { id:'q10', type:'text',     label:'Qual é o investimento previsto para o projeto?',                           required:false, options:[] },
  ],
  'Web': [
    { id:'q1', type:'text',     label:'Qual é o objetivo principal do site?',                         required:true,  options:[] },
    { id:'q2', type:'textarea', label:'Quem é o público-alvo do site? Descreva em detalhes.',         required:true,  options:[] },
    { id:'q3', type:'radio',    label:'Qual é o tipo de site?',                                       required:true,  options:['Institucional','Landing page','E-commerce','Blog / conteúdo','Portfólio'] },
    { id:'q4', type:'textarea', label:'Liste as páginas e funcionalidades necessárias.',              required:true,  options:[] },
    { id:'q5', type:'checkbox', label:'Quais integrações serão necessárias?',                         required:false, options:['CRM','E-mail marketing','Chat / WhatsApp','Analytics','Pagamentos'] },
    { id:'q6', type:'radio',    label:'Já existe domínio registrado?',                                required:true,  options:['Sim','Não','Não sei'] },
    { id:'q7', type:'link',     label:'Sites de referência que você admira:',                         required:false, options:[] },
    { id:'q8', type:'textarea', label:'O que você definitivamente NÃO quer no site?',                required:false, options:[] },
    { id:'q9', type:'date',     label:'Qual é o prazo para o lançamento?',                            required:true,  options:[] },
  ],
  'Campanha': [
    { id:'q1', type:'textarea', label:'Qual é a big idea desta campanha?',                            required:true,  options:[] },
    { id:'q2', type:'textarea', label:'Quais são os objetivos e KPIs esperados?',                     required:true,  options:[] },
    { id:'q3', type:'textarea', label:'Descreva o público-alvo desta campanha.',                      required:true,  options:[] },
    { id:'q4', type:'checkbox', label:'Quais canais serão utilizados?',                               required:true,  options:['Redes sociais','E-mail marketing','Google Ads','Mídia OOH','Influenciadores'] },
    { id:'q5', type:'textarea', label:'Quais são as mensagens-chave a comunicar?',                    required:true,  options:[] },
    { id:'q6', type:'textarea', label:'Liste as peças necessárias para a campanha.',                  required:true,  options:[] },
    { id:'q7', type:'text',     label:'Qual é o orçamento de mídia previsto?',                        required:false, options:[] },
    { id:'q8', type:'date',     label:'Qual é a data de lançamento da campanha?',                     required:true,  options:[] },
  ],
  'Conteúdo': [
    { id:'q1', type:'text',     label:'Qual é o objetivo principal do perfil nas redes?',             required:true,  options:[] },
    { id:'q2', type:'textarea', label:'Quem é o público-alvo do conteúdo?',                           required:true,  options:[] },
    { id:'q3', type:'radio',    label:'Qual é a frequência de publicação desejada?',                  required:true,  options:['Diária','3–4x por semana','2–3x por semana','1x por semana'] },
    { id:'q4', type:'checkbox', label:'Quais formatos serão produzidos?',                             required:true,  options:['Feed estático','Reels / TikTok','Stories','Carrosséis','Lives'] },
    { id:'q5', type:'textarea', label:'Qual é o tom de voz e como a marca fala com a audiência?',     required:true,  options:[] },
    { id:'q6', type:'textarea', label:'Quais temas e pilares de conteúdo devem ser abordados?',       required:true,  options:[] },
    { id:'q7', type:'link',     label:'Perfis de referência ou inspiração:',                          required:false, options:[] },
  ],
  'Editorial': [
    { id:'q1', type:'text',     label:'Qual é o escopo editorial do projeto?',                        required:true,  options:[] },
    { id:'q2', type:'textarea', label:'Liste os SKUs ou capítulos a serem cobertos.',                 required:true,  options:[] },
    { id:'q3', type:'radio',    label:'As fotos dos produtos precisam ser produzidas?',               required:true,  options:['Sim, do zero','Temos fotos, precisam de tratamento','Temos fotos prontas para uso'] },
    { id:'q4', type:'textarea', label:'Descreva a linguagem e o tom do copy.',                        required:true,  options:[] },
    { id:'q5', type:'radio',    label:'Qual é o formato final do material?',                          required:true,  options:['Digital (PDF)','Impresso','Ambos'] },
    { id:'q6', type:'date',     label:'Qual é o prazo para entrega do arquivo final?',                required:true,  options:[] },
    { id:'q7', type:'text',     label:'Qual é o orçamento previsto para este projeto?',               required:false, options:[] },
  ],
  'Custom': [
    { id:'q1', type:'text',     label:'Descreva o projeto em uma frase.',                             required:true,  options:[] },
    { id:'q2', type:'textarea', label:'Qual é o objetivo principal? O que você espera como resultado?', required:true, options:[] },
    { id:'q3', type:'textarea', label:'Quem é o público-alvo?',                                       required:false, options:[] },
    { id:'q4', type:'date',     label:'Qual é o prazo para a entrega?',                               required:false, options:[] },
  ],
};
// Aliases para templates com nomes diferentes nos BM_TEMPLATES
QUESTION_BLUEPRINTS['Identidade visual'] = QUESTION_BLUEPRINTS['Branding'];
QUESTION_BLUEPRINTS['Embalagem']         = QUESTION_BLUEPRINTS['Branding'];
QUESTION_BLUEPRINTS['Social Media mensal'] = QUESTION_BLUEPRINTS['Conteúdo'];
QUESTION_BLUEPRINTS['Catálogo de produtos'] = QUESTION_BLUEPRINTS['Editorial'];

// ─── QuestionRow ──────────────────────────────────────────────────────────────
function QuestionRow({ q, i, total, onUpdate, onRemove, onMove }) {
  const [typeOpen, setTypeOpen] = useStateBM(false);
  const ref = React.useRef(null);
  const tc = QTYPE_COLORS[q.type] || '#555';

  React.useEffect(() => {
    if (!typeOpen) return;
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setTypeOpen(false); };
    document.addEventListener('mousedown', close);
    return () => document.removeEventListener('mousedown', close);
  }, [typeOpen]);

  const btnStyle = (disabled) => ({
    background:'transparent', border:'none',
    color: disabled ? 'var(--border-strong)' : 'var(--fg-muted)',
    cursor: disabled ? 'default' : 'pointer',
    padding:'2px 3px', fontSize:13, lineHeight:1,
  });

  return (
    <div style={{ background:'var(--bg-elevated)', borderRadius:10, border:'1px solid var(--border-subtle)' }}>
      <div style={{ display:'flex', gap:8, alignItems:'center', padding:'10px 12px' }}>
        {/* Type chip */}
        <div ref={ref} style={{ position:'relative', flexShrink:0 }}>
          <button onClick={() => setTypeOpen(o=>!o)} style={{
            padding:'4px 8px', borderRadius:6, border:'1px solid ' + tc + '55',
            background:tc + '18', color:tc, fontSize:11, fontWeight:700, lineHeight:1.2,
            cursor:'pointer', fontFamily:'inherit', whiteSpace:'nowrap', display:'flex', alignItems:'center', gap:4,
          }}>
            {QUESTION_TYPES.find(t=>t.id===q.type)?.label || q.type}
            <span style={{ opacity:0.55, fontSize:9 }}>▾</span>
          </button>
          {typeOpen && (
            <div style={{
              position:'absolute', top:'calc(100% + 4px)', left:0, zIndex:50,
              background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
              borderRadius:10, boxShadow:'0 12px 32px rgba(0,0,0,0.45)', overflow:'hidden', minWidth:200,
            }}>
              {QUESTION_TYPES.map(qt => (
                <button key={qt.id} onClick={() => { onUpdate({ type:qt.id }); setTypeOpen(false); }} style={{
                  width:'100%', background:'transparent', border:'none',
                  padding:'9px 12px', display:'flex', alignItems:'center', gap:10,
                  cursor:'pointer', textAlign:'left', fontFamily:'inherit', fontSize:12,
                  color: q.type===qt.id ? QTYPE_COLORS[qt.id] : 'var(--fg-secondary)',
                  fontWeight: q.type===qt.id ? 700 : 400,
                }}
                onMouseEnter={e=>e.currentTarget.style.background='var(--bg-elevated)'}
                onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
                  <span style={{ width:8, height:8, borderRadius:'50%', background:QTYPE_COLORS[qt.id], flexShrink:0 }}/>
                  <span style={{ flex:1 }}>{qt.label}</span>
                  <span style={{ fontSize:10, color:'var(--fg-muted)' }}>{qt.desc}</span>
                </button>
              ))}
            </div>
          )}
        </div>

        <input value={q.label} onChange={e => onUpdate({ label:e.target.value })}
          placeholder="Escreva a pergunta aqui…"
          style={{ ...inp, flex:1, padding:'7px 10px', fontSize:13 }}
        />

        <label style={{ display:'flex', alignItems:'center', gap:4, fontSize:11, color:'var(--fg-muted)', cursor:'pointer', whiteSpace:'nowrap', flexShrink:0, userSelect:'none' }}>
          <input type="checkbox" checked={q.required} onChange={e => onUpdate({ required:e.target.checked })} style={{ accentColor:'var(--primary)', cursor:'pointer' }}/>
          Obrig.
        </label>

        <div style={{ display:'flex', gap:1, flexShrink:0 }}>
          <button onClick={() => onMove(-1)} disabled={i===0} style={btnStyle(i===0)}>↑</button>
          <button onClick={() => onMove(+1)} disabled={i===total-1} style={btnStyle(i===total-1)}>↓</button>
          <button onClick={onRemove} style={{ ...btnStyle(false), display:'flex', alignItems:'center' }}>
            <Icon d={ICONS.x} size={13}/>
          </button>
        </div>
      </div>

      {/* Options editor for radio / checkbox */}
      {(q.type==='radio' || q.type==='checkbox') && (
        <div style={{ padding:'0 12px 12px 44px', display:'flex', flexDirection:'column', gap:5 }}>
          {(q.options||[]).map((opt,j) => (
            <div key={j} style={{ display:'flex', gap:6, alignItems:'center' }}>
              <span style={{ fontSize:13, color:'var(--fg-muted)', width:16, textAlign:'center', flexShrink:0 }}>
                {q.type==='radio' ? '○' : '□'}
              </span>
              <input value={opt} onChange={e => { const opts=[...(q.options||[])]; opts[j]=e.target.value; onUpdate({ options:opts }); }}
                placeholder={'Opção ' + (j+1)}
                style={{ ...inp, flex:1, padding:'5px 8px', fontSize:12 }}
              />
              <button onClick={() => onUpdate({ options:(q.options||[]).filter((_,k)=>k!==j) })}
                style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', padding:2, display:'flex', alignItems:'center', flexShrink:0 }}>
                <Icon d={ICONS.x} size={12}/>
              </button>
            </div>
          ))}
          <button onClick={() => onUpdate({ options:[...(q.options||[]), ''] })}
            style={{ background:'transparent', border:'none', color:'var(--primary)', cursor:'pointer', fontSize:12, fontWeight:600, textAlign:'left', padding:'3px 0', fontFamily:'inherit', marginLeft:22 }}>
            + Adicionar opção
          </button>
        </div>
      )}
    </div>
  );
}

// ─── QuestionBuilder ──────────────────────────────────────────────────────────
function QuestionBuilder({ questions, onChange }) {
  const addQ = (type) => {
    const opts = (type==='radio' || type==='checkbox') ? ['Opção 1','Opção 2'] : [];
    onChange([...questions, { id:mkQId(), type, label:'', required:false, options:opts }]);
  };
  const removeQ = (i) => onChange(questions.filter((_,j) => j!==i));
  const updateQ = (i, patch) => { const n=[...questions]; n[i]={...n[i],...patch}; onChange(n); };
  const moveQ = (i, dir) => {
    if (i+dir<0 || i+dir>=questions.length) return;
    const n=[...questions]; [n[i],n[i+dir]]=[n[i+dir],n[i]]; onChange(n);
  };

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
      {questions.length===0 && (
        <div style={{ padding:'28px 24px', textAlign:'center', color:'var(--fg-muted)', background:'var(--bg-elevated)', borderRadius:10, border:'1px dashed var(--border-subtle)', fontSize:13 }}>
          Nenhuma pergunta ainda — use os botões abaixo para adicionar.
        </div>
      )}
      {questions.map((q,i) => (
        <QuestionRow key={q.id} q={q} i={i} total={questions.length}
          onUpdate={patch => updateQ(i,patch)}
          onRemove={() => removeQ(i)}
          onMove={dir => moveQ(i,dir)}
        />
      ))}
      {/* Add question bar */}
      <div style={{ padding:'10px 14px', background:'var(--bg-elevated)', borderRadius:10, border:'1px solid var(--border-subtle)', marginTop:4 }}>
        <div style={{ fontSize:10, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:8 }}>Adicionar pergunta</div>
        <div style={{ display:'flex', gap:6, flexWrap:'wrap' }}>
          {QUESTION_TYPES.map(qt => (
            <button key={qt.id} onClick={() => addQ(qt.id)} style={{
              padding:'5px 10px', borderRadius:7, border:'1px solid var(--border-subtle)',
              background:'var(--bg-surface)', color:'var(--fg-secondary)', cursor:'pointer',
              fontFamily:'inherit', fontSize:12, fontWeight:500,
              display:'flex', alignItems:'center', gap:5, transition:'all 120ms',
            }}
            onMouseEnter={e=>{ e.currentTarget.style.borderColor=QTYPE_COLORS[qt.id]+'99'; e.currentTarget.style.color=QTYPE_COLORS[qt.id]; }}
            onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--border-subtle)'; e.currentTarget.style.color='var(--fg-secondary)'; }}>
              <span style={{ width:7, height:7, borderRadius:'50%', background:QTYPE_COLORS[qt.id], flexShrink:0 }}/>
              {qt.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── BriefingWizard ───────────────────────────────────────────────────────────
const WIZARD_STEPS = [
  { title:'Projeto',      desc:'Nome, cliente e prazo do briefing',                                                       est:'~2 min' },
  { title:'Modelo',       desc:'Escolha o conjunto de perguntas que o cliente irá responder',                             est:'~1 min' },
  { title:'Perguntas',    desc:'Monte as perguntas — escolha o tipo, escreva o texto e defina se são obrigatórias',       est:'~3 min' },
  { title:'Compartilhar', desc:'Configure o acesso e envie o link ao cliente',                                            est:'~1 min' },
];
const WIZARD_STORAGE = 'inbrivvo_bw_draft';
const VIS_OPTS = [
  { value:'link',    label:'Link público (qualquer pessoa com o link)' },
  { value:'email',   label:'Apenas convidados por e-mail' },
  { value:'interno', label:'Interno (não enviar ao cliente)' },
];

function getBlueprint(tpl) {
  if (!tpl) return QUESTION_BLUEPRINTS['Custom'];
  return QUESTION_BLUEPRINTS[tpl.t] || QUESTION_BLUEPRINTS[tpl.tag] || QUESTION_BLUEPRINTS['Custom'];
}

function BriefingWizard({ template, onClose, onCreate }) {
  const [step,    setStep]    = useStateBM(0);
  const [visible, setVisible] = useStateBM(true);
  const [sending, setSending] = useStateBM(false);
  const [form,    setForm]    = useStateBM({
    title:          template?.t ? `Briefing · ${template.t}` : '',
    client:         '',
    deadline:       '',
    pickedTemplate: template || null,
    questions:      getBlueprint(template).map(q => ({ ...q, id:mkQId() })),
    visibility:     'link',
    welcomeMsg:     '',
  });
  const set = (k,v) => setForm(f => ({ ...f, [k]:v }));

  useEffectBM(() => {
    try {
      const raw = localStorage.getItem(WIZARD_STORAGE);
      if (raw) {
        const saved = JSON.parse(raw);
        setForm(f => ({ ...f, ...saved.form }));
        setStep(saved.step ?? 0);
        window.__toast?.('Rascunho carregado', { tone:'info' });
      }
    } catch {}
  }, []);

  useEffectBM(() => {
    localStorage.setItem(WIZARD_STORAGE, JSON.stringify({ form, step }));
  }, [form, step]);

  useEffectBM(() => {
    if (form.pickedTemplate) {
      const bp = getBlueprint(form.pickedTemplate);
      set('questions', bp.map(q => ({ ...q, id:mkQId() })));
    }
  }, [form.pickedTemplate]);

  function navigate(dir) {
    setVisible(false);
    setTimeout(() => { setStep(s=>s+dir); setVisible(true); }, 180);
  }

  async function handleSubmit() {
    setSending(true);
    try {
      await onCreate?.(form);
      localStorage.removeItem(WIZARD_STORAGE);
    } finally { setSending(false); }
  }

  const canNext =
    step===0 ? (form.title.trim().length>0 && form.client.trim().length>0) :
    step===2 ? form.questions.length>0 :
    true;

  const cur    = WIZARD_STEPS[step];
  const selTpl = form.pickedTemplate;

  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(8,12,28,0.72)',
      backdropFilter:'blur(6px)', zIndex:200,
      display:'flex', alignItems:'center', justifyContent:'center', padding:24,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{
        width:'min(800px,100%)', maxHeight:'92vh', display:'flex', flexDirection:'column',
        background:'var(--bg-surface)', border:'1px solid var(--border-strong)',
        borderRadius:18, boxShadow:'0 30px 80px rgba(0,0,0,0.55)', overflow:'hidden',
      }}>
        {/* Header */}
        <div style={{ padding:'20px 28px 0', display:'flex', alignItems:'center', justifyContent:'space-between', flexShrink:0 }}>
          <div style={{ fontSize:11, fontWeight:700, fontFamily:'var(--font-display)', textTransform:'uppercase', letterSpacing:'0.08em', color:'var(--geek-blue-300)' }}>
            inBrivvo · Criar Briefing
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:14 }}>
            <span style={{ fontSize:12, color:'var(--fg-muted)' }}>{cur.est} restantes</span>
            <button onClick={onClose} style={{ background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', color:'var(--fg-secondary)', width:32, height:32, borderRadius:8, cursor:'pointer', fontSize:18, display:'flex', alignItems:'center', justifyContent:'center' }}>×</button>
          </div>
        </div>

        {/* Progress bar */}
        <div style={{ display:'flex', gap:4, padding:'14px 28px 0', flexShrink:0 }}>
          {WIZARD_STEPS.map((_,i) => (
            <div key={i} style={{ flex:1, height:4, borderRadius:2, transition:'background 300ms ease', background: i<=step ? 'var(--primary)' : 'var(--bg-elevated)' }}/>
          ))}
        </div>

        {/* Step title */}
        <div style={{ padding:'12px 28px 0', flexShrink:0 }}>
          <div style={{ fontSize:11, fontFamily:'var(--font-mono)', color:'var(--fg-muted)', marginBottom:6 }}>
            Etapa {step+1} de {WIZARD_STEPS.length} · {cur.title}
          </div>
          <h2 style={{ margin:0, fontSize:24, fontWeight:800, fontFamily:'var(--font-display)', lineHeight:1.15 }}>{cur.title}</h2>
          <p style={{ margin:'5px 0 20px', fontSize:13, color:'var(--fg-muted)', lineHeight:1.5 }}>{cur.desc}</p>
        </div>

        {/* Content */}
        <div style={{ flex:1, overflowY:'auto', padding:'0 28px 4px', opacity:visible?1:0, transition:'opacity 180ms ease' }}>

          {/* Step 0: Projeto */}
          {step===0 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:8 }}>
              <Field label="Nome do briefing">
                <input autoFocus value={form.title} onChange={e=>set('title',e.target.value)} placeholder="ex: Astra · Identidade Visual" style={inp}/>
              </Field>
              <Field label="Cliente / empresa">
                <input value={form.client} onChange={e=>set('client',e.target.value)} placeholder="Nome do cliente ou empresa" style={inp}/>
              </Field>
              <Field label="Prazo para resposta">
                <input type="date" value={form.deadline} onChange={e=>set('deadline',e.target.value)} style={inp}/>
              </Field>
              <div style={{ padding:14, borderRadius:10, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', fontSize:13, color:'var(--fg-secondary)', lineHeight:1.55 }}>
                💡 <strong style={{ color:'var(--fg-primary)' }}>Como funciona:</strong> você monta as perguntas, gera um link e envia ao cliente. Ele preenche pelo navegador — sem precisar criar conta — e as respostas chegam aqui.
              </div>
            </div>
          )}

          {/* Step 1: Modelo */}
          {step===1 && (
            <div style={{ display:'flex', flexDirection:'column', gap:18, paddingBottom:8 }}>
              <div style={{ fontSize:13, color:'var(--fg-secondary)', lineHeight:1.5 }}>
                Escolha um modelo pronto — ele já vem com perguntas ideais para o tipo de projeto. Você pode editar tudo na próxima etapa.
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
                {BM_TEMPLATES.map(tpl => {
                  const active = selTpl?.t===tpl.t;
                  return (
                    <div key={tpl.t} onClick={()=>set('pickedTemplate', active ? null : tpl)} style={{
                      padding:14, borderRadius:10, cursor:'pointer',
                      background: active ? 'var(--primary-soft)' : 'var(--bg-elevated)',
                      border:`1.5px solid ${active ? 'var(--primary)' : 'var(--border-subtle)'}`,
                      boxShadow: active ? '0 0 0 3px var(--primary-soft)' : 'none',
                      display:'flex', alignItems:'center', gap:12, transition:'all 160ms',
                    }}>
                      <div style={{ width:36, height:36, borderRadius:8, background:tpl.c, flexShrink:0 }}/>
                      <div style={{ minWidth:0 }}>
                        <div style={{ fontSize:13, fontWeight:600, color:active?'var(--geek-blue-200)':'var(--fg-primary)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{tpl.t}</div>
                        <div style={{ fontSize:11, color:'var(--fg-muted)', fontFamily:'var(--font-mono)', marginTop:2 }}>
                          {tpl.n>0 ? `${tpl.n} questões` : 'Estrutura aberta'} · {tpl.tag}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
              {selTpl && (
                <div style={{ padding:12, borderRadius:10, background:'var(--primary-soft)', border:'1px solid var(--geek-blue-a40)', fontSize:13, color:'var(--fg-secondary)', lineHeight:1.5 }}>
                  <strong style={{ color:'var(--geek-blue-200)' }}>{selTpl.t}</strong> — {selTpl.d}
                </div>
              )}
            </div>
          )}

          {/* Step 2: Perguntas */}
          {step===2 && (
            <div style={{ display:'flex', flexDirection:'column', gap:14, paddingBottom:8 }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <div style={{ fontSize:13, color:'var(--fg-secondary)', lineHeight:1.5 }}>
                  Edite, reordene ou adicione perguntas — é exatamente o que o cliente verá no formulário.
                </div>
                <span style={{ fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-muted)', flexShrink:0, marginLeft:16 }}>
                  {form.questions.length} perguntas
                </span>
              </div>
              <QuestionBuilder questions={form.questions} onChange={q => set('questions',q)} />
            </div>
          )}

          {/* Step 3: Compartilhar */}
          {step===3 && (
            <div style={{ display:'flex', flexDirection:'column', gap:16, paddingBottom:8 }}>
              <Field label="Quem pode acessar o link">
                <select value={form.visibility} onChange={e=>set('visibility',e.target.value)} style={inp}>
                  {VIS_OPTS.map(o=><option key={o.value} value={o.value}>{o.label}</option>)}
                </select>
              </Field>
              <Field label="Mensagem de boas-vindas para o cliente (opcional)">
                <textarea rows={3} value={form.welcomeMsg} onChange={e=>set('welcomeMsg',e.target.value)}
                  placeholder="Ex: Olá! Para darmos início ao projeto, precisamos entender melhor o seu negócio. Preencha com calma — cada resposta nos ajuda a entregar um trabalho mais alinhado com o que você precisa."
                  style={{...inp, resize:'vertical', minHeight:90, lineHeight:1.55}}/>
              </Field>
              {/* Resumo */}
              <div style={{ padding:16, borderRadius:12, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', display:'grid', gridTemplateColumns:'auto 1fr', gap:'10px 18px', alignItems:'baseline', fontSize:13 }}>
                {[
                  ['Briefing',    form.title || '—'],
                  ['Cliente',     form.client || '—'],
                  ['Prazo',       form.deadline || '—'],
                  ['Modelo',      selTpl?.t || 'Personalizado'],
                  ['Perguntas',   form.questions.length + ' questões'],
                  ['Obrigatórias',form.questions.filter(q=>q.required).length + ' questões'],
                  ['Visibilidade',{link:'Link público',email:'Por e-mail',interno:'Interno'}[form.visibility]||'—'],
                ].map(([l,v]) => (
                  <React.Fragment key={l}>
                    <span style={{ color:'var(--fg-muted)', fontWeight:500, whiteSpace:'nowrap' }}>{l}</span>
                    <span style={{ color:'var(--fg-primary)', fontWeight:600 }}>{v}</span>
                  </React.Fragment>
                ))}
              </div>
              <div style={{ padding:14, borderRadius:10, background:'var(--primary-soft)', border:'1px solid var(--geek-blue-a40)', fontSize:13, color:'var(--fg-secondary)', lineHeight:1.55 }}>
                <strong style={{ color:'var(--geek-blue-200)' }}>Tudo pronto!</strong> Ao criar, o link do briefing será copiado automaticamente. Cole e envie para o cliente — ele responde pelo navegador, sem precisar criar conta.
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div style={{ padding:'16px 28px', borderTop:'1px solid var(--border-subtle)', display:'flex', alignItems:'center', gap:12, background:'var(--bg-elevated)', flexShrink:0 }}>
          <button onClick={()=>{ window.__toast?.('Rascunho salvo!',{tone:'success'}); onClose?.(); }}
            style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:13, fontFamily:'inherit', padding:'8px 0', fontWeight:500 }}>
            Salvar e continuar depois
          </button>
          <div style={{ flex:1 }}/>
          {step>0 && <Button variant="secondary" onClick={()=>navigate(-1)}>Voltar</Button>}
          {step<WIZARD_STEPS.length-1 ? (
            <Button disabled={!canNext} onClick={()=>canNext && navigate(+1)}>Próximo →</Button>
          ) : (
            <Button disabled={sending} onClick={handleSubmit}>
              {sending ? 'Criando…' : 'Criar briefing e copiar link →'}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}
const BriefingFormModal = BriefingWizard;

// ─── BriefingDetailModal ──────────────────────────────────────────────────────
function BriefingDetailModal({ briefing, onClose }) {
  const b = briefing || {};
  const [localData, setLocalData] = useStateBM(null);

  useEffectBM(() => {
    if (!b.id) return;
    try {
      const cfg  = JSON.parse(localStorage.getItem('inbrivvo_briefing_' + b.id) || 'null');
      const resp = JSON.parse(localStorage.getItem('inbrivvo_resp_'     + b.id) || 'null');
      if (cfg) setLocalData({ cfg, resp: resp || {} });
    } catch {}
  }, [b.id]);

  function getPublicUrl() {
    const base = window.location.href.replace(/[^/]+(\?.*)?$/, '');
    const cfg = localData?.cfg || { id:b.id, title:b.t||'Briefing', client:b.c||'', welcomeMsg:'', questions:[] };
    try {
      const encoded = btoa(encodeURIComponent(JSON.stringify(cfg)));
      return base + 'public-briefing.html?id=' + encodeURIComponent(b.id||'') + '&d=' + encodeURIComponent(encoded);
    } catch { return base + 'public-briefing.html?id=' + encodeURIComponent(b.id||''); }
  }

  // Suporte a formato antigo (sections) e novo (questions)
  const hasQs = localData?.cfg?.questions?.length > 0;
  const hasSecns = localData?.cfg?.sections?.length > 0;

  const questions = hasQs
    ? localData.cfg.questions
    : hasSecns
      ? localData.cfg.sections.map((s,i) => ({ id:'s'+i, type:'textarea', label:s, required:false, options:[] }))
      : [];

  const answers = localData?.resp || {};

  const getAnswer = (q) => {
    if (hasQs)   return answers[q.id]    || null;
    if (hasSecns) return answers[q.label] || null;
    return null;
  };

  const answeredCount = questions.filter(q => getAnswer(q)).length;
  const pct = questions.length > 0 ? Math.round(answeredCount / questions.length * 100) : 0;

  return (
    <BMModal onClose={onClose} title={b.t || 'Briefing'} subtitle={b.c} width={1000}
      foot={<>
        <Button variant="ghost" onClick={()=>{ navigator.clipboard?.writeText(getPublicUrl()); window.__toast?.('Link copiado!',{tone:'success'}); }}>Copiar link</Button>
        <Button variant="ghost" onClick={()=>window.open(getPublicUrl(),'_blank')}>Ver como cliente ↗</Button>
        <Button onClick={()=>{ window.__toast?.('Convertido em projeto!',{tone:'success'}); onClose?.(); }}>Virar projeto →</Button>
      </>}>
      <div style={{ display:'grid', gridTemplateColumns:'220px 1fr', minHeight:500 }}>

        {/* Left: stats */}
        <div style={{ borderRight:'1px solid var(--border-subtle)', padding:'20px 16px', display:'flex', flexDirection:'column', gap:18 }}>
          {/* Progress */}
          <div>
            <div style={{ fontSize:10, fontFamily:'var(--font-display)', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', marginBottom:8 }}>Progresso</div>
            <div style={{ height:8, background:'var(--bg-elevated)', borderRadius:999, overflow:'hidden', marginBottom:8 }}>
              <div style={{ width:`${pct}%`, height:'100%', background:pct===100?'#22C55E':'linear-gradient(90deg,#1D39C4,#36CFC9)', transition:'width 400ms ease' }}/>
            </div>
            <div style={{ display:'flex', alignItems:'baseline', gap:6 }}>
              <span style={{ fontFamily:'var(--font-display)', fontSize:32, fontWeight:700, color:pct===100?'#22C55E':'var(--fg-primary)' }}>{pct}%</span>
              <span style={{ fontSize:12, color:'var(--fg-muted)' }}>{answeredCount}/{questions.length} respondidas</span>
            </div>
          </div>

          {/* Meta */}
          <div style={{ borderTop:'1px solid var(--border-subtle)', paddingTop:14, display:'flex', flexDirection:'column', gap:10 }}>
            {[
              ['Cliente',    b.c   || '—'],
              ['Status',     b.s   || '—'],
              ['Atualizado', b.when|| '—'],
              ['Total',      questions.length + ' questões'],
            ].map(([k,v]) => (
              <div key={k}>
                <div style={{ fontSize:10, fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>{k}</div>
                <div style={{ fontSize:12, color:'var(--fg-secondary)', marginTop:2 }}>{v}</div>
              </div>
            ))}
          </div>

          {/* No data hint */}
          {!localData && (
            <div style={{ marginTop:'auto', padding:10, borderRadius:8, background:'var(--bg-elevated)', fontSize:11, color:'var(--fg-muted)', lineHeight:1.5 }}>
              Nenhuma resposta ainda. Envie o link ao cliente para começar a receber.
            </div>
          )}
        </div>

        {/* Right: questions list */}
        <div style={{ overflow:'auto', padding:'20px 24px', display:'flex', flexDirection:'column', gap:12 }}>
          {questions.length===0 && (
            <div style={{ padding:'40px', textAlign:'center', color:'var(--fg-muted)' }}>
              <div style={{ fontSize:14, fontWeight:600, marginBottom:6 }}>Sem perguntas configuradas</div>
              <div style={{ fontSize:12 }}>Edite o briefing para adicionar perguntas.</div>
            </div>
          )}
          {questions.map((q,i) => {
            const answer = getAnswer(q);
            const tc = QTYPE_COLORS[q.type] || '#555';
            const typeName = QUESTION_TYPES.find(t=>t.id===q.type)?.label || q.type;
            return (
              <div key={q.id} style={{ border:'1px solid var(--border-subtle)', borderRadius:12, overflow:'hidden' }}>
                <div style={{ padding:'10px 16px', background:'var(--bg-elevated)', display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-muted)', width:22, flexShrink:0 }}>{String(i+1).padStart(2,'0')}</span>
                  <span style={{ padding:'3px 8px', borderRadius:5, background:tc+'1a', color:tc, fontSize:11, fontWeight:700, flexShrink:0 }}>{typeName}</span>
                  <span style={{ fontSize:13, fontWeight:600, flex:1, lineHeight:1.3 }}>{q.label || 'Pergunta sem título'}</span>
                  {q.required && <span style={{ fontSize:10, color:'var(--fg-muted)', flexShrink:0 }}>Obrigatória</span>}
                  <Badge tone={answer ? 'success' : 'warning'}>{answer ? 'Respondido' : 'Aguardando'}</Badge>
                </div>
                <div style={{ padding:'12px 16px', minHeight:44 }}>
                  {answer ? (
                    <div style={{ fontSize:13, color:'var(--fg-primary)', lineHeight:1.6 }}>
                      {Array.isArray(answer) ? answer.join(' · ') : String(answer)}
                    </div>
                  ) : (
                    <>
                      <div style={{ fontSize:13, color:'var(--fg-muted)', fontStyle:'italic' }}>
                        Aguardando resposta do cliente…
                      </div>
                      {(q.type==='radio' || q.type==='checkbox') && (q.options||[]).length>0 && (
                        <div style={{ marginTop:8, display:'flex', flexWrap:'wrap', gap:6 }}>
                          {q.options.map((opt,j) => (
                            <span key={j} style={{ padding:'3px 10px', borderRadius:6, background:'var(--bg-elevated)', border:'1px solid var(--border-subtle)', fontSize:12, color:'var(--fg-muted)' }}>{opt}</span>
                          ))}
                        </div>
                      )}
                    </>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </BMModal>
  );
}

// ─── Budget editor step components ─────────────────────────────────────────
function StepFormato({ format, setFormat }) {
  const opts = [
    { id:'link',   icon:'⛓', label:'Link interativo',          desc:'Página web com proposta, branding e assinatura digital. Ideal para enviar ao cliente por mensagem ou e-mail.', bullets:['Assinatura eletrônica','Branding personalizado','Partilha por link'] },
    { id:'pdf',    icon:'📄', label:'PDF direto',                desc:'Documento A4 objetivo para impressão ou anexo. Foco em valores, itens e condições.',                         bullets:['Exportação profissional','Pré-visualização','Sem página interativa'] },
    { id:'slides', icon:'🖥', label:'Proposta em apresentação', desc:'Slides com impacto visual para reuniões e envio comercial. Modo apresentação e exportação PDF.',             bullets:['Slides editáveis','Branding da marca','Modo apresentação'] },
  ];
  return (
    <div>
      <h3 style={{ margin:'0 0 6px', fontSize:18, fontWeight:700 }}>Como deseja gerar este orçamento?</h3>
      <p style={{ margin:'0 0 20px', fontSize:13, color:'var(--fg-muted)' }}>Escolha o formato principal. Os dados (cliente, serviços, valores) são os mesmos; apenas a apresentação muda.</p>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:14 }}>
        {opts.map(o => {
          const active = format===o.id;
          return (
            <div key={o.id} onClick={()=>setFormat(o.id)} style={{
              padding:20, borderRadius:14, cursor:'pointer',
              border:`2px solid ${active ? '#FF6A6A' : 'var(--border-subtle)'}`,
              background: active ? 'rgba(255,106,106,0.06)' : 'var(--bg-elevated)',
              boxShadow: active ? '0 0 0 4px rgba(255,106,106,0.1)' : 'none',
              transition:'all 160ms ease', display:'flex', flexDirection:'column', gap:12,
            }}>
              <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                <div style={{ width:42, height:42, borderRadius:10, background:active?'rgba(255,106,106,0.18)':'var(--bg-surface)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:20 }}>{o.icon}</div>
                <div style={{ fontSize:16, fontWeight:700 }}>{o.label}</div>
              </div>
              <p style={{ margin:0, fontSize:13, color:'var(--fg-secondary)', lineHeight:1.5 }}>{o.desc}</p>
              <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:5 }}>
                {o.bullets.map(b=>(
                  <li key={b} style={{ display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--fg-secondary)' }}>
                    <span style={{ width:6, height:6, borderRadius:'50%', background:'#FF6A6A', flexShrink:0 }}/>{b}
                  </li>
                ))}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StepBasico({ form, set }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
        <Field label="Cliente"><input value={form.client} onChange={e=>set('client',e.target.value)} placeholder="Nome do cliente ou empresa" style={inp}/></Field>
        <Field label="Validade (dias)"><input type="number" min="1" value={form.validity} onChange={e=>set('validity',e.target.value)} style={inp}/></Field>
      </div>
      <Field label="Título do orçamento"><input value={form.title} onChange={e=>set('title',e.target.value)} placeholder="ex: Identidade visual completa" style={inp}/></Field>
      <Field label="Descrição breve"><textarea rows={3} value={form.desc} onChange={e=>set('desc',e.target.value)} placeholder="Contexto rápido sobre o projeto e escopo" style={{...inp,resize:'vertical',minHeight:80}}/></Field>
      <Field label="Observações internas"><textarea rows={2} value={form.notes} onChange={e=>set('notes',e.target.value)} placeholder="Notas de negociação — não aparecem para o cliente" style={{...inp,resize:'vertical',minHeight:60}}/></Field>
    </div>
  );
}

function StepServicos({ form, set, total, final, fmt }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 70px 130px 130px 28px', gap:8, fontSize:11, fontFamily:'var(--font-display)', fontWeight:700, color:'var(--fg-muted)', textTransform:'uppercase', letterSpacing:'0.06em' }}>
        <span>Descrição</span><span>Qtd</span><span>Valor un.</span><span>Subtotal</span><span/>
      </div>
      {form.items.map((it,i)=>(
        <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 70px 130px 130px 28px', gap:8, alignItems:'center' }}>
          <input value={it.d} onChange={e=>{const ns=[...form.items];ns[i]={...it,d:e.target.value};set('items',ns);}} placeholder="Descrição do serviço" style={inp}/>
          <input type="number" min="1" value={it.q} onChange={e=>{const ns=[...form.items];ns[i]={...it,q:+e.target.value||1};set('items',ns);}} style={inp}/>
          <input type="number" min="0" value={it.p} onChange={e=>{const ns=[...form.items];ns[i]={...it,p:+e.target.value||0};set('items',ns);}} style={inp}/>
          <span style={{ fontFamily:'var(--font-mono)', fontSize:13, fontWeight:700, textAlign:'right', paddingRight:4 }}>{fmt(it.q*it.p)}</span>
          <button onClick={()=>set('items',form.items.filter((_,j)=>j!==i))} style={{ background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize:18, lineHeight:1 }}>×</button>
        </div>
      ))}
      <button onClick={()=>set('items',[...form.items,{d:'',q:1,p:0}])} style={{ padding:'10px 12px', borderRadius:8, border:'1px dashed var(--border-subtle)', background:'transparent', color:'var(--fg-secondary)', cursor:'pointer', fontSize:13, fontWeight:600, textAlign:'left' }}>+ Adicionar item</button>
      <div style={{ marginTop:4, padding:16, borderRadius:10, background:'var(--bg-elevated)', display:'grid', gridTemplateColumns:'1fr auto', rowGap:8, fontSize:13 }}>
        <span style={{ color:'var(--fg-muted)' }}>Subtotal</span><strong style={{ fontFamily:'var(--font-mono)', textAlign:'right' }}>{fmt(total)}</strong>
        <span style={{ color:'var(--fg-muted)' }}>Desconto (R$)</span>
        <input type="number" min="0" value={form.discount} onChange={e=>set('discount',+e.target.value||0)} style={{...inp,width:120,justifySelf:'end',textAlign:'right',padding:'6px 10px'}}/>
        <span style={{ fontWeight:700, fontSize:15 }}>Total</span>
        <strong style={{ fontFamily:'var(--font-display)', fontSize:20, textAlign:'right', color:'var(--geek-blue-300)' }}>{fmt(final)}</strong>
      </div>
    </div>
  );
}

function StepPagamento({ form, set }) {
  const methods=[['pix','PIX'],['boleto','Boleto'],['cartao','Cartão'],['transferencia','Transferência']];
  const presets=['50% no início, 50% na entrega.','100% no início.','30% entrada, 70% na entrega.'];
  const chipBtn=(active)=>({
    padding:'7px 14px', borderRadius:8, fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit',
    background:active?'var(--primary-soft)':'var(--bg-elevated)',
    color:active?'var(--geek-blue-200)':'var(--fg-secondary)',
    border:`1px solid ${active?'var(--geek-blue-a40)':'var(--border-subtle)'}`,
  });
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <Field label="Forma de pagamento">
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginTop:4 }}>
          {methods.map(([id,l])=>(
            <button key={id} onClick={()=>set('payMethod',id)} style={chipBtn(form.payMethod===id)}>{l}</button>
          ))}
        </div>
      </Field>
      {form.payMethod==='cartao' && (
        <Field label="Parcelamento">
          <select value={form.installments} onChange={e=>set('installments',+e.target.value)} style={inp}>
            {[1,2,3,4,5,6,8,10,12].map(n=><option key={n} value={n}>{n}× sem juros</option>)}
          </select>
        </Field>
      )}
      <Field label="Condições de pagamento">
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', marginBottom:10 }}>
          {presets.map(t=>(
            <button key={t} onClick={()=>set('payTerms',t)} style={{...chipBtn(form.payTerms===t),borderRadius:999,fontSize:12}}>{t}</button>
          ))}
        </div>
        <textarea rows={3} value={form.payTerms} onChange={e=>set('payTerms',e.target.value)} placeholder="Descreva as condições de pagamento acordadas…" style={{...inp,resize:'vertical',minHeight:80}}/>
      </Field>
    </div>
  );
}

function StepHero({ form, set }) {
  const cores=['#1D39C4','#FF6A6A','#36CFC9','#7C3AED','#22C55E','#FA541C','#FADB14'];
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ height:90, borderRadius:12, background:`linear-gradient(135deg,${form.heroCor},${form.heroCor}88)`, display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:'14px 18px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, background:'radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15), transparent 60%)' }}/>
        <div style={{ position:'relative', fontSize:18, fontWeight:800, color:'#fff' }}>{form.heroTitle||'Título da proposta'}</div>
        {form.heroSubtitle && <div style={{ position:'relative', fontSize:13, color:'rgba(255,255,255,0.75)', marginTop:2 }}>{form.heroSubtitle}</div>}
      </div>
      <Field label="Título (headline da capa)"><input value={form.heroTitle} onChange={e=>set('heroTitle',e.target.value)} placeholder="ex: Proposta · Identidade Visual Astra" style={inp}/></Field>
      <Field label="Subtítulo"><input value={form.heroSubtitle} onChange={e=>set('heroSubtitle',e.target.value)} placeholder="ex: Criado para Astra Cosméticos · Maio 2026" style={inp}/></Field>
      <Field label="Cor da capa">
        <div style={{ display:'flex', gap:8, marginTop:6 }}>
          {cores.map(c=><button key={c} onClick={()=>set('heroCor',c)} style={{ width:36, height:36, borderRadius:8, background:c, cursor:'pointer', border:`3px solid ${form.heroCor===c?'var(--fg-primary)':'transparent'}` }}/>)}
        </div>
      </Field>
    </div>
  );
}

function StepTexto({ label, field, placeholder, form, set }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
      <Field label={label}>
        <textarea rows={8} value={form[field]} onChange={e=>set(field,e.target.value)} placeholder={placeholder} style={{...inp,resize:'vertical',minHeight:180,lineHeight:1.6}}/>
      </Field>
      <div style={{ fontSize:12, color:'var(--fg-muted)' }}>{(form[field]||'').length} caracteres</div>
    </div>
  );
}

function StepPrazo({ form, set }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
        <Field label="Início previsto"><input type="date" value={form.prazoInicio} onChange={e=>set('prazoInicio',e.target.value)} style={inp}/></Field>
        <Field label="Entrega final"><input type="date" value={form.prazoFim} onChange={e=>set('prazoFim',e.target.value)} style={inp}/></Field>
      </div>
      <Field label="Marcos / Entregas parciais">
        <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:4 }}>
          {form.milestones.map((m,i)=>(
            <div key={i} style={{ display:'grid', gridTemplateColumns:'1fr 150px 28px', gap:8, alignItems:'center' }}>
              <input value={m.label} onChange={e=>{const ns=[...form.milestones];ns[i]={...m,label:e.target.value};set('milestones',ns);}} placeholder="Nome do marco" style={inp}/>
              <input type="date" value={m.date} onChange={e=>{const ns=[...form.milestones];ns[i]={...m,date:e.target.value};set('milestones',ns);}} style={inp}/>
              <button onClick={()=>set('milestones',form.milestones.filter((_,j)=>j!==i))} style={{ background:'transparent',border:'none',color:'var(--fg-muted)',cursor:'pointer',fontSize:18 }}>×</button>
            </div>
          ))}
          <button onClick={()=>set('milestones',[...form.milestones,{label:'',date:''}])} style={{ padding:'10px 12px', borderRadius:8, border:'1px dashed var(--border-subtle)', background:'transparent', color:'var(--fg-secondary)', cursor:'pointer', fontSize:13, fontWeight:600, textAlign:'left' }}>+ Adicionar marco</button>
        </div>
      </Field>
    </div>
  );
}

function StepCta({ form, set }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
      <Field label="Chamada para ação"><input value={form.cta} onChange={e=>set('cta',e.target.value)} placeholder="ex: Vamos transformar a sua marca juntos?" style={inp}/></Field>
      <Field label="Urgência ou condição especial"><input value={form.urgencia} onChange={e=>set('urgencia',e.target.value)} placeholder="ex: Proposta válida até 20/05. Vagas limitadas para junho." style={inp}/></Field>
      <Field label="Próximos passos"><textarea rows={4} value={form.proximosPassos} onChange={e=>set('proximosPassos',e.target.value)} placeholder="ex: 1. Aprovação do orçamento  2. Assinatura do contrato  3. Kickoff" style={{...inp,resize:'vertical',minHeight:100}}/></Field>
    </div>
  );
}

function StepRevisao({ form, format, total, final, fmt, FORMATS }) {
  const rows=[
    ['Formato',FORMATS[format].label],
    ['Cliente',form.client],
    ['Título',form.title],
    ['Descrição',form.desc],
    ['Validade',form.validity?`${form.validity} dias`:null],
    ['Pagamento',form.payTerms],
    format==='slides'?['CTA',form.cta]:null,
    format==='slides'&&form.prazoFim?['Entrega',form.prazoFim]:null,
  ].filter(Boolean);
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      <div style={{ padding:18, borderRadius:12, background:`linear-gradient(135deg,${form.heroCor||'#1D39C4'},${form.heroCor||'#1D39C4'}88)`, position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, background:'radial-gradient(circle at 10% 20%, rgba(255,255,255,0.1), transparent 60%)' }}/>
        <div style={{ position:'relative', fontSize:11, color:'rgba(255,255,255,0.6)', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em' }}>{FORMATS[format].label}</div>
        <div style={{ position:'relative', fontSize:20, fontWeight:800, color:'#fff', marginTop:4 }}>{form.title||form.heroTitle||'Sem título'}</div>
        <div style={{ position:'relative', fontSize:13, color:'rgba(255,255,255,0.75)', marginTop:2 }}>Para {form.client||'—'} · Válido por {form.validity||'14'} dias</div>
      </div>
      <div style={{ padding:16, borderRadius:10, background:'var(--bg-elevated)', display:'grid', gridTemplateColumns:'auto 1fr', gap:'10px 16px', alignItems:'start' }}>
        {rows.map(([l,v])=>v?<React.Fragment key={l}><span style={{ fontSize:13, color:'var(--fg-muted)' }}>{l}</span><span style={{ fontSize:13, fontWeight:600 }}>{v}</span></React.Fragment>:null)}
      </div>
      {form.items.length>0&&(
        <div>
          <div style={{ fontSize:11, fontFamily:'var(--font-display)', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--fg-muted)', marginBottom:8 }}>Serviços</div>
          {form.items.map((it,i)=>(
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'8px 12px', background:'var(--bg-elevated)', borderRadius:8, fontSize:13, marginBottom:4 }}>
              <span>{it.d||`Item ${i+1}`} <span style={{ color:'var(--fg-muted)' }}>×{it.q}</span></span>
              <span style={{ fontFamily:'var(--font-mono)', fontWeight:700 }}>{fmt(it.q*it.p)}</span>
            </div>
          ))}
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding:'10px 12px 0' }}>
            <span style={{ fontSize:13, color:'var(--fg-muted)' }}>Total</span>
            <span style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:700, color:'var(--geek-blue-300)' }}>{fmt(final)}</span>
          </div>
        </div>
      )}
      <div style={{ padding:14, borderRadius:10, background:'rgba(255,106,106,0.08)', border:'1px solid rgba(255,106,106,0.25)', fontSize:13, color:'var(--fg-secondary)' }}>
        <strong style={{ color:'#FF6A6A' }}>Pronto para criar.</strong> O orçamento será salvo como rascunho. Você poderá enviá-lo ao cliente quando quiser.
      </div>
    </div>
  );
}

// ─── BudgetEditorModal ────────────────────────────────────────────────────────
function BudgetEditorModal({ onClose, onCreate, initialData }) {
  const [format, setFormat] = useStateBM(initialData?.format || 'link');
  const [step,   setStep]   = useStateBM(0);
  const defaultItems = initialData?.items?.length
    ? initialData.items.map(it=>({ d:it.d||'', q:it.q||1, p:it.p||0 }))
    : [{ d:'Pesquisa e estratégia',q:1,p:3500 },{ d:'Identidade visual',q:1,p:8500 },{ d:'Manual de marca',q:1,p:2400 }];
  const [form, setForm] = useStateBM({
    client:'', title:initialData?.title||'', desc:'', validity:'14', notes:'',
    items:defaultItems, discount:0,
    payMethod:'pix', payTerms:'50% no início, 50% na entrega final.', installments:1,
    heroTitle:'', heroSubtitle:'', heroCor:'#1D39C4',
    intro:'', foco:'', solucao:'',
    prazoInicio:'', prazoFim:'',
    milestones:[{ label:'Entrega parcial 1', date:'' }],
    cta:'', urgencia:'', proximosPassos:'',
  });
  const set=(k,v)=>setForm(f=>({ ...f,[k]:v }));
  const FORMATS={
    link:   { label:'Link interativo',          steps:['Formato','Básico','Serviços','Pagamento','Revisão'] },
    pdf:    { label:'PDF direto',                steps:['Formato','Básico','Serviços','Pagamento','Revisão'] },
    slides: { label:'Proposta em apresentação', steps:['Formato','Hero','Intro','Foco','Solução','Itens','Preço','Prazo','CTA','Revisão'] },
  };
  const steps=FORMATS[format].steps;
  const total=steps.length;
  const pct=Math.round((step/(total-1))*100);
  const stepName=steps[step];
  const itemTotal=form.items.reduce((a,i)=>a+i.q*i.p,0);
  const finalVal=Math.max(0,itemTotal-form.discount);
  const fmtV=n=>'R$ '+n.toLocaleString('pt-BR',{minimumFractionDigits:2});
  const btnGrad='linear-gradient(135deg,#FF6A6A,#FA8C16)';
  const canNext=
    stepName==='Básico'?(form.client.trim().length>0&&form.title.trim().length>0):
    (stepName==='Serviços'||stepName==='Itens')?form.items.length>0:true;

  return (
    <div onClick={onClose} style={{ position:'fixed',inset:0,background:'rgba(8,12,28,0.72)',backdropFilter:'blur(6px)',zIndex:200,display:'flex',alignItems:'center',justifyContent:'center',padding:24 }}>
      <div onClick={e=>e.stopPropagation()} style={{ width:'min(900px,100%)',maxHeight:'92vh',display:'flex',flexDirection:'column',background:'var(--bg-surface)',border:'1px solid var(--border-strong)',borderRadius:18,boxShadow:'0 30px 80px rgba(0,0,0,0.55)',overflow:'hidden' }}>
        <div style={{ padding:'22px 28px',borderBottom:'1px solid var(--border-subtle)',display:'flex',alignItems:'flex-start',justifyContent:'space-between' }}>
          <div>
            <h2 style={{ margin:0,fontSize:22,fontWeight:700 }}>Novo Orçamento</h2>
            <div style={{ fontSize:13,color:'var(--fg-muted)',marginTop:4 }}>Preencha as informações para criar um novo orçamento</div>
          </div>
          <button onClick={onClose} style={{ background:'var(--bg-elevated)',border:'1px solid var(--border-subtle)',color:'var(--fg-secondary)',width:36,height:36,borderRadius:8,cursor:'pointer',fontSize:20,display:'flex',alignItems:'center',justifyContent:'center',fontFamily:'inherit' }}>×</button>
        </div>
        <div style={{ padding:'16px 28px',borderBottom:'1px solid var(--border-subtle)' }}>
          <div style={{ display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10 }}>
            <span style={{ fontFamily:'var(--font-display)',fontSize:13,fontWeight:700 }}>Etapa {step+1} de {total}</span>
            <span style={{ fontSize:12,color:'var(--fg-muted)' }}>{pct}% completo</span>
          </div>
          <div style={{ display:'flex',gap:4 }}>
            {steps.map((s,i)=>(
              <div key={s} style={{ flex:1,height:4,borderRadius:2,transition:'background 200ms',background:i<=step?btnGrad:'var(--bg-elevated)' }}/>
            ))}
          </div>
          <div style={{ display:'flex',marginTop:8 }}>
            {steps.map((s,i)=>(
              <div key={s} style={{ flex:1,fontSize:10,fontWeight:i===step?700:400,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',color:i===step?'var(--fg-primary)':'var(--fg-muted)',textAlign:i===0?'left':i===steps.length-1?'right':'center' }}>{s}</div>
            ))}
          </div>
        </div>
        <div style={{ flex:1,overflow:'auto',padding:'24px 28px' }}>
          {step===0                                       &&<StepFormato format={format} setFormat={setFormat}/>}
          {stepName==='Básico'                            &&<StepBasico form={form} set={set}/>}
          {(stepName==='Serviços'||stepName==='Itens')    &&<StepServicos form={form} set={set} total={itemTotal} final={finalVal} fmt={fmtV}/>}
          {(stepName==='Pagamento'||stepName==='Preço')   &&<StepPagamento form={form} set={set}/>}
          {stepName==='Hero'                              &&<StepHero form={form} set={set}/>}
          {stepName==='Intro'                             &&<StepTexto label="Introdução" field="intro" placeholder="Apresente o seu estúdio/agência…" form={form} set={set}/>}
          {stepName==='Foco'                              &&<StepTexto label="O desafio do cliente" field="foco" placeholder="Descreva o problema que o cliente enfrenta…" form={form} set={set}/>}
          {stepName==='Solução'                           &&<StepTexto label="Nossa solução" field="solucao" placeholder="Como você vai resolver o problema?" form={form} set={set}/>}
          {stepName==='Prazo'                             &&<StepPrazo form={form} set={set}/>}
          {stepName==='CTA'                               &&<StepCta form={form} set={set}/>}
          {stepName==='Revisão'                           &&<StepRevisao form={form} format={format} total={itemTotal} final={finalVal} fmt={fmtV} FORMATS={FORMATS}/>}
        </div>
        <div style={{ padding:'16px 28px',borderTop:'1px solid var(--border-subtle)',display:'flex',gap:12,background:'var(--bg-elevated)' }}>
          <button onClick={()=>step>0&&setStep(s=>s-1)} style={{ flex:1,padding:'13px 0',borderRadius:10,fontSize:14,fontWeight:600,fontFamily:'inherit',cursor:step===0?'default':'pointer',background:'var(--bg-surface)',border:'1px solid var(--border-subtle)',color:step===0?'var(--fg-muted)':'var(--fg-secondary)',display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}>‹ Voltar</button>
          {step<total-1?(
            <button onClick={()=>canNext&&setStep(s=>s+1)} style={{ flex:2,padding:'13px 0',borderRadius:10,fontSize:14,fontWeight:700,fontFamily:'inherit',cursor:canNext?'pointer':'not-allowed',background:canNext?btnGrad:'var(--bg-elevated)',border:'none',color:canNext?'#fff':'var(--fg-muted)',opacity:canNext?1:0.55,display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}>Próximo ›</button>
          ):(
            <button onClick={()=>onCreate?.({...form,format})} style={{ flex:2,padding:'13px 0',borderRadius:10,fontSize:14,fontWeight:700,fontFamily:'inherit',cursor:'pointer',background:btnGrad,border:'none',color:'#fff',display:'flex',alignItems:'center',justifyContent:'center',gap:8 }}>Criar orçamento ✓</button>
          )}
        </div>
      </div>
    </div>
  );
}

// ─── TemplateEditorModal ──────────────────────────────────────────────────────
function TemplateEditorModal({ onClose, onCreate }) {
  const [form, setForm] = useStateBM({
    name:'', tag:'Branding', color:'#1D39C4',
    questions:[ { id:mkQId(), type:'text', label:'Como você descreveria o projeto em uma frase?', required:true, options:[] }, { id:mkQId(), type:'textarea', label:'Qual é o objetivo principal?', required:true, options:[] }, { id:mkQId(), type:'text', label:'Quem é o público-alvo?', required:false, options:[] } ],
  });
  const set=(k,v)=>setForm(f=>({ ...f,[k]:v }));
  const colors=['#1D39C4','#36CFC9','#FA541C','#7C3AED','#22C55E','#FADB14'];
  return (
    <BMModal onClose={onClose} title="Novo template de briefing" subtitle="Editor de modelo" width={760}
      foot={<>
        <Button variant="ghost" onClick={onClose}>Cancelar</Button>
        <Button onClick={()=>onCreate?.(form)} disabled={!form.name.trim()||form.questions.length===0}>Salvar template →</Button>
      </>}>
      <div style={{ padding:24, display:'flex', flexDirection:'column', gap:16 }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          <Field label="Nome do template"><input value={form.name} onChange={e=>set('name',e.target.value)} placeholder="ex: Branding completo" style={inp}/></Field>
          <Field label="Categoria">
            <select value={form.tag} onChange={e=>set('tag',e.target.value)} style={inp}>
              {['Branding','Web','Campanha','Conteúdo','Editorial','Custom'].map(t=><option key={t}>{t}</option>)}
            </select>
          </Field>
        </div>
        <Field label="Cor de capa">
          <div style={{ display:'flex', gap:8, marginTop:6 }}>
            {colors.map(c=>(
              <button key={c} onClick={()=>set('color',c)} style={{ width:36,height:36,borderRadius:8,background:c,cursor:'pointer',border:`3px solid ${form.color===c?'var(--fg-primary)':'transparent'}` }}/>
            ))}
          </div>
        </Field>
        <Field label={`Perguntas (${form.questions.length})`}>
          <QuestionBuilder questions={form.questions} onChange={q=>set('questions',q)}/>
        </Field>
      </div>
    </BMModal>
  );
}

// ─── Exports ──────────────────────────────────────────────────────────────────
window.TemplatesGalleryModal = TemplatesGalleryModal;
window.BriefingWizard        = BriefingWizard;
window.BriefingFormModal     = BriefingFormModal;
window.BriefingDetailModal   = BriefingDetailModal;
window.BudgetEditorModal     = BudgetEditorModal;
window.TemplateEditorModal   = TemplateEditorModal;
window.BM_TEMPLATES          = BM_TEMPLATES;
window.QUESTION_TYPES        = QUESTION_TYPES;
window.QTYPE_COLORS          = QTYPE_COLORS;