/* crm-proposal.jsx — Proposal builder · Jorge's workspace before sending the invite */

function NewProposal({ onNav }) {
  // Pre-fill with the draft customer (Quinta da Pousa, Évora — hotel, draft contract)
  const [customerId, setCustomerId] = React.useState('HTL-26-0177');
  const customer = CRM_BY_ID[customerId];
  const draftContract = CRM_CONTRACTS.find(c => c.id === customerId && c.state === 'draft');

  // Recipe presets curated per business kind
  const presets = {
    Hotel: [
      ['CDR-SHM-5L', 12], ['BGP-SBL-5L', 8],
      ['SLT-LOC-1L', 36], ['SLT-SBR-12', 280], ['LNH-TLR-46', 120],
    ],
    Spa: [
      ['BGP-SBL-5L', 6], ['SLT-LOC-1L', 30], ['SLT-SBR-12', 200],
    ],
    Ginásio: [
      ['SLT-SBR-12', 80], ['SLT-LOC-1L', 12],
    ],
    Barbearia: [
      ['CDR-OLB-30', 16], ['BGP-PCB-10', 12], ['SLT-SBR-12', 48],
    ],
  };

  // Base recipe (mutable)
  const [base, setBase] = React.useState(() => {
    const preset = presets[customer.kind] || [];
    return preset.map(([code, qty]) => {
      const p = CRM_PRODUCTS.find(x => x.code === code);
      return { ...p, qty };
    });
  });

  // Terms
  const [terms, setTerms] = React.useState({
    duration: 24,
    cadence:  'Trimestral',
    startDate: '15.12.2026',
    payment:  'SEPA SDD B2B',
    renewal:  'Tácita · 60d denúncia',
  });

  // Personal note from Jorge
  const [note, setNote] = React.useState(
    `Olá ${customer.contact.split(' ')[0]} — depois da nossa conversa em Évora, ficou esta proposta a pensar no ritmo da Quinta da Pousa. Está construída para a época de Verão; podemos ajustar trimestre a trimestre conforme as reservas.`
  );

  // Right-pane preview mode
  const [previewMode, setPreviewMode] = React.useState('email');

  // Computed totals
  const subtotal = base.reduce((s, p) => s + p.price * p.qty, 0);
  const iva = subtotal * 0.23;
  const total = subtotal + iva;

  // Mutations
  const setQty = (code, q) => setBase(b => b.map(p => p.code === code ? { ...p, qty: Math.max(0, q) } : p));
  const removeItem = (code) => setBase(b => b.filter(p => p.code !== code));
  const addItem = (code) => {
    if (base.find(p => p.code === code)) return;
    const p = CRM_PRODUCTS.find(x => x.code === code);
    if (p) setBase(b => [...b, { ...p, qty: 1 }]);
  };
  const loadPreset = (kind) => {
    const preset = presets[kind] || [];
    setBase(preset.map(([code, qty]) => {
      const p = CRM_PRODUCTS.find(x => x.code === code);
      return { ...p, qty };
    }));
  };

  const canSend = base.length > 0 && note.trim().length > 30;
  const customerEmail = `${customer.contact.toLowerCase().replace(' ', '.')}@${customer.name.toLowerCase().replace(/\s+/g, '')}.pt`;

  return (
    <div className="content prop-root">
      {/* Page header */}
      <div className="flex between items-c" style={{ marginBottom: 8 }}>
        <div>
          <div className="row gap-3 items-c">
            <h1 style={{
              fontFamily: 'var(--display)', fontSize: 28, fontWeight: 500,
              margin: 0, letterSpacing: '-0.01em',
            }}>Nova proposta</h1>
            <span className="badge draft"><span className="dot"/>Rascunho · {customerId}</span>
          </div>
          <div className="ink-3" style={{ fontSize: 13, marginTop: 4 }}>
            Workspace antes do convite. O cliente recebe um email com link único que abre o wizard de adesão pré-preenchido.
          </div>
        </div>
        <div className="row gap-2">
          <button className="btn outline sm">
            <Icon k="download" size={13}/> Exportar PDF
          </button>
          <button className="btn ghost sm">Guardar rascunho</button>
          <button className="btn clay" disabled={!canSend}>
            <Icon k="arrow-r" size={14}/> Enviar a {customer.contact.split(' ')[0]}
          </button>
        </div>
      </div>

      {/* 2-pane workspace */}
      <div className="prop-grid">
        {/* ── LEFT: builder ─────────────────────────── */}
        <div className="prop-builder stack gap-5">

          {/* 1. Cliente */}
          <Section num="1" title="Cliente" hint="A quem se dirige a proposta">
            <div className="row gap-3" style={{ alignItems: 'flex-end' }}>
              <div className="field grow">
                <span className="lbl">Cliente</span>
                <select className="input" value={customerId} onChange={e => setCustomerId(e.target.value)}>
                  {CRM_CUSTOMERS.map(c => (
                    <option key={c.id} value={c.id}>
                      {c.name} · {c.loc} · {c.kind}
                    </option>
                  ))}
                </select>
              </div>
              <button className="btn outline">
                <Icon k="plus" size={13}/> Criar novo
              </button>
            </div>

            <div className="cust-card mt-3">
              <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
                <Mini label="Tipo"     value={customer.kind}/>
                <Mini label="NIF"      value={customer.nif} mono/>
                <Mini label="Contacto" value={customer.contact}/>
                <Mini label="Localidade" value={customer.loc}/>
              </div>
              <div className="ink-3 mt-3" style={{ fontSize: 11.5, fontFamily: 'var(--mono)' }}>
                envio para · <span style={{ color: 'var(--clay)' }}>{customerEmail}</span>
              </div>
            </div>
          </Section>

          {/* 2. Linha base */}
          <Section num="2" title="Linha base do contrato"
            hint="Quantidades trimestrais durante 24 meses · ajustáveis a cada ciclo">
            <div className="row gap-2 mt-1" style={{ flexWrap: 'wrap' }}>
              <span className="smallcaps" style={{ marginRight: 4 }}>Carregar preset</span>
              {Object.keys(presets).map(k => (
                <button key={k} className={'preset-pill' + (k === customer.kind ? ' active' : '')} onClick={() => loadPreset(k)}>
                  {k}
                </button>
              ))}
              <span className="ink-3" style={{ fontSize: 11.5, marginLeft: 'auto' }}>
                {base.length} {base.length === 1 ? 'SKU' : 'SKUs'} · {base.reduce((s, p) => s + p.qty, 0)} unidades / ciclo
              </span>
            </div>

            <div className="prop-table mt-3">
              <div className="prop-th">
                <span>Produto · fragrância</span>
                <span>Formato</span>
                <span style={{ textAlign: 'right' }}>PU</span>
                <span style={{ textAlign: 'center' }}>Qtd / ciclo</span>
                <span style={{ textAlign: 'right' }}>Subtotal</span>
                <span/>
              </div>
              {base.length === 0 && (
                <div className="prop-empty">
                  Sem produtos. Carrega um preset acima ou adiciona do catálogo em baixo.
                </div>
              )}
              {base.map(p => (
                <div key={p.code} className="prop-tr">
                  <div className="row gap-3 items-c">
                    <ProductSwatch kind={p.kind}/>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                      <div className="italic-serif ink-3" style={{ fontSize: 11.5 }}>{p.scent}</div>
                    </div>
                  </div>
                  <span className="ink-3" style={{ fontSize: 12 }}>{p.fmt}</span>
                  <span className="mono tab ink-3" style={{ textAlign: 'right' }}>{CRM_FMT_EUR(p.price)}</span>
                  <div style={{ textAlign: 'center' }}>
                    <Stepper value={p.qty} onChange={(v) => setQty(p.code, v)}/>
                  </div>
                  <span className="mono tab" style={{ textAlign: 'right', fontWeight: 600 }}>{CRM_FMT_EUR(p.price * p.qty)}</span>
                  <button className="btn ghost sm icon-only" onClick={() => removeItem(p.code)} title="Remover">
                    <Icon k="x" size={11}/>
                  </button>
                </div>
              ))}
            </div>

            {/* Catalog quick-add */}
            <details className="prop-catalog mt-3">
              <summary>
                <Icon k="plus" size={12}/> Adicionar produto do catálogo
                <span className="ink-3 mono" style={{ fontSize: 11, marginLeft: 'auto' }}>
                  {CRM_PRODUCTS.length - base.length} disponíveis
                </span>
              </summary>
              <div className="prop-catgrid">
                {CRM_PRODUCTS.filter(p => !base.find(b => b.code === p.code)).map(p => (
                  <button key={p.code} className="cat-add" onClick={() => addItem(p.code)}>
                    <div className="row gap-2 items-c">
                      <ProductSwatch kind={p.kind} small/>
                      <div className="grow" style={{ textAlign: 'left' }}>
                        <div style={{ fontSize: 12.5, fontWeight: 500 }}>{p.name}</div>
                        <div className="italic-serif ink-3" style={{ fontSize: 11 }}>{p.scent} · {p.fmt}</div>
                      </div>
                      <span className="mono ink-3" style={{ fontSize: 11 }}>{CRM_FMT_EUR(p.price)}</span>
                      <Icon k="plus" size={11} color="var(--clay)"/>
                    </div>
                  </button>
                ))}
              </div>
            </details>
          </Section>

          {/* 3. Termos */}
          <Section num="3" title="Termos do contrato"
            hint="O cliente vê isto no passo 2 do wizard · pode ler mas não alterar">
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <div className="field">
                <span className="lbl">Duração</span>
                <select className="input" value={terms.duration} onChange={e => setTerms({ ...terms, duration: parseInt(e.target.value, 10) })}>
                  <option value={12}>12 meses · 4 ciclos</option>
                  <option value={24}>24 meses · 8 ciclos</option>
                  <option value={36}>36 meses · 12 ciclos</option>
                </select>
              </div>
              <div className="field">
                <span className="lbl">Cadência</span>
                <select className="input" value={terms.cadence} onChange={e => setTerms({ ...terms, cadence: e.target.value })}>
                  <option>Trimestral</option>
                  <option>Mensal</option>
                  <option>Bimensal</option>
                  <option>Semestral</option>
                </select>
              </div>
              <div className="field">
                <span className="lbl">Início previsto</span>
                <input className="input mono" value={terms.startDate} onChange={e => setTerms({ ...terms, startDate: e.target.value })}/>
              </div>
              <div className="field">
                <span className="lbl">Pagamento</span>
                <input className="input" value={terms.payment} onChange={e => setTerms({ ...terms, payment: e.target.value })}/>
              </div>
              <div className="field" style={{ gridColumn: 'span 2' }}>
                <span className="lbl">Renovação</span>
                <input className="input" value={terms.renewal} onChange={e => setTerms({ ...terms, renewal: e.target.value })}/>
              </div>
            </div>
          </Section>

          {/* 4. Carta pessoal */}
          <Section num="4" title="Carta pessoal" hint="A primeira coisa que o cliente lê no email · escreve com voz tua">
            <textarea
              className="input"
              style={{ height: 'auto', padding: '12px 14px', minHeight: 120, lineHeight: 1.55, resize: 'vertical' }}
              value={note}
              onChange={e => setNote(e.target.value)}
            />
            <div className="ink-3 mt-2" style={{ fontSize: 11.5, fontFamily: 'var(--mono)' }}>
              {note.trim().length} caracteres · {note.trim().split(/\s+/).filter(Boolean).length} palavras
              {note.trim().length < 30 && <span style={{ color: 'var(--clay-deep)', marginLeft: 8 }}>· precisa de mais corpo</span>}
            </div>
          </Section>

          {/* 5. Send block */}
          <div className="prop-send">
            <div className="grid" style={{ gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
              <div className="prop-send-cell">
                <div className="smallcaps">Valor por ciclo</div>
                <div className="display tab clay" style={{ fontSize: 26, lineHeight: 1, marginTop: 4 }}>{CRM_FMT_EUR(total)}</div>
                <div className="ink-3 mono" style={{ fontSize: 11, marginTop: 4 }}>IVA 23% incluído</div>
              </div>
              <div className="prop-send-cell">
                <div className="smallcaps">Valor 24 meses</div>
                <div className="display tab" style={{ fontSize: 26, lineHeight: 1, marginTop: 4 }}>{CRM_FMT_EUR(total * 8)}</div>
                <div className="ink-3 mono" style={{ fontSize: 11, marginTop: 4 }}>8 ciclos · sem extras</div>
              </div>
              <div className="prop-send-cell">
                <div className="smallcaps">Validade do link</div>
                <div className="display tab" style={{ fontSize: 26, lineHeight: 1, marginTop: 4 }}>14 dias</div>
                <div className="ink-3 mono" style={{ fontSize: 11, marginTop: 4 }}>após envio</div>
              </div>
            </div>
            <hr style={{ border: 0, borderTop: '0.5px solid var(--rule)', margin: 0 }}/>
            <div className="row gap-3" style={{ padding: '18px 20px' }}>
              <button className="btn ghost">Cancelar</button>
              <button className="btn outline">Guardar rascunho</button>
              <div style={{ flex: 1 }}/>
              <button className="btn outline">
                <Icon k="bell" size={13}/> Enviar a mim primeiro
              </button>
              <button className="btn clay" disabled={!canSend}>
                <Icon k="arrow-r" size={14}/> Enviar a {customer.contact.split(' ')[0]}
              </button>
            </div>
          </div>
        </div>

        {/* ── RIGHT: live preview ─────────────────────── */}
        <div className="prop-preview">
          <div className="prev-head">
            <div className="smallcaps">O que {customer.contact.split(' ')[0]} vai ver</div>
            <div className="prev-tabs">
              <button className={'prev-tab' + (previewMode === 'email' ? ' active' : '')}
                onClick={() => setPreviewMode('email')}>Email</button>
              <button className={'prev-tab' + (previewMode === 'wizard' ? ' active' : '')}
                onClick={() => setPreviewMode('wizard')}>Adesão</button>
            </div>
          </div>

          <div className="prev-body">
            {previewMode === 'email' && (
              <EmailPreview customer={customer} note={note} total={total} sku={base.length} subtotal={subtotal}/>
            )}
            {previewMode === 'wizard' && (
              <WizardPreview customer={customer} base={base} terms={terms} total={total} subtotal={subtotal} iva={iva}/>
            )}
          </div>

          <div className="prev-foot">
            <Icon k="search" size={12} color="var(--ink-3)"/>
            <span className="ink-3 mono" style={{ fontSize: 11 }}>
              previsão em tempo real · atualiza enquanto editas
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Helpers ─────────────────────────────────────────────── */

function Section({ num, title, hint, children }) {
  return (
    <section className="prop-section">
      <div className="row gap-3" style={{ alignItems: 'baseline', marginBottom: 14 }}>
        <span className="prop-num">{num}</span>
        <div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 19, letterSpacing: '-0.01em' }}>{title}</div>
          {hint && <div className="ink-3" style={{ fontSize: 12, marginTop: 2 }}>{hint}</div>}
        </div>
      </div>
      {children}
    </section>
  );
}

function Mini({ label, value, mono }) {
  return (
    <div>
      <div className="smallcaps">{label}</div>
      <div className={'mt-1 ' + (mono ? 'mono' : '')} style={{ fontSize: 13.5 }}>{value}</div>
    </div>
  );
}

function ProductSwatch({ kind, small=false }) {
  const s = small ? 28 : 36;
  return (
    <div style={{
      width: s, height: s, borderRadius: 4,
      background: 'var(--surface-2)',
      backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 6px, rgba(168,106,61,0.08) 6px 7px)',
      border: '0.5px solid var(--rule-2)', flexShrink: 0,
    }}/>
  );
}

function Stepper({ value, onChange }) {
  return (
    <div className="row gap-1" style={{ justifyContent: 'center', alignItems: 'center' }}>
      <button className="btn ghost sm icon-only" onClick={() => onChange(value - 1)} disabled={value <= 0}>
        <Icon k="x" size={10}/>
      </button>
      <input
        type="number"
        className="prop-qty"
        value={value}
        onChange={(e) => onChange(parseInt(e.target.value || '0', 10))}
      />
      <button className="btn ghost sm icon-only" onClick={() => onChange(value + 1)}>
        <Icon k="plus" size={10}/>
      </button>
    </div>
  );
}

/* ── Preview: Email ───────────────────────────────────────── */
function EmailPreview({ customer, note, total, sku, subtotal }) {
  return (
    <div className="ep-frame">
      <div className="ep-inbox">
        <div className="ep-from">
          <div className="ep-av">J</div>
          <div className="grow">
            <div style={{ fontSize: 12.5, fontWeight: 600 }}>Jorge Libório · RVDE</div>
            <div className="mono ink-3" style={{ fontSize: 10.5 }}>jorge@rvde.pt</div>
          </div>
          <div className="mono ink-3" style={{ fontSize: 10.5 }}>agora</div>
        </div>
        <div className="ep-subj">Proposta para {customer.name}</div>
      </div>
      <div className="ep-body">
        <p className="ep-lede">
          {note.split(/\n+/).map((line, i) => <span key={i}>{line}<br/></span>)}
        </p>
        <div className="ep-pull">
          <div className="smallcaps" style={{ color: 'rgba(201,166,97,0.55)' }}>Valor estimado · trimestral</div>
          <div className="ep-big">{CRM_FMT_EUR(total)}</div>
          <div className="ep-pull-sub">{sku} produtos · 24 meses · 8 entregas · IVA incluído</div>
        </div>
        <p style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55, margin: '0 0 14px' }}>
          Demoras uns 6 minutos a rever tudo — podes ajustar quantidades, confirmar dados e assinar online. Sem compromisso até ao último passo.
        </p>
        <div className="ep-cta">
          Ver proposta <span style={{ fontFamily: 'var(--mono)' }}>→</span>
        </div>
        <div className="ep-sig">
          <div className="ep-av-jorge">J</div>
          <div>
            <div style={{ fontFamily: 'var(--display)', fontSize: 13 }}>Jorge Libório</div>
            <div className="ink-3" style={{ fontSize: 10 }}>RVDE · gerente</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── Preview: Wizard (step 2 — proposal overview) ─────────── */
function WizardPreview({ customer, base, terms, total, subtotal, iva }) {
  return (
    <div className="wp-frame">
      <div className="wp-rail">
        <div style={{ fontFamily: 'var(--display)', fontSize: 13, color: 'var(--bone)' }}>RVDE</div>
        <div className="mono" style={{ fontSize: 8, color: 'var(--sand)', textTransform: 'uppercase', letterSpacing: 0.1 }}>adesão</div>
        <div className="wp-doc">
          <div className="smallcaps" style={{ color: 'rgba(201,166,97,0.6)', fontSize: 8.5 }}>Proposta</div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 13, color: 'var(--bone)', marginTop: 2 }}>{customer.name}</div>
        </div>
        <ol className="wp-steps">
          {['Boas-vindas', 'A proposta', 'Ajustar base', 'Empresa', 'Contactos', 'SEPA', 'Assinar', 'Pronto'].map((s, i) => (
            <li key={i} className={i === 1 ? 'curr' : i === 0 ? 'done' : ''}>
              <span className="wp-num">{i < 1 ? '✓' : i + 1}</span>
              <span className="wp-lbl">{s}</span>
            </li>
          ))}
        </ol>
      </div>
      <div className="wp-canvas">
        <div className="smallcaps">Proposta · PRP-2026-Q3-{customer.id.slice(-4)}</div>
        <div style={{ fontFamily: 'var(--display)', fontSize: 22, marginTop: 6, letterSpacing: '-0.01em' }}>
          A proposta numa página.
        </div>

        <div className="wp-pull mt-3">
          <div className="smallcaps" style={{ color: 'rgba(201,166,97,0.55)', fontSize: 8.5 }}>Valor por ciclo · trimestral</div>
          <div style={{
            fontFamily: 'var(--display)', fontWeight: 300,
            fontSize: 32, color: 'var(--sand)', letterSpacing: '-0.025em',
            marginTop: 4, fontVariantNumeric: 'tabular-nums',
          }}>{CRM_FMT_EUR(total)}</div>
          <div className="ink-3" style={{ fontSize: 10, color: 'rgba(242,233,210,0.6)', marginTop: 4 }}>
            {base.length} produtos · IVA incluído
          </div>
        </div>

        <div className="grid mt-3" style={{ gridTemplateColumns: '1.2fr 0.8fr', gap: 8 }}>
          <div className="wp-card">
            <div className="smallcaps" style={{ fontSize: 8.5 }}>O que recebes</div>
            <div className="mt-2 stack" style={{ gap: 4 }}>
              {base.slice(0, 5).map(p => (
                <div key={p.code} className="flex between" style={{ fontSize: 10, padding: '3px 0', borderBottom: '0.5px solid var(--rule-2)' }}>
                  <span className="truncate" style={{ maxWidth: 120 }}>{p.name}</span>
                  <span className="mono ink-3">×{p.qty}</span>
                </div>
              ))}
              {base.length > 5 && (
                <div className="ink-3 mono" style={{ fontSize: 9.5, paddingTop: 2 }}>
                  + {base.length - 5} mais
                </div>
              )}
              {base.length === 0 && (
                <div className="ink-3" style={{ fontSize: 10, fontStyle: 'italic' }}>(sem produtos)</div>
              )}
            </div>
          </div>
          <div className="wp-card">
            <div className="smallcaps" style={{ fontSize: 8.5 }}>Termos</div>
            <div className="mt-2 stack" style={{ gap: 4, fontSize: 10 }}>
              <div className="flex between"><span className="ink-3">Duração</span><span>{terms.duration} m</span></div>
              <div className="flex between"><span className="ink-3">Cadência</span><span>{terms.cadence}</span></div>
              <div className="flex between"><span className="ink-3">Início</span><span className="mono">{terms.startDate}</span></div>
              <div className="flex between"><span className="ink-3">Pagamento</span><span>SEPA</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NewProposal });