// Fornecedores Module

function Fornecedores() {
  const [fornecedores, setFornecedores] = 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 [saving, setSaving] = React.useState(false);
  const [note, setNote] = React.useState('');
  const [detailNotes, setDetailNotes] = React.useState([]);
  const [toast, setToast] = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  const emptyForm = { nome: '', contato: '', email: '', telefone: '', cidade: '', categoria: 'Audiovisual', website: '', status: 'Ativo' };
  const [form, setForm] = React.useState(emptyForm);
  const [editForm, setEditForm] = React.useState(emptyForm);

  const CATEGORIAS = [
    { value: 'Audiovisual', label: 'Audiovisual' },
    { value: 'Alimentação', label: 'Alimentação' },
    { value: 'Decoração', label: 'Decoração' },
    { value: 'Segurança', label: 'Segurança' },
    { value: 'Transporte', label: 'Transporte' },
    { value: 'Limpeza', label: 'Limpeza' },
    { value: 'Tecnologia', label: 'Tecnologia' },
    { value: 'Gráfica', label: 'Gráfica' },
    { value: 'Brindes', label: 'Brindes' },
    { value: 'Fotografia', label: 'Fotografia' },
    { value: 'Outro', label: 'Outro' },
  ];

  const catColor = { 'Audiovisual': 'primary', 'Alimentação': 'success', 'Decoração': 'purple', 'Segurança': 'danger', 'Transporte': 'warning', 'Limpeza': 'default', 'Tecnologia': 'primary', 'Gráfica': 'default', 'Brindes': 'warning', 'Fotografia': 'default', 'Outro': 'default' };
  const statusColor = { 'Ativo': 'success', 'Inativo': 'default' };

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

  const openFornecedor = (f) => {
    setSelected(f);
    setDetailNotes(f.notas || []);
    setNote('');
  };

  const saveNote = async () => {
    if (!note.trim() || !selected) return;
    const updated = [...detailNotes, note];
    setDetailNotes(updated);
    setNote('');
    await sb.from('fornecedores').update({ notas: updated }).eq('id', selected.id);
    setFornecedores(prev => prev.map(f => f.id === selected.id ? { ...f, notas: updated } : f));
    showToast('Anotação salva!');
  };

  const openEdit = () => {
    setEditForm({ nome: selected.nome || '', contato: selected.contato || '', email: selected.email || '', telefone: selected.telefone || '', cidade: selected.cidade || '', categoria: selected.categoria || 'Audiovisual', website: selected.website || '', status: selected.status || 'Ativo' });
    setEditModal(true);
  };

  const handleCreate = async () => {
    if (!form.nome.trim()) { showToast('Preencha o nome do fornecedor.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('fornecedores').insert({
      nome: form.nome, contato: form.contato, email: form.email,
      telefone: form.telefone, cidade: form.cidade, categoria: form.categoria,
      website: form.website, status: form.status, notas: [],
    }).select().single();
    setSaving(false);
    if (error) {
      console.error('[Fornecedores.handleCreate] Supabase error:', error);
      showToast('Erro ao adicionar fornecedor: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setFornecedores(prev => [...prev, data].sort((a, b) => a.nome.localeCompare(b.nome)));
    setAddModal(false);
    setForm(emptyForm);
    showToast(`${data.nome} adicionado com sucesso!`);
  };

  const handleEditSave = async () => {
    if (!editForm.nome.trim()) { showToast('Preencha o nome.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('fornecedores').update({
      nome: editForm.nome, contato: editForm.contato, email: editForm.email,
      telefone: editForm.telefone, cidade: editForm.cidade, categoria: editForm.categoria,
      website: editForm.website, status: editForm.status,
    }).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao salvar.', 'danger'); return; }
    setFornecedores(prev => prev.map(f => f.id === data.id ? data : f).sort((a, b) => a.nome.localeCompare(b.nome)));
    setSelected(data);
    setEditModal(false);
    showToast('Fornecedor atualizado!');
  };

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

  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' }}>Fornecedores</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>Gerencie seus parceiros e prestadores de serviço</p>
        </div>
        <Btn icon="plus" onClick={() => setAddModal(true)}>Novo fornecedor</Btn>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
        {[
          { label: 'Total de fornecedores', value: fornecedores.length, color: DS.colors.primary },
          { label: 'Ativos', value: fornecedores.filter(f => f.status === 'Ativo').length, color: DS.colors.success },
          { label: 'Categorias', value: new Set(fornecedores.map(f => f.categoria)).size, color: DS.colors.warning },
        ].map(s => (
          <Card key={s.label} style={{ padding: '14px 18px' }}>
            <div style={{ fontSize: 11, color: DS.colors.textMuted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.label}</div>
            <div style={{ fontSize: 22, fontWeight: 800, color: s.color, marginTop: 4 }}>{s.value}</div>
          </Card>
        ))}
      </div>

      {/* Table */}
      <Card>
        {loading ? <Spinner /> : (
          <>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 1fr 0.8fr 0.8fr', padding: '10px 24px', borderBottom: `1px solid ${DS.colors.border}`, fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              <span>Fornecedor</span><span>Contato</span><span>Categoria</span><span>Cidade</span><span>Status</span><span style={{ textAlign: 'right' }}>Ações</span>
            </div>
            {fornecedores.length === 0
              ? <EmptyState icon="briefcase" title="Nenhum fornecedor cadastrado" />
              : fornecedores.map((f, i) => (
                <div key={f.id}
                  style={{ display: 'grid', gridTemplateColumns: '2fr 1.2fr 1fr 1fr 0.8fr 0.8fr', padding: '14px 24px', borderBottom: i < fornecedores.length - 1 ? `1px solid ${DS.colors.border}` : 'none', alignItems: 'center', cursor: 'pointer', transition: 'background 0.1s' }}
                  onClick={() => openFornecedor(f)}
                  onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                  onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Avatar name={f.nome} size={32} />
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text }}>{f.nome}</div>
                      {f.website && <div style={{ fontSize: 11, color: DS.colors.textMuted }}>{f.website}</div>}
                    </div>
                  </div>
                  <span style={{ fontSize: 13, color: DS.colors.textSec }}>{f.contato || '—'}</span>
                  <span><Badge variant={catColor[f.categoria] || 'default'}>{f.categoria}</Badge></span>
                  <span style={{ fontSize: 13, color: DS.colors.textSec }}>{f.cidade || '—'}</span>
                  <span><Badge variant={statusColor[f.status] || 'default'}>{f.status}</Badge></span>
                  <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                    <Btn variant="ghost" size="sm" icon="mail" onClick={e => { e.stopPropagation(); f.email ? window.open(`mailto:${f.email}`) : showToast('E-mail não cadastrado.', 'danger'); }} />
                    <Btn variant="ghost" size="sm" icon="phone" onClick={e => { e.stopPropagation(); f.telefone ? window.open(`tel:${f.telefone.replace(/\D/g, '')}`) : showToast('Telefone não cadastrado.', 'danger'); }} />
                  </div>
                </div>
              ))
            }
          </>
        )}
      </Card>

      {/* Popup detalhe */}
      <Modal open={!!selected} onClose={() => setSelected(null)} title={selected?.nome || ''} width={700}
        extra={selected && (
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn variant="secondary" size="sm" icon="edit" onClick={openEdit}>Editar</Btn>
            <Btn variant="danger" size="sm" icon="x" onClick={() => setDelConfirm(true)}>Excluir</Btn>
          </div>
        )}>
        {selected && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 260px', gap: 20 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Notas */}
              <div style={{ padding: '18px 20px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, marginBottom: 12 }}>Anotações</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
                  {detailNotes.length === 0
                    ? <div style={{ fontSize: 12, color: DS.colors.textMuted }}>Nenhuma anotação ainda.</div>
                    : detailNotes.map((n, i) => (
                      <div key={i} style={{ display: 'flex', gap: 8, padding: '8px 12px', background: '#FFFBEB', borderRadius: DS.radius.sm, borderLeft: `3px solid ${DS.colors.warning}` }}>
                        <Icon name="edit" size={12} color={DS.colors.warning} />
                        <span style={{ fontSize: 12, color: DS.colors.text }}>{n}</span>
                      </div>
                    ))
                  }
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input value={note} onChange={e => setNote(e.target.value)}
                    onKeyDown={e => { if (e.key === 'Enter') saveNote(); }}
                    placeholder="Adicionar anotação..."
                    style={{ flex: 1, border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '7px 11px', fontSize: 13, outline: 'none', fontFamily: 'inherit' }}
                    onFocus={e => e.target.style.borderColor = DS.colors.primary}
                    onBlur={e => e.target.style.borderColor = DS.colors.border}
                  />
                  <Btn size="sm" onClick={saveNote}>Salvar</Btn>
                </div>
              </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '20px 16px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}`, gap: 10 }}>
                <Avatar name={selected.nome} size={56} />
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontSize: 14, fontWeight: 700, color: DS.colors.text }}>{selected.nome}</div>
                  <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 2 }}>{selected.contato || ''}</div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <Badge variant={catColor[selected.categoria] || 'default'}>{selected.categoria}</Badge>
                  <Badge variant={statusColor[selected.status] || 'default'}>{selected.status}</Badge>
                </div>
                <div style={{ display: 'flex', gap: 6, width: '100%' }}>
                  <Btn variant="secondary" size="sm" icon="mail" style={{ flex: 1, justifyContent: 'center' }}
                    onClick={() => selected.email ? window.open(`mailto:${selected.email}`) : showToast('E-mail não cadastrado.', 'danger')}>E-mail</Btn>
                  <Btn variant="secondary" size="sm" icon="phone" style={{ flex: 1, justifyContent: 'center' }}
                    onClick={() => selected.telefone ? window.open(`tel:${selected.telefone.replace(/\D/g, '')}`) : showToast('Telefone não cadastrado.', 'danger')}>Ligar</Btn>
                </div>
              </div>

              <div style={{ padding: '16px', background: '#F8FAFC', borderRadius: DS.radius.md, border: `1px solid ${DS.colors.border}` }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Contato</div>
                {[
                  { icon: 'mail',  label: selected.email || '—' },
                  { icon: 'phone', label: selected.telefone || '—' },
                  { icon: 'map',   label: selected.cidade || '—' },
                  ...(selected.website ? [{ icon: 'grid', label: selected.website }] : []),
                ].map(r => (
                  <div key={r.icon + r.label} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderBottom: `1px solid ${DS.colors.border}`, fontSize: 12 }}>
                    <Icon name={r.icon} size={13} color={DS.colors.textMuted} />
                    <span style={{ color: DS.colors.text }}>{r.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </Modal>

      {/* Modal editar */}
      <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar Fornecedor" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome *" value={editForm.nome} onChange={v => setEditForm(f => ({ ...f, nome: v }))} placeholder="Ex: Som & Luz Produções" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Pessoa de contato" value={editForm.contato} onChange={v => setEditForm(f => ({ ...f, contato: v }))} placeholder="Ex: Roberto Lima" />
            <Input label="Cidade" value={editForm.cidade} onChange={v => setEditForm(f => ({ ...f, cidade: v }))} placeholder="Ex: Fortaleza" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="E-mail" value={editForm.email} onChange={v => setEditForm(f => ({ ...f, email: v }))} placeholder="Ex: contato@empresa.com" />
            <Input label="Telefone" value={editForm.telefone} onChange={v => setEditForm(f => ({ ...f, telefone: v }))} placeholder="Ex: (85) 99999-0000" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Select label="Categoria" value={editForm.categoria} onChange={v => setEditForm(f => ({ ...f, categoria: v }))} options={CATEGORIAS} />
            <Select label="Status" value={editForm.status} onChange={v => setEditForm(f => ({ ...f, status: v }))} options={[{ value: 'Ativo', label: 'Ativo' }, { value: 'Inativo', label: 'Inativo' }]} />
          </div>
          <Input label="Website" value={editForm.website} onChange={v => setEditForm(f => ({ ...f, website: v }))} placeholder="Ex: www.empresa.com.br" />
          <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>

      {/* Modal exclusão */}
      <Modal open={delConfirm} onClose={() => setDelConfirm(false)} title="Excluir fornecedor" 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?.nome}</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>

      {/* Modal novo */}
      <Modal open={addModal} onClose={() => { setAddModal(false); setForm(emptyForm); }} title="Novo Fornecedor" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome *" value={form.nome} onChange={v => setForm(f => ({ ...f, nome: v }))} placeholder="Ex: Som & Luz Produções" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Pessoa de contato" value={form.contato} onChange={v => setForm(f => ({ ...f, contato: v }))} placeholder="Ex: Roberto Lima" />
            <Input label="Cidade" value={form.cidade} onChange={v => setForm(f => ({ ...f, cidade: v }))} placeholder="Ex: Fortaleza" />
          </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: contato@empresa.com" />
            <Input label="Telefone" value={form.telefone} onChange={v => setForm(f => ({ ...f, telefone: v }))} placeholder="Ex: (85) 99999-0000" />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Select label="Categoria" value={form.categoria} onChange={v => setForm(f => ({ ...f, categoria: v }))} options={CATEGORIAS} />
            <Select label="Status" value={form.status} onChange={v => setForm(f => ({ ...f, status: v }))} options={[{ value: 'Ativo', label: 'Ativo' }, { value: 'Inativo', label: 'Inativo' }]} />
          </div>
          <Input label="Website" value={form.website} onChange={v => setForm(f => ({ ...f, website: v }))} placeholder="Ex: www.empresa.com.br" />
          <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="briefcase">{saving ? 'Salvando…' : 'Adicionar fornecedor'}</Btn>
          </div>
        </div>
      </Modal>

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

Object.assign(window, { Fornecedores });