// Freelancers Module

function Freelancers() {
  const [freelancers, setFreelancers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [selected, setSelected] = React.useState(null);
  const [addModal, setAddModal] = React.useState(false);
  const [editModal, setEditModal] = React.useState(false);
  const [delConfirm, setDelConfirm] = React.useState(false);
  const [payModal, setPayModal] = React.useState(false);
  const [saving, setSaving] = React.useState(false);
  const [savingPay, setSavingPay] = React.useState(false);
  const emptyForm = { name: '', role: '', city: '', phone: '', email: '', rate: '', skills: '', status: 'Disponível' };
  const [form, setForm] = React.useState(emptyForm);
  const [editForm, setEditForm] = React.useState(emptyForm);
  const emptyPay = { tipo: 'total', valor: '', metodo: 'PIX', descricao: '' };
  const [payForm, setPayForm] = React.useState(emptyPay);
  const [payments, setPayments] = React.useState([]);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  const handleCreate = async () => {
    if (!form.name.trim() || !form.role.trim()) {
      showToast('Preencha nome e especialidade.', 'danger'); return;
    }
    setSaving(true);
    const skills = form.skills.split(',').map(s => s.trim()).filter(Boolean);
    const { data, error } = await sb.from('freelancers').insert({
      name: form.name,
      role: form.role,
      city: form.city,
      phone: form.phone,
      email: form.email,
      rate: parseFloat(form.rate) || 0,
      skills,
      status: form.status,
      rating: 5.0,
      events_count: 0,
    }).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao adicionar freelancer.', 'danger'); return; }
    setFreelancers(prev => [...prev, data].sort((a, b) => a.name.localeCompare(b.name)));
    setAddModal(false);
    setForm(emptyForm);
    showToast(`${data.name} adicionado com sucesso!`);
  };

  const openEdit = (f) => {
    setEditForm({ name: f.name, role: f.role || '', city: f.city || '', phone: f.phone || '', email: f.email || '', rate: String(f.rate || ''), skills: (f.skills || []).join(', '), status: f.status || 'Disponível' });
    setEditModal(true);
  };

  const handleEditSave = async () => {
    if (!editForm.name.trim()) { showToast('Preencha o nome.', 'danger'); return; }
    setSaving(true);
    const skills = editForm.skills.split(',').map(s => s.trim()).filter(Boolean);
    const { data, error } = await sb.from('freelancers').update({
      name: editForm.name, role: editForm.role, city: editForm.city,
      phone: editForm.phone, email: editForm.email,
      rate: parseFloat(editForm.rate) || 0, skills, status: editForm.status,
    }).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao salvar.', 'danger'); return; }
    setFreelancers(prev => prev.map(f => f.id === data.id ? data : f).sort((a, b) => a.name.localeCompare(b.name)));
    setSelected(data);
    setEditModal(false);
    showToast('Freelancer atualizado!');
  };

  const handleDelete = async () => {
    const id = selected.id;
    const nome = selected.name;
    await sb.from('freelancers').delete().eq('id', id);
    setFreelancers(prev => prev.filter(f => f.id !== id));
    setDelConfirm(false);
    setSelected(null);
    showToast(`${nome} excluído.`);
  };

  React.useEffect(() => {
    sb.from('freelancers').select('*').order('name').then(({ data }) => {
      if (data) setFreelancers(data);
      setLoading(false);
    });
  }, []);

  React.useEffect(() => {
    setPayments(selected?.payments || []);
  }, [selected?.id]);

  React.useEffect(() => {
    if (payModal && payForm.tipo === 'total' && selected) {
      setPayForm(f => ({ ...f, valor: String(selected.rate || '') }));
    }
    if (payModal && payForm.tipo === 'parcial') {
      setPayForm(f => ({ ...f, valor: '' }));
    }
  }, [payForm.tipo, payModal]);

  const openPayModal = () => {
    setPayForm({ tipo: 'total', valor: String(selected?.rate || ''), metodo: 'PIX', descricao: '' });
    setPayModal(true);
  };

  const handlePayment = async () => {
    const valor = parseFloat(String(payForm.valor).replace(',', '.')) || 0;
    if (valor <= 0) { showToast('Informe um valor válido.', 'danger'); return; }
    setSavingPay(true);
    const novoPag = {
      id: Date.now(),
      data: new Date().toLocaleDateString('pt-BR'),
      valor,
      metodo: payForm.metodo,
      tipo: payForm.tipo,
      descricao: payForm.descricao,
    };
    const updated = [...payments, novoPag];
    const { error } = await sb.from('freelancers').update({ payments: updated }).eq('id', selected.id);
    setSavingPay(false);
    if (!error) {
      setPayments(updated);
      setFreelancers(prev => prev.map(f => f.id === selected.id ? { ...f, payments: updated } : f));
      setSelected(prev => ({ ...prev, payments: updated }));
    }
    setPayModal(false);
    setPayForm(emptyPay);
    showToast(`R$ ${valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })} registrado via ${novoPag.metodo}!`);
  };

  const statusColor = { 'Disponível': 'success', 'Escalado': 'primary', 'Indisponível': 'danger' };

  const StarRating = ({ rating }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
      <Icon name="star" size={13} color="#F59E0B" />
      <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{rating}</span>
    </div>
  );

  if (selected) {
    const f = selected;
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
          <Btn variant="ghost" size="sm" icon="arrow" onClick={() => setSelected(null)} style={{ transform: 'rotate(180deg)' }}></Btn>
          <h1 style={{ fontSize: 22, fontWeight: 700, color: DS.colors.text, margin: 0 }}>Perfil do Freelancer</h1>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 20 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card style={{ padding: 28 }}>
              <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                <Avatar name={f.name} size={72} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 22, fontWeight: 800, color: DS.colors.text }}>{f.name}</div>
                  <div style={{ fontSize: 14, color: DS.colors.textSec, margin: '4px 0 8px' }}>{f.role} · {f.city}</div>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                    <StarRating rating={f.rating} />
                    <Badge variant="default">{f.events_count} eventos</Badge>
                    <Badge variant={statusColor[f.status]}>{f.status}</Badge>
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                    {(f.skills || []).map(s => <Badge key={s} variant="default">{s}</Badge>)}
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
                  <Btn icon="mail" size="sm">Mensagem</Btn>
                  <Btn variant="secondary" icon="calendar" size="sm" onClick={() => showToast('Freelancer convidado!')}>Convidar</Btn>
                  <Btn variant="secondary" icon="edit" size="sm" onClick={() => openEdit(f)}>Editar</Btn>
                  <Btn variant="danger" icon="x" size="sm" onClick={() => setDelConfirm(true)}>Excluir</Btn>
                </div>
              </div>
              <Divider />
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                {[
                  { label: 'Cachê/diária', value: `R$ ${(f.rate || 0).toLocaleString('pt-BR')}` },
                  { label: 'E-mail', value: f.email },
                  { label: 'Telefone', value: f.phone },
                ].map(i => (
                  <div key={i.label}>
                    <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{i.label}</div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{i.value}</div>
                  </div>
                ))}
              </div>
            </Card>

            <Card style={{ padding: 24 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text, marginBottom: 16 }}>Histórico de eventos</div>
              <EmptyState icon="briefcase" title="Histórico em breve" desc="Integração com eventos em desenvolvimento" />
            </Card>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <Card style={{ padding: 20 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Próximos eventos</div>
              <div style={{ fontSize: 13, color: DS.colors.textMuted }}>Nenhum evento agendado</div>
            </Card>
            <Card style={{ padding: 20 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Pagamentos</div>
                {payments.length > 0 && (
                  <div style={{ fontSize: 13, fontWeight: 800, color: DS.colors.success }}>
                    R$ {payments.reduce((s, p) => s + p.valor, 0).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                  </div>
                )}
              </div>

              {/* Histórico */}
              {payments.length === 0 ? (
                <div style={{ fontSize: 12, color: DS.colors.textMuted, marginBottom: 12 }}>Nenhum pagamento registrado.</div>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12, maxHeight: 180, overflowY: 'auto' }}>
                  {[...payments].reverse().map(p => {
                    const metodoColor = { PIX: '#10B981', Cartão: '#3B82F6', Dinheiro: '#F59E0B' };
                    return (
                      <div key={p.id} style={{ padding: '8px 10px', background: '#F8FAFC', borderRadius: DS.radius.sm, borderLeft: `3px solid ${metodoColor[p.metodo] || DS.colors.primary}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                          <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.text }}>
                            R$ {p.valor.toLocaleString('pt-BR', { minimumFractionDigits: 2 })}
                            <span style={{ marginLeft: 6, fontSize: 10, fontWeight: 600, color: metodoColor[p.metodo], background: metodoColor[p.metodo] + '18', padding: '1px 6px', borderRadius: 8 }}>{p.metodo}</span>
                            {p.tipo === 'parcial' && <span style={{ marginLeft: 4, fontSize: 10, color: DS.colors.warning, fontWeight: 600 }}>Parcial</span>}
                          </div>
                          <div style={{ fontSize: 10, color: DS.colors.textMuted }}>{p.data}</div>
                        </div>
                        {p.descricao && <div style={{ fontSize: 11, color: DS.colors.textSec, marginTop: 2 }}>{p.descricao}</div>}
                      </div>
                    );
                  })}
                </div>
              )}

              <Btn style={{ width: '100%', justifyContent: 'center' }} icon="budget" size="sm" onClick={openPayModal}>Registrar pagamento</Btn>
            </Card>
          </div>
        </div>
        {/* Modal registrar pagamento */}
        <Modal open={payModal} onClose={() => { setPayModal(false); setPayForm(emptyPay); }} title="Registrar Pagamento" width={460}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

            {/* Info do freelancer */}
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '12px 14px', background: '#F8FAFC', borderRadius: DS.radius.md }}>
              <Avatar name={selected?.name} size={36} />
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{selected?.name}</div>
                <div style={{ fontSize: 11, color: DS.colors.textSec }}>Cachê: R$ {(selected?.rate || 0).toLocaleString('pt-BR')}</div>
              </div>
            </div>

            {/* Tipo: Total / Parcial */}
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec, marginBottom: 8 }}>Tipo de pagamento</div>
              <div style={{ display: 'flex', gap: 8 }}>
                {['total', 'parcial'].map(t => (
                  <button key={t} onClick={() => setPayForm(f => ({ ...f, tipo: t }))}
                    style={{ flex: 1, padding: '10px', borderRadius: DS.radius.sm, border: `2px solid ${payForm.tipo === t ? DS.colors.primary : DS.colors.border}`, background: payForm.tipo === t ? DS.colors.primaryLight : '#fff', color: payForm.tipo === t ? DS.colors.primary : DS.colors.textSec, fontSize: 13, fontWeight: 700, cursor: 'pointer', transition: 'all 0.15s', fontFamily: 'inherit' }}>
                    {t === 'total' ? '💰 Valor total' : '✂️ Parcial'}
                  </button>
                ))}
              </div>
              {payForm.tipo === 'parcial' && (
                <div style={{ marginTop: 6, fontSize: 11, color: DS.colors.textMuted }}>Informe o valor que será pago agora.</div>
              )}
            </div>

            {/* Valor */}
            <Input label={`Valor (R$)${payForm.tipo === 'total' ? ' — cachê completo' : ' — pagamento parcial'}`}
              value={payForm.valor}
              onChange={v => setPayForm(f => ({ ...f, valor: v }))}
              type="number"
              placeholder="Ex: 1800" />

            {/* Forma de pagamento */}
            <div>
              <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec, marginBottom: 8 }}>Forma de pagamento</div>
              <div style={{ display: 'flex', gap: 8 }}>
                {[
                  { id: 'PIX', emoji: '⚡', color: '#10B981' },
                  { id: 'Cartão', emoji: '💳', color: '#3B82F6' },
                  { id: 'Dinheiro', emoji: '💵', color: '#F59E0B' },
                ].map(m => (
                  <button key={m.id} onClick={() => setPayForm(f => ({ ...f, metodo: m.id }))}
                    style={{ flex: 1, padding: '10px 6px', borderRadius: DS.radius.sm, border: `2px solid ${payForm.metodo === m.id ? m.color : DS.colors.border}`, background: payForm.metodo === m.id ? m.color + '12' : '#fff', color: payForm.metodo === m.id ? m.color : DS.colors.textSec, fontSize: 12, fontWeight: 700, cursor: 'pointer', transition: 'all 0.15s', fontFamily: 'inherit', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
                    <span style={{ fontSize: 18 }}>{m.emoji}</span>
                    {m.id}
                  </button>
                ))}
              </div>
            </div>

            {/* Descrição */}
            <Input label="Descrição / referência (opcional)"
              value={payForm.descricao}
              onChange={v => setPayForm(f => ({ ...f, descricao: v }))}
              placeholder="Ex: Evento Congresso Tech — 28/04" />

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', paddingTop: 4 }}>
              <Btn variant="secondary" onClick={() => { setPayModal(false); setPayForm(emptyPay); }}>Cancelar</Btn>
              <Btn onClick={handlePayment} disabled={savingPay} icon="check">
                {savingPay ? 'Salvando…' : 'Confirmar pagamento'}
              </Btn>
            </div>
          </div>
        </Modal>

        {/* Modal editar */}
        <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar Freelancer" width={560}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Input label="Nome completo *" value={editForm.name} onChange={v => setEditForm(f => ({ ...f, name: v }))} />
              <Input label="Especialidade" value={editForm.role} onChange={v => setEditForm(f => ({ ...f, role: v }))} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Input label="E-mail" value={editForm.email} onChange={v => setEditForm(f => ({ ...f, email: v }))} />
              <Input label="Telefone" value={editForm.phone} onChange={v => setEditForm(f => ({ ...f, phone: v }))} />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Input label="Cidade" value={editForm.city} onChange={v => setEditForm(f => ({ ...f, city: v }))} />
              <Input label="Cachê/diária (R$)" value={editForm.rate} onChange={v => setEditForm(f => ({ ...f, rate: v }))} type="number" />
            </div>
            <Input label="Habilidades (separadas por vírgula)" value={editForm.skills} onChange={v => setEditForm(f => ({ ...f, skills: v }))} />
            <Select label="Disponibilidade" value={editForm.status} onChange={v => setEditForm(f => ({ ...f, status: v }))} options={[{ value: 'Disponível', label: 'Disponível' }, { value: 'Escalado', label: 'Escalado' }, { value: 'Indisponível', label: 'Indisponível' }]} />
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
              <Btn variant="secondary" onClick={() => setEditModal(false)}>Cancelar</Btn>
              <Btn onClick={handleEditSave} disabled={saving} icon="check">{saving ? 'Salvando…' : 'Salvar alterações'}</Btn>
            </div>
          </div>
        </Modal>

        {/* Confirmação exclusão */}
        <Modal open={delConfirm} onClose={() => setDelConfirm(false)} title="Excluir freelancer" width={400}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ fontSize: 14, color: DS.colors.textSec, lineHeight: 1.6 }}>Tem certeza que deseja excluir <strong style={{ color: DS.colors.text }}>{selected?.name}</strong>? Esta ação não pode ser desfeita.</p>
            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <Btn variant="secondary" onClick={() => setDelConfirm(false)}>Cancelar</Btn>
              <Btn variant="danger" icon="x" onClick={handleDelete}>Excluir</Btn>
            </div>
          </div>
        </Modal>

        {toast && <Toast message={toast.msg} onClose={() => setToast(null)} />}
      </div>
    );
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
        <div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: DS.colors.text, margin: 0, letterSpacing: '-0.02em' }}>Freelancers</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>Gerencie sua rede de profissionais parceiros</p>
        </div>
        <Btn icon="plus" onClick={() => setAddModal(true)}>Adicionar freelancer</Btn>
      </div>

      {loading ? <Spinner /> : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {freelancers.length === 0 ? (
            <EmptyState icon="users" title="Nenhum freelancer cadastrado" />
          ) : freelancers.map(f => (
            <Card key={f.id} hover onClick={() => setSelected(f)} style={{ padding: 20 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <Avatar name={f.name} size={44} />
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text }}>{f.name}</div>
                    <div style={{ fontSize: 12, color: DS.colors.textSec }}>{f.role}</div>
                  </div>
                </div>
                <Badge variant={statusColor[f.status]}>{f.status}</Badge>
              </div>
              <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
                <div style={{ flex: 1, textAlign: 'center', padding: '8px', background: '#F8FAFC', borderRadius: DS.radius.sm }}>
                  <div style={{ fontSize: 16, fontWeight: 800, color: DS.colors.text }}>{f.rating}</div>
                  <div style={{ fontSize: 10, color: DS.colors.textMuted }}>Avaliação</div>
                </div>
                <div style={{ flex: 1, textAlign: 'center', padding: '8px', background: '#F8FAFC', borderRadius: DS.radius.sm }}>
                  <div style={{ fontSize: 16, fontWeight: 800, color: DS.colors.text }}>{f.events_count}</div>
                  <div style={{ fontSize: 10, color: DS.colors.textMuted }}>Eventos</div>
                </div>
                <div style={{ flex: 1, textAlign: 'center', padding: '8px', background: '#F8FAFC', borderRadius: DS.radius.sm }}>
                  <div style={{ fontSize: 13, fontWeight: 800, color: DS.colors.text }}>R${f.rate >= 1000 ? (f.rate / 1000).toFixed(1) + 'k' : f.rate}</div>
                  <div style={{ fontSize: 10, color: DS.colors.textMuted }}>Cachê</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                {(f.skills || []).slice(0, 3).map(s => <Badge key={s} variant="default" size="sm">{s}</Badge>)}
              </div>
            </Card>
          ))}
        </div>
      )}
      <Modal open={addModal} onClose={() => { setAddModal(false); setForm(emptyForm); }} title="Adicionar Freelancer" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Nome completo *" value={form.name} onChange={v => setForm(f => ({ ...f, name: v }))} placeholder="Ex: Carlos Melo" />
            <Input label="Especialidade *" value={form.role} onChange={v => setForm(f => ({ ...f, role: v }))} placeholder="Ex: DJ / Sonorização" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="E-mail" value={form.email} onChange={v => setForm(f => ({ ...f, email: v }))} placeholder="Ex: carlos@email.com" />
            <Input label="Telefone" value={form.phone} onChange={v => setForm(f => ({ ...f, phone: v }))} placeholder="Ex: (11) 99999-0000" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Cidade" value={form.city} onChange={v => setForm(f => ({ ...f, city: v }))} placeholder="Ex: São Paulo, SP" />
            <Input label="Cachê/diária (R$)" value={form.rate} onChange={v => setForm(f => ({ ...f, rate: v }))} placeholder="Ex: 1800" type="number" />
          </div>
          <Input label="Habilidades (separadas por vírgula)" value={form.skills} onChange={v => setForm(f => ({ ...f, skills: v }))} placeholder="Ex: DJ, Sonorização, Iluminação" />
          <Select label="Disponibilidade" value={form.status} onChange={v => setForm(f => ({ ...f, status: v }))} options={[
            { value: 'Disponível',   label: 'Disponível' },
            { value: 'Escalado',     label: 'Escalado' },
            { value: 'Indisponível', label: 'Indisponível' },
          ]} />
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
            <Btn variant="secondary" onClick={() => { setAddModal(false); setForm(emptyForm); }}>Cancelar</Btn>
            <Btn onClick={handleCreate} disabled={saving} icon="users">{saving ? 'Salvando…' : 'Adicionar freelancer'}</Btn>
          </div>
        </div>
      </Modal>

      {toast && <Toast message={toast.msg} type={toast.type} onClose={() => setToast(null)} />}
    </div>
  );
}

Object.assign(window, { Freelancers });