// Serviços Module — Catálogo de serviços oferecidos

function Servicos() {
  const [servicos, setServicos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [addModal, setAddModal] = React.useState(false);
  const [editModal, setEditModal] = React.useState(false);
  const [delConfirm, setDelConfirm] = React.useState(false);
  const [selected, setSelected] = React.useState(null);
  const [saving, setSaving] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const [search, setSearch] = React.useState('');
  const [catFilter, setCatFilter] = React.useState('all');
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  const emptyForm = { nome: '', categoria: 'Promotoria', descricao: '', preco: '', unidade: 'diária', status: 'Ativo' };
  const [form, setForm] = React.useState(emptyForm);
  const [editForm, setEditForm] = React.useState(emptyForm);

  const CATEGORIAS = [
    { value: 'Promotoria', label: 'Promotoria' },
    { value: 'Recepção', label: 'Recepção' },
    { value: 'Sampling', label: 'Sampling' },
    { value: 'Panfletagem', label: 'Panfletagem' },
    { value: 'DJ/Música', label: 'DJ/Música' },
    { value: 'Decoração', label: 'Decoração' },
    { value: 'Foto/Vídeo', label: 'Foto/Vídeo' },
    { value: 'Segurança', label: 'Segurança' },
    { value: 'Transporte', label: 'Transporte' },
    { value: 'Audiovisual', label: 'Audiovisual' },
    { value: 'Limpeza', label: 'Limpeza' },
    { value: 'Outro', label: 'Outro' },
  ];

  const UNIDADES = [
    { value: 'hora', label: 'Hora' },
    { value: 'diária', label: 'Diária' },
    { value: 'evento', label: 'Por evento' },
    { value: 'unidade', label: 'Unidade' },
    { value: 'pessoa', label: 'Por pessoa' },
  ];

  const catColor = { 'Promotoria': 'primary', 'Recepção': 'success', 'Sampling': 'warning', 'Panfletagem': 'default', 'DJ/Música': 'purple', 'Decoração': 'primary', 'Foto/Vídeo': 'default', 'Segurança': 'danger', 'Transporte': 'warning', 'Audiovisual': 'primary', 'Limpeza': 'default', 'Outro': 'default' };

  const fmtCurrency = v => 'R$ ' + (parseFloat(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

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

  const handleCreate = async () => {
    if (!form.nome.trim()) { showToast('Preencha o nome do serviço.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('servicos').insert({
      nome: form.nome, categoria: form.categoria, descricao: form.descricao,
      preco: parseFloat(form.preco) || 0, unidade: form.unidade, status: form.status,
    }).select().single();
    setSaving(false);
    if (error) {
      console.error('[Servicos.handleCreate] Supabase error:', error);
      showToast('Erro ao adicionar serviço: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setServicos(prev => [...prev, data].sort((a, b) => a.nome.localeCompare(b.nome)));
    setAddModal(false);
    setForm(emptyForm);
    showToast(`Serviço "${data.nome}" adicionado!`);
  };

  const openEdit = (s) => {
    setSelected(s);
    setEditForm({ nome: s.nome || '', categoria: s.categoria || 'Promotoria', descricao: s.descricao || '', preco: String(s.preco || ''), unidade: s.unidade || 'diária', status: s.status || 'Ativo' });
    setEditModal(true);
  };

  const handleEditSave = async () => {
    if (!editForm.nome.trim()) { showToast('Preencha o nome.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('servicos').update({
      nome: editForm.nome, categoria: editForm.categoria, descricao: editForm.descricao,
      preco: parseFloat(editForm.preco) || 0, unidade: editForm.unidade, status: editForm.status,
    }).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) { showToast('Erro ao salvar.', 'danger'); return; }
    setServicos(prev => prev.map(s => s.id === data.id ? data : s).sort((a, b) => a.nome.localeCompare(b.nome)));
    setEditModal(false);
    setSelected(null);
    showToast('Serviço atualizado!');
  };

  const handleDelete = async () => {
    await sb.from('servicos').delete().eq('id', selected.id);
    setServicos(prev => prev.filter(s => s.id !== selected.id));
    setDelConfirm(false);
    setSelected(null);
    showToast('Serviço excluído.');
  };

  const totalAtivos = servicos.filter(s => s.status === 'Ativo').length;

  // Filtros: busca + categoria
  const filteredServicos = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    return servicos.filter(s => {
      if (catFilter !== 'all' && s.categoria !== catFilter) return false;
      if (!q) return true;
      return (
        (s.nome || '').toLowerCase().includes(q) ||
        (s.descricao || '').toLowerCase().includes(q) ||
        (s.categoria || '').toLowerCase().includes(q)
      );
    });
  }, [servicos, search, catFilter]);
  const precoMedio = servicos.length > 0 ? servicos.reduce((sum, s) => sum + (parseFloat(s.preco) || 0), 0) / servicos.length : 0;

  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' }}>Catálogo de Serviços</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, margin: '4px 0 0' }}>Gerencie os serviços oferecidos pela Promoup</p>
        </div>
        <Btn icon="plus" onClick={() => setAddModal(true)}>Novo serviço</Btn>
      </div>

      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 24 }}>
        {[
          { label: 'Serviços ativos', value: totalAtivos, color: DS.colors.primary },
          { label: 'Total de serviços', value: servicos.length, color: DS.colors.success },
          { label: 'Preço médio', value: fmtCurrency(precoMedio), 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>

      {/* Busca + filtros */}
      <div style={{ display: 'flex', gap: 12, marginBottom: 16, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ position: 'relative', flex: 1, minWidth: 280 }}>
          <input
            value={search}
            onChange={e => setSearch(e.target.value)}
            placeholder="Buscar por nome, descrição ou categoria..."
            autoFocus={false}
            style={{
              width: '100%', boxSizing: 'border-box',
              border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm,
              padding: '10px 14px 10px 38px', fontSize: 13, outline: 'none',
              background: '#fff', fontFamily: 'inherit',
            }}
          />
          <div style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)' }}>
            <Icon name="search" size={15} color={DS.colors.textMuted} />
          </div>
        </div>
        <select
          value={catFilter}
          onChange={e => setCatFilter(e.target.value)}
          style={{
            padding: '10px 14px', fontSize: 13, border: `1px solid ${DS.colors.border}`,
            borderRadius: DS.radius.sm, outline: 'none', background: '#fff',
            color: DS.colors.text, fontFamily: 'inherit', cursor: 'pointer',
          }}
        >
          <option value="all">Todas categorias</option>
          {CATEGORIAS.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
        </select>
        <div style={{ fontSize: 12, color: DS.colors.textMuted, whiteSpace: 'nowrap' }}>
          <strong style={{ color: DS.colors.text }}>{filteredServicos.length}</strong> de {servicos.length}
        </div>
      </div>

      {/* Grid de serviços */}
      {loading ? <Spinner /> : (
        filteredServicos.length === 0
          ? <EmptyState icon="briefcase" title={search || catFilter !== 'all' ? 'Nenhum serviço encontrado' : 'Nenhum serviço cadastrado'} desc={search || catFilter !== 'all' ? 'Tente ajustar a busca ou o filtro' : "Clique em 'Novo serviço' para começar"} />
          : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
              {filteredServicos.map(s => (
                <Card key={s.id} hover style={{ padding: 20 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                    <Badge variant={catColor[s.categoria] || 'default'}>{s.categoria}</Badge>
                    <Badge variant={s.status === 'Ativo' ? 'success' : 'default'}>{s.status}</Badge>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: DS.colors.text, marginBottom: 6 }}>{s.nome}</div>
                  {s.descricao && <div style={{ fontSize: 12, color: DS.colors.textSec, marginBottom: 12, lineHeight: 1.5 }}>{s.descricao}</div>}
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, borderTop: `1px solid ${DS.colors.border}` }}>
                    <div>
                      <div style={{ fontSize: 18, fontWeight: 800, color: DS.colors.primary }}>{fmtCurrency(s.preco)}</div>
                      <div style={{ fontSize: 11, color: DS.colors.textMuted }}>por {s.unidade}</div>
                    </div>
                    <div style={{ display: 'flex', gap: 6 }}>
                      <Btn variant="secondary" size="sm" icon="edit" onClick={() => openEdit(s)} />
                      <Btn variant="danger" size="sm" icon="x" onClick={() => { setSelected(s); setDelConfirm(true); }} />
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          )
      )}

      {/* Modal novo */}
      <Modal open={addModal} onClose={() => { setAddModal(false); setForm(emptyForm); }} title="Novo Serviço" width={540}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome do serviço *" value={form.nome} onChange={v => setForm(f => ({ ...f, nome: v }))} placeholder="Ex: Promotora PDV" />
          <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>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Preço (R$)" type="number" value={form.preco} onChange={v => setForm(f => ({ ...f, preco: v }))} placeholder="Ex: 350" />
            <Select label="Unidade" value={form.unidade} onChange={v => setForm(f => ({ ...f, unidade: v }))} options={UNIDADES} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec, marginBottom: 4 }}>Descrição (opcional)</div>
            <textarea value={form.descricao} onChange={e => setForm(f => ({ ...f, descricao: e.target.value }))}
              placeholder="Descreva o serviço..." rows={3}
              style={{ width: '100%', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '8px 10px', fontSize: 13, outline: 'none', fontFamily: 'inherit', resize: 'vertical', color: DS.colors.text }}
              onFocus={e => e.target.style.borderColor = DS.colors.primary}
              onBlur={e => e.target.style.borderColor = DS.colors.border}
            />
          </div>
          <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="grid">{saving ? 'Salvando…' : 'Adicionar serviço'}</Btn>
          </div>
        </div>
      </Modal>

      {/* Modal editar */}
      <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar Serviço" width={540}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Input label="Nome do serviço *" value={editForm.nome} onChange={v => setEditForm(f => ({ ...f, nome: v }))} />
          <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>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <Input label="Preço (R$)" type="number" value={editForm.preco} onChange={v => setEditForm(f => ({ ...f, preco: v }))} />
            <Select label="Unidade" value={editForm.unidade} onChange={v => setEditForm(f => ({ ...f, unidade: v }))} options={UNIDADES} />
          </div>
          <div>
            <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec, marginBottom: 4 }}>Descrição (opcional)</div>
            <textarea value={editForm.descricao} onChange={e => setEditForm(f => ({ ...f, descricao: e.target.value }))} rows={3}
              style={{ width: '100%', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '8px 10px', fontSize: 13, outline: 'none', fontFamily: 'inherit', resize: 'vertical', color: DS.colors.text }}
              onFocus={e => e.target.style.borderColor = DS.colors.primary}
              onBlur={e => e.target.style.borderColor = DS.colors.border}
            />
          </div>
          <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 serviço" 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>

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

Object.assign(window, { Servicos });