// Painel de Admin da Organização — dono/admin do escritório assinante.
// Branding (nome, cor) e gestão da própria equipe.

const ORG_ROLE_LABELS = { owner: 'Dono', admin: 'Admin', member: 'Membro' };

const NewMemberModal = ({ onClose, onCreated }) => {
  const [form, setForm] = React.useState({ name: '', email: '', password: '', initials: '', role: 'advogado', orgRole: 'member' });
  const [saving, setSaving] = React.useState(false);
  const [error, setError] = React.useState('');
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const onSubmit = async (e) => {
    e.preventDefault();
    setSaving(true); setError('');
    try {
      const user = await window.OctaleApi.orgAdmin.createUser({
        ...form,
        initials: form.initials || form.name.slice(0, 2).toUpperCase(),
      });
      onCreated(user);
      onClose();
    } catch (err) {
      setError(err.message || 'Erro ao criar usuário.');
    } finally {
      setSaving(false);
    }
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(23,23,15,.6)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ background: '#fff', borderRadius: 14, padding: 32, width: 420, maxWidth: '92vw', maxHeight: '90vh', overflow: 'auto' }}>
        <h2 style={{ fontSize: 18, fontWeight: 800, color: 'var(--octale-navy)', marginBottom: 20 }}>Novo membro da equipe</h2>
        <form onSubmit={onSubmit} style={{ display: 'grid', gap: 12 }}>
          {error && (
            <div style={{ padding: '9px 12px', background: 'rgba(194,37,62,.08)', border: '1px solid rgba(194,37,62,.2)', borderRadius: 6, color: '#C2253E', fontSize: 12.5 }}>
              {error}
            </div>
          )}
          <div className="field-w">
            <label>Nome</label>
            <input value={form.name} onChange={e => set('name', e.target.value)} required />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 90px', gap: 8 }}>
            <div className="field-w">
              <label>E-mail</label>
              <input type="email" value={form.email} onChange={e => set('email', e.target.value)} required />
            </div>
            <div className="field-w">
              <label>Iniciais</label>
              <input value={form.initials} onChange={e => set('initials', e.target.value.toUpperCase().slice(0, 3))} />
            </div>
          </div>
          <div className="field-w">
            <label>Senha provisória</label>
            <input type="text" value={form.password} onChange={e => set('password', e.target.value)} minLength={8} required />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <div className="field-w">
              <label>Função</label>
              <select value={form.role} onChange={e => set('role', e.target.value)}>
                <option value="socio_admin">Sócio Administrador</option>
                <option value="socio">Sócio</option>
                <option value="advogado">Advogado(a)</option>
                <option value="paralegal">Paralegal</option>
              </select>
            </div>
            <div className="field-w">
              <label>Papel na organização</label>
              <select value={form.orgRole} onChange={e => set('orgRole', e.target.value)}>
                <option value="member">Membro</option>
                <option value="admin">Admin</option>
                <option value="owner">Dono</option>
              </select>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
            <button type="button" className="btn ghost sm" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn sm" disabled={saving}>
              {saving ? <><span className="spinner" style={{ width: 12, height: 12, borderWidth: 2, marginRight: 6 }} />Criando…</> : 'Adicionar'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

const OrgBrandingCard = ({ org, onUpdated }) => {
  const [form, setForm] = React.useState({ name: org.name, primary_color: org.primary_color || 'var(--octale-navy)' });
  const [saving, setSaving] = React.useState(false);
  const [logoUploading, setLogoUploading] = React.useState(false);
  const fileInputRef = React.useRef(null);

  const onSave = async () => {
    setSaving(true);
    try {
      const updated = await window.OctaleApi.orgAdmin.updateOrganization(form);
      onUpdated(updated);
    } catch (e) {
      alert(e.message || 'Erro ao salvar.');
    } finally {
      setSaving(false);
    }
  };

  const onLogoChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) { alert('Selecione uma imagem (JPG, PNG, SVG etc.).'); return; }

    const reader = new FileReader();
    reader.onload = (ev) => {
      const img = new Image();
      img.onload = async () => {
        // Redimensiona para no máximo 480px no maior lado (logo, não avatar).
        const MAX = 480;
        const ratio = Math.min(MAX / img.width, MAX / img.height, 1);
        const w = Math.round(img.width * ratio);
        const h = Math.round(img.height * ratio);
        const canvas = document.createElement('canvas');
        canvas.width = w; canvas.height = h;
        canvas.getContext('2d').drawImage(img, 0, 0, w, h);
        const dataUrl = canvas.toDataURL('image/png');

        setLogoUploading(true);
        try {
          const updated = await window.OctaleApi.orgAdmin.updateOrganization({ logo_url: dataUrl });
          onUpdated(updated);
        } catch (err) {
          alert('Erro ao salvar logo: ' + (err.message || 'tente novamente.'));
        } finally {
          setLogoUploading(false);
        }
      };
      img.src = ev.target.result;
    };
    reader.readAsDataURL(file);
    e.target.value = '';
  };

  const onRemoveLogo = async () => {
    if (!org.logo_url) return;
    if (!confirm('Remover logo da organização?')) return;
    try {
      const updated = await window.OctaleApi.orgAdmin.updateOrganization({ logo_url: null });
      onUpdated(updated);
    } catch (err) {
      alert('Erro ao remover logo: ' + (err.message || 'tente novamente.'));
    }
  };

  return (
    <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 10, padding: 20 }}>
      <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--octale-black)', marginBottom: 14 }}>Identidade da organização</h3>
      <div style={{ display: 'flex', gap: 14, marginBottom: 14, alignItems: 'flex-start' }}>
        <div style={{ width: 64, height: 64, borderRadius: 8, border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', background: '#fafafa', flexShrink: 0 }}>
          {org.logo_url
            ? <img src={org.logo_url} alt="Logo" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
            : <span style={{ fontSize: 10, color: 'var(--fg-muted)', textAlign: 'center' }}>Sem logo</span>}
        </div>
        <div>
          <input ref={fileInputRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={onLogoChange} />
          <div style={{ display: 'flex', gap: 8 }}>
            <button type="button" className="btn ghost sm" onClick={() => fileInputRef.current?.click()} disabled={logoUploading}>
              {logoUploading ? 'Enviando…' : (org.logo_url ? 'Trocar logo' : 'Enviar logo')}
            </button>
            {org.logo_url && <button type="button" className="btn ghost sm" onClick={onRemoveLogo}>Remover</button>}
          </div>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 6, maxWidth: 260 }}>
            Aparece na capa e no rodapé das propostas geradas. PNG/SVG com fundo transparente funciona melhor.
          </div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px', gap: 10, marginBottom: 14 }}>
        <div className="field-w">
          <label>Nome do escritório</label>
          <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
        </div>
        <div className="field-w">
          <label>Cor principal</label>
          <input type="color" value={form.primary_color} onChange={e => setForm(f => ({ ...f, primary_color: e.target.value }))} style={{ height: 34, padding: 2 }} />
        </div>
      </div>
      <button className="btn sm" onClick={onSave} disabled={saving}>
        {saving ? 'Salvando…' : 'Salvar identidade'}
      </button>
      <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border)', fontSize: 12, color: 'var(--fg-muted)' }}>
        Plano: <b style={{ color: 'var(--octale-black)' }}>{org.plan}</b> · Status: <b style={{ color: 'var(--octale-black)' }}>{org.status}</b>
        <div style={{ fontSize: 11, marginTop: 4 }}>Plano e status da assinatura são controlados pelo administrador da plataforma.</div>
      </div>
    </div>
  );
};

// ============================================================
// Editor de marca das propostas — cores, texto institucional, sócios.
// Salva tudo em organizations.proposal_branding (JSONB), reaproveitando o
// mesmo endpoint PATCH /api/org-admin/organization já usado por cima.
// ============================================================

const DEFAULT_BRANDING_COLORS = { primary: '#0D0D6B', dark: '#1A0A2E', accent: '#C8FF00', ink: '#14142B', muted: '#6B6B7B' };
const COLOR_FIELDS = [
  { key: 'primary', label: 'Primária (fundo escuro)' },
  { key: 'dark', label: 'Gradiente (capa)' },
  { key: 'accent', label: 'Destaque' },
  { key: 'ink', label: 'Texto (fundo claro)' },
  { key: 'muted', label: 'Texto secundário' },
];

const emptyPartner = () => ({ name: '', role: '', bio: '' });

const DEFAULT_ENABLED_PAGES = { indice: true, sobre: true, caso: true, analise: true, escopo: true };
const OPTIONAL_PAGE_FIELDS = [
  { key: 'indice', label: 'Índice' },
  { key: 'sobre', label: 'Sobre o escritório' },
  { key: 'caso', label: 'Resumo do caso' },
  { key: 'analise', label: 'Análise jurídica' },
  { key: 'escopo', label: 'Escopo da atuação' },
];

// A marca guarda endereço como HTML (aceita quebras de linha via <br/>), mas
// o campo de texto trabalha com \n normal — mais natural para digitar.
const addressHtmlToText = (html) => (html || '').replace(/<br\s*\/?>/gi, '\n');
const addressTextToHtml = (text) => (text || '').split('\n').map(l => l.trim()).filter(Boolean).join('<br/>');

const isValidHex = (v) => /^#[0-9A-Fa-f]{6}$/.test(v);

const ProposalBrandingCard = ({ org, onUpdated }) => {
  const b = org.proposal_branding || {};
  const [form, setForm] = React.useState({
    colors: { ...DEFAULT_BRANDING_COLORS, ...(b.colors || {}) },
    firmName: b.firmName || '',
    firmShortName: b.firmShortName || '',
    firmTagline: b.firmTagline || '',
    institutionalParagraphs: b.institutionalParagraphs && b.institutionalParagraphs.length > 0 ? b.institutionalParagraphs : [''],
    partners: b.partners && b.partners.length > 0 ? b.partners : [emptyPartner()],
    contactPhone: b.contactPhone || '',
    contactEmail: b.contactEmail || '',
    contactAddressText: addressHtmlToText(b.contactAddressHtml),
    enabledPages: { ...DEFAULT_ENABLED_PAGES, ...(b.enabledPages || {}) },
  });
  const [saving, setSaving] = React.useState(false);
  const [previewHtml, setPreviewHtml] = React.useState('');
  const [previewLoading, setPreviewLoading] = React.useState(false);

  const setColor = (key, value) => setForm(f => ({ ...f, colors: { ...f.colors, [key]: value } }));
  const setField = (key, value) => setForm(f => ({ ...f, [key]: value }));
  const togglePage = (key) => setForm(f => ({ ...f, enabledPages: { ...f.enabledPages, [key]: !f.enabledPages[key] } }));

  const setParagraph = (i, value) => setForm(f => ({ ...f, institutionalParagraphs: f.institutionalParagraphs.map((p, idx) => idx === i ? value : p) }));
  const addParagraph = () => setForm(f => (f.institutionalParagraphs.length >= 3 ? f : { ...f, institutionalParagraphs: [...f.institutionalParagraphs, ''] }));
  const removeParagraph = (i) => setForm(f => ({ ...f, institutionalParagraphs: f.institutionalParagraphs.filter((_, idx) => idx !== i) }));

  const setPartner = (i, key, value) => setForm(f => ({ ...f, partners: f.partners.map((p, idx) => idx === i ? { ...p, [key]: value } : p) }));
  const addPartner = () => setForm(f => (f.partners.length >= 8 ? f : { ...f, partners: [...f.partners, emptyPartner()] }));
  const removePartner = (i) => setForm(f => ({ ...f, partners: f.partners.filter((_, idx) => idx !== i) }));

  const buildPayload = () => ({
    colors: form.colors,
    firmName: form.firmName || undefined,
    firmShortName: form.firmShortName || undefined,
    firmTagline: form.firmTagline || undefined,
    institutionalParagraphs: form.institutionalParagraphs.filter(p => p.trim()),
    partners: form.partners.filter(p => p.name.trim()),
    contactPhone: form.contactPhone || undefined,
    contactEmail: form.contactEmail || undefined,
    contactAddressHtml: addressTextToHtml(form.contactAddressText) || undefined,
    enabledPages: form.enabledPages,
  });

  const runPreview = React.useCallback(() => {
    setPreviewLoading(true);
    window.OctaleApi.orgAdmin.previewProposalBranding({ proposal_branding: buildPayload(), logo_url: org.logo_url })
      .then(setPreviewHtml)
      .catch(() => {})
      .finally(() => setPreviewLoading(false));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form, org.logo_url]);

  // Preview inicial + debounce a cada mudança de campo.
  React.useEffect(() => {
    const t = setTimeout(runPreview, 500);
    return () => clearTimeout(t);
  }, [runPreview]);

  const onSave = async () => {
    setSaving(true);
    try {
      const updated = await window.OctaleApi.orgAdmin.updateOrganization({ proposal_branding: buildPayload() });
      onUpdated(updated);
    } catch (e) {
      alert(e.message || 'Erro ao salvar.');
    } finally {
      setSaving(false);
    }
  };

  const inputStyle = { width: '100%', boxSizing: 'border-box', padding: '7px 9px', border: '1px solid var(--border)', borderRadius: 6, fontSize: 12.5 };
  const labelStyle = { display: 'block', fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em', color: 'var(--fg-muted)', marginBottom: 4 };

  return (
    <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 10, padding: 20 }}>
      <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--octale-black)', marginBottom: 4 }}>Marca das propostas comerciais</h3>
      <p style={{ fontSize: 12, color: 'var(--fg-muted)', marginBottom: 16 }}>
        Define como a proposta gerada por IA aparece para o cliente final — cores, nome do escritório, texto institucional e sócios.
        Sem nada configurado aqui, a proposta usa o padrão do sistema.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 380px', gap: 20 }}>
        <div style={{ display: 'grid', gap: 16, minWidth: 0 }}>
          <div>
            <div style={labelStyle}>Cores</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
              {COLOR_FIELDS.map(cf => {
                const value = form.colors[cf.key] || '';
                const valid = isValidHex(value);
                return (
                  <div key={cf.key}>
                    <div style={{ display: 'flex', gap: 4 }}>
                      <input type="color" value={valid ? value : '#000000'} onChange={e => setColor(cf.key, e.target.value)} style={{ width: 30, height: 30, padding: 2, flexShrink: 0 }} title={cf.label} />
                      <input
                        type="text"
                        value={value}
                        onChange={e => setColor(cf.key, e.target.value)}
                        placeholder="#RRGGBB"
                        maxLength={7}
                        style={{ width: '100%', minWidth: 0, boxSizing: 'border-box', padding: '4px 6px', border: `1px solid ${valid ? 'var(--border)' : '#C2253E'}`, borderRadius: 6, fontSize: 11, fontFamily: 'monospace' }}
                      />
                    </div>
                    <div style={{ fontSize: 9.5, color: 'var(--fg-muted)', marginTop: 2, textAlign: 'center' }}>{cf.label}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <div className="field-w">
              <label>Nome completo do escritório</label>
              <input style={inputStyle} placeholder="Ex.: Nome & Sócios Advogados" value={form.firmName} onChange={e => setField('firmName', e.target.value)} />
            </div>
            <div className="field-w">
              <label>Nome curto (rodapé)</label>
              <input style={inputStyle} placeholder="Ex.: Nome Advogados" value={form.firmShortName} onChange={e => setField('firmShortName', e.target.value)} />
            </div>
            <div className="field-w">
              <label>Tagline</label>
              <input style={inputStyle} placeholder="Ex.: Boutique de Direito" value={form.firmTagline} onChange={e => setField('firmTagline', e.target.value)} />
            </div>
            <div className="field-w">
              <label>Telefone de contato</label>
              <input style={inputStyle} value={form.contactPhone} onChange={e => setField('contactPhone', e.target.value)} />
            </div>
            <div className="field-w" style={{ gridColumn: '1 / -1' }}>
              <label>E-mail de contato</label>
              <input style={inputStyle} value={form.contactEmail} onChange={e => setField('contactEmail', e.target.value)} />
            </div>
            <div className="field-w" style={{ gridColumn: '1 / -1' }}>
              <label>Endereço</label>
              <textarea
                rows={3}
                style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }}
                placeholder={'Uma linha por parte do endereço, ex.:\nRua Exemplo, 123 — Sala 45\nBairro · Cidade — UF · CEP'}
                value={form.contactAddressText}
                onChange={e => setField('contactAddressText', e.target.value)}
              />
            </div>
          </div>

          <div>
            <div style={labelStyle}>Apresentação institucional</div>
            {form.institutionalParagraphs.map((p, i) => (
              <div key={i} style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                <textarea rows={2} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }} value={p} onChange={e => setParagraph(i, e.target.value)} placeholder="Parágrafo de apresentação do escritório (aceita <strong>)." />
                {form.institutionalParagraphs.length > 1 && (
                  <button type="button" className="btn ghost sm" onClick={() => removeParagraph(i)} style={{ flexShrink: 0, height: 'fit-content' }}>×</button>
                )}
              </div>
            ))}
            {form.institutionalParagraphs.length < 3 && (
              <button type="button" className="btn ghost sm" onClick={addParagraph}>+ Parágrafo</button>
            )}
          </div>

          <div>
            <div style={labelStyle}>Sócios</div>
            {form.partners.map((p, i) => (
              <div key={i} style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 10, marginBottom: 8 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 6, marginBottom: 6 }}>
                  <input style={inputStyle} placeholder="Nome" value={p.name} onChange={e => setPartner(i, 'name', e.target.value)} />
                  <input style={inputStyle} placeholder="Cargo · área" value={p.role} onChange={e => setPartner(i, 'role', e.target.value)} />
                  {form.partners.length > 1 && (
                    <button type="button" className="btn ghost sm" onClick={() => removePartner(i)}>×</button>
                  )}
                </div>
                <textarea rows={2} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'inherit' }} placeholder="Bio curta" value={p.bio} onChange={e => setPartner(i, 'bio', e.target.value)} />
              </div>
            ))}
            {form.partners.length < 8 && (
              <button type="button" className="btn ghost sm" onClick={addPartner}>+ Sócio</button>
            )}
          </div>

          <div>
            <div style={labelStyle}>Páginas visíveis</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
              {OPTIONAL_PAGE_FIELDS.map(pf => (
                <label key={pf.key} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12.5, cursor: 'pointer' }}>
                  <input type="checkbox" checked={!!form.enabledPages[pf.key]} onChange={() => togglePage(pf.key)} />
                  {pf.label}
                </label>
              ))}
            </div>
            <div style={{ fontSize: 10.5, color: 'var(--fg-muted)', marginTop: 4 }}>
              Capa, Honorários e Contato aparecem sempre — são o mínimo de uma proposta comercial.
            </div>
          </div>

          <button className="btn sm" onClick={onSave} disabled={saving} style={{ justifySelf: 'start' }}>
            {saving ? 'Salvando…' : 'Salvar marca das propostas'}
          </button>
        </div>

        <div>
          <div style={labelStyle}>Pré-visualização (capa, sobre e honorários)</div>
          <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', position: 'relative', background: '#eee', height: 520 }}>
            {previewLoading && (
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,.6)', zIndex: 1, fontSize: 12, color: 'var(--fg-muted)' }}>
                Atualizando…
              </div>
            )}
            {previewHtml
              ? <iframe title="Pré-visualização da proposta" srcDoc={previewHtml} style={{ width: '400%', height: '400%', border: 0, transform: 'scale(0.25)', transformOrigin: 'top left' }} />
              : <div style={{ padding: 20, fontSize: 12, color: 'var(--fg-muted)' }}>Gerando pré-visualização…</div>}
          </div>
        </div>
      </div>
    </div>
  );
};

const OrgTeamCard = ({ currentUser, onOpenNew }) => {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const load = () => {
    window.OctaleApi.orgAdmin.listUsers().then(setUsers).catch(() => {}).finally(() => setLoading(false));
  };
  React.useEffect(() => { load(); }, []);

  const toggleActive = async (u) => {
    try {
      if (u.active) await window.OctaleApi.orgAdmin.deactivateUser(u.id);
      else await window.OctaleApi.orgAdmin.reactivateUser(u.id);
      setUsers(prev => prev.map(x => x.id === u.id ? { ...x, active: !x.active } : x));
    } catch (e) {
      alert(e.message || 'Erro ao atualizar.');
    }
  };

  const changeRole = async (u, orgRole) => {
    try {
      await window.OctaleApi.orgAdmin.changeUserRole(u.id, orgRole);
      setUsers(prev => prev.map(x => x.id === u.id ? { ...x, org_role: orgRole } : x));
    } catch (e) {
      alert(e.message || 'Erro ao atualizar papel.');
    }
  };

  return (
    <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 10, padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--octale-black)' }}>Equipe ({users.length})</h3>
        <button className="btn ghost sm" onClick={onOpenNew}><Icon name="plus" size={12} /> Novo membro</button>
      </div>
      {loading ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: 'var(--fg-muted)', fontSize: 12.5 }}>
          <div className="spinner" style={{ width: 14, height: 14 }} /> Carregando…
        </div>
      ) : (
        <div style={{ display: 'grid', gap: 8 }}>
          {users.map(u => (
            <div key={u.id} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px',
              border: '1px solid var(--border)', borderRadius: 8,
              opacity: u.active ? 1 : 0.5,
            }}>
              <UserAvatar user={u} size={32} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 13, color: 'var(--octale-black)' }}>
                  {u.name} {u.id === currentUser?.id && <span style={{ fontSize: 10, color: 'var(--fg-muted)' }}>(você)</span>}
                </div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-muted)' }}>{u.email}</div>
              </div>
              <select
                value={u.org_role}
                disabled={u.id === currentUser?.id}
                onChange={e => changeRole(u, e.target.value)}
                style={{ fontSize: 11.5, padding: '4px 6px', borderRadius: 6, border: '1px solid var(--border)' }}
              >
                {Object.entries(ORG_ROLE_LABELS).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
              </select>
              {u.id !== currentUser?.id && (
                <button className="btn ghost sm" onClick={() => toggleActive(u)}>
                  {u.active ? 'Desativar' : 'Reativar'}
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const OrgAdminPanel = ({ currentUser }) => {
  const [org, setOrg] = React.useState(null);
  const [usage, setUsage] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [modalOpen, setModalOpen] = React.useState(false);

  React.useEffect(() => {
    window.OctaleApi.orgAdmin.getOrganization()
      .then(({ organization, usage }) => { setOrg(organization); setUsage(usage); })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 300, gap: 12, color: 'var(--fg-muted)', fontSize: 13 }}>
      <div className="spinner" /> Carregando organização…
    </div>
  );

  if (!org) return (
    <div style={{ padding: 40, textAlign: 'center', color: 'var(--fg-muted)' }}>Organização não encontrada.</div>
  );

  return (
    <div style={{ padding: '0 2px' }}>
      <div style={{ marginBottom: 20 }}>
        <h1 style={{ fontSize: 22, fontWeight: 800, color: 'var(--octale-black)', marginBottom: 4 }}>Administração da organização</h1>
        <p style={{ fontSize: 13, color: 'var(--fg-muted)' }}>
          {usage?.users ?? 0} usuários · {usage?.clients ?? 0} clientes · {usage?.cases ?? 0} casos · {usage?.tasks ?? 0} tarefas
        </p>
      </div>

      <div style={{ display: 'grid', gap: 16, maxWidth: 1040 }}>
        <OrgBrandingCard org={org} onUpdated={setOrg} />
        <ProposalBrandingCard org={org} onUpdated={setOrg} />
        <div style={{ maxWidth: 640 }}>
          <OrgTeamCard currentUser={currentUser} onOpenNew={() => setModalOpen(true)} />
        </div>
      </div>

      {modalOpen && (
        <NewMemberModal onClose={() => setModalOpen(false)} onCreated={() => window.location.reload()} />
      )}
    </div>
  );
};

window.OrgAdminPanel = OrgAdminPanel;