// Estoque Simplificado — cadastro de materiais, reserva por evento,
// retirada e devolucao com status. Orcamento 290.
//
// O saldo NUNCA e gravado: e sempre derivado de material_reservas, para nao
// dessincronizar. Ver calcSaldo() abaixo.

const ESTOQUE_CATEGORIAS = [
  { value: 'Estrutura',   label: 'Estrutura' },
  { value: 'Uniforme',    label: 'Uniforme' },
  { value: 'Comunicação', label: 'Comunicação' },
  { value: 'Brindes',     label: 'Brindes' },
  { value: 'Equipamento', label: 'Equipamento' },
  { value: 'Outros',      label: 'Outros' },
];

const SITUACAO_VARIANT = { 'Reservado': 'warning', 'Em campo': 'primary', 'Devolvido': 'success' };
const CONDICAO_VARIANT = { 'Correto': 'success', 'Danificado': 'danger', 'Faltando': 'warning' };

// Saldo de um material a partir das reservas dele.
function calcSaldo(material, reservas) {
  const doMaterial = reservas.filter(r => r.material_id === material.id);
  const reservado = doMaterial
    .filter(r => r.situacao === 'Reservado')
    .reduce((s, r) => s + (r.quantidade || 0), 0);
  const emCampo = doMaterial
    .filter(r => r.situacao === 'Em campo')
    .reduce((s, r) => s + (r.retirado_qtd || 0), 0);
  const total = material.quantidade_total || 0;
  return { total, reservado, emCampo, livre: total - reservado - emCampo };
}

const fmtDataHora = (iso) => iso
  ? new Date(iso).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
  : '—';

// Upload da foto do material no bucket que ja existe (migration 003/009).
async function uploadFotoMaterial(file) {
  const ext = (file.name.split('.').pop() || 'jpg').toLowerCase();
  const path = `materiais/${crypto.randomUUID()}.${ext}`;
  const { error } = await sb.storage.from('event-photos').upload(path, file, { contentType: file.type });
  if (error) throw error;
  const { data: { publicUrl } } = sb.storage.from('event-photos').getPublicUrl(path);
  return publicUrl;
}

function Estoque({ currentUser }) {
  const [materiais, setMateriais] = React.useState([]);
  const [reservas, setReservas]   = 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 [uploading, setUploading] = React.useState(false);
  const [search, setSearch]       = React.useState('');
  const [catFilter, setCatFilter] = React.useState('all');
  const [toast, setToast]         = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  const emptyForm = { nome: '', categoria: 'Outros', quantidade_total: '1', status: 'Ativo', foto_url: '', observacoes: '' };
  const [form, setForm] = React.useState(emptyForm);
  const [editForm, setEditForm] = React.useState(emptyForm);

  const carregar = React.useCallback(async () => {
    const [{ data: mats }, { data: res }] = await Promise.all([
      sb.from('materiais').select('*').order('nome'),
      sb.from('material_reservas').select('*, events(name)').order('created_at', { ascending: false }),
    ]);
    setMateriais(mats || []);
    setReservas(res || []);
    setLoading(false);
  }, []);

  React.useEffect(() => { carregar(); }, [carregar]);

  const handleCreate = async () => {
    if (!form.nome.trim()) { showToast('Preencha o nome do material.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('materiais').insert({
      nome: form.nome.trim(),
      categoria: form.categoria,
      quantidade_total: parseInt(form.quantidade_total, 10) || 0,
      status: form.status,
      foto_url: form.foto_url || null,
      observacoes: form.observacoes || null,
    }).select().single();
    setSaving(false);
    if (error) {
      console.error('[Estoque.handleCreate] Supabase error:', error);
      showToast('Erro ao adicionar material: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setMateriais(prev => [...prev, data].sort((a, b) => a.nome.localeCompare(b.nome)));
    setAddModal(false);
    setForm(emptyForm);
    showToast(`${data.nome} adicionado ao estoque!`);
  };

  const openEdit = () => {
    setEditForm({
      nome: selected.nome || '',
      categoria: selected.categoria || 'Outros',
      quantidade_total: String(selected.quantidade_total ?? 0),
      status: selected.status || 'Ativo',
      foto_url: selected.foto_url || '',
      observacoes: selected.observacoes || '',
    });
    setEditModal(true);
  };

  const handleEditSave = async () => {
    if (!editForm.nome.trim()) { showToast('Preencha o nome.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('materiais').update({
      nome: editForm.nome.trim(),
      categoria: editForm.categoria,
      quantidade_total: parseInt(editForm.quantidade_total, 10) || 0,
      status: editForm.status,
      foto_url: editForm.foto_url || null,
      observacoes: editForm.observacoes || null,
    }).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) {
      console.error('[Estoque.handleEditSave] Supabase error:', error);
      showToast('Erro ao salvar.', 'danger');
      return;
    }
    setMateriais(prev => prev.map(m => m.id === data.id ? data : m).sort((a, b) => a.nome.localeCompare(b.nome)));
    setSelected(data);
    setEditModal(false);
    showToast('Material atualizado!');
  };

  const handleDelete = async () => {
    const { id, nome } = selected;
    const { error } = await sb.from('materiais').delete().eq('id', id);
    if (error) {
      console.error('[Estoque.handleDelete] Supabase error:', error);
      showToast('Erro ao excluir.', 'danger');
      return;
    }
    setMateriais(prev => prev.filter(m => m.id !== id));
    setReservas(prev => prev.filter(r => r.material_id !== id));
    setDelConfirm(false);
    setSelected(null);
    showToast(`${nome} excluído.`);
  };

  const handleFoto = async (file, setter) => {
    if (!file) return;
    setUploading(true);
    try {
      const url = await uploadFotoMaterial(file);
      setter(f => ({ ...f, foto_url: url }));
      showToast('Foto enviada!');
    } catch (err) {
      console.error('[Estoque.handleFoto] Storage error:', err);
      showToast('Erro ao enviar a foto.', 'danger');
    }
    setUploading(false);
  };

  const filtrados = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    return materiais.filter(m => {
      if (catFilter !== 'all' && m.categoria !== catFilter) return false;
      if (!q) return true;
      return (m.nome || '').toLowerCase().includes(q) || (m.categoria || '').toLowerCase().includes(q);
    });
  }, [materiais, search, catFilter]);

  const totais = React.useMemo(() => {
    return materiais.reduce((acc, m) => {
      const s = calcSaldo(m, reservas);
      return { livre: acc.livre + s.livre, reservado: acc.reservado + s.reservado, emCampo: acc.emCampo + s.emCampo };
    }, { livre: 0, reservado: 0, emCampo: 0 });
  }, [materiais, reservas]);

  const historico = React.useMemo(
    () => selected ? reservas.filter(r => r.material_id === selected.id) : [],
    [selected, reservas]
  );

  const saldoSel = selected ? calcSaldo(selected, reservas) : null;

  const camposForm = (f, setF) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Input label="Nome *" value={f.nome} onChange={v => setF(x => ({ ...x, nome: v }))} placeholder="Ex: Wind Banner" />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <Select label="Categoria" value={f.categoria} onChange={v => setF(x => ({ ...x, categoria: v }))} options={ESTOQUE_CATEGORIAS} />
        <Input label="Quantidade total" type="number" value={f.quantidade_total} onChange={v => setF(x => ({ ...x, quantidade_total: v }))} placeholder="Ex: 10" />
      </div>
      <Select label="Status" value={f.status} onChange={v => setF(x => ({ ...x, status: v }))}
        options={[{ value: 'Ativo', label: 'Ativo' }, { value: 'Inativo', label: 'Inativo' }]} />
      <div>
        <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec, marginBottom: 6 }}>Foto (opcional)</div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          {f.foto_url
            ? <img src={f.foto_url} alt="" style={{ width: 48, height: 48, objectFit: 'cover', borderRadius: DS.radius.sm, border: `1px solid ${DS.colors.border}` }} />
            : <div style={{ width: 48, height: 48, borderRadius: DS.radius.sm, background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="photo" size={18} color={DS.colors.textMuted} /></div>}
          <input type="file" accept="image/*" disabled={uploading}
            onChange={e => handleFoto(e.target.files?.[0], setF)}
            style={{ fontSize: 12, color: DS.colors.textSec }} />
          {uploading && <Spinner size={16} />}
        </div>
      </div>
      <Input label="Observações" value={f.observacoes} onChange={v => setF(x => ({ ...x, observacoes: v }))} placeholder="Ex: guardado no depósito 2" />
    </div>
  );

  const COLS = '2fr 1.1fr 0.7fr 0.7fr 0.8fr 0.8fr 0.8fr';

  return (
    <div style={{ animation: 'fadeIn 0.3s ease' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
        <div>
          <h1 style={{ fontSize: 22, fontWeight: 800, color: DS.colors.text }}>Estoque</h1>
          <p style={{ fontSize: 13, color: DS.colors.textSec, marginTop: 2 }}>Materiais, reservas por evento, retirada e devolução.</p>
        </div>
        <Btn icon="plus" onClick={() => { setForm(emptyForm); setAddModal(true); }}>Novo material</Btn>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
        {[
          { label: 'Materiais cadastrados', value: materiais.length, color: DS.colors.primary },
          { label: 'Livre', value: totais.livre, color: DS.colors.success },
          { label: 'Reservado', value: totais.reservado, color: DS.colors.warning },
          { label: 'Em campo', value: totais.emCampo, color: DS.colors.purple || DS.colors.primary },
        ].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>

      <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 ou categoria..."
            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', border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, fontSize: 13, background: '#fff', fontFamily: 'inherit', color: DS.colors.text }}>
          <option value="all">Todas categorias</option>
          {ESTOQUE_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 }}>{filtrados.length}</strong> de {materiais.length}
        </div>
      </div>

      <Card>
        {loading ? <Spinner /> : (
          <>
            <div style={{ display: 'grid', gridTemplateColumns: COLS, padding: '10px 24px', borderBottom: `1px solid ${DS.colors.border}`, fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
              <span>Material</span><span>Categoria</span><span>Total</span><span>Livre</span><span>Reservado</span><span>Em campo</span><span>Status</span>
            </div>
            {filtrados.length === 0
              ? <EmptyState icon="tag"
                  title={search || catFilter !== 'all' ? 'Nenhum material encontrado' : 'Nenhum material cadastrado'}
                  desc={search || catFilter !== 'all' ? 'Tente outra busca.' : 'Cadastre o primeiro material do estoque.'} />
              : filtrados.map((m, i) => {
                const s = calcSaldo(m, reservas);
                return (
                  <div key={m.id}
                    style={{ display: 'grid', gridTemplateColumns: COLS, padding: '14px 24px', borderBottom: i < filtrados.length - 1 ? `1px solid ${DS.colors.border}` : 'none', alignItems: 'center', cursor: 'pointer', transition: 'background 0.1s' }}
                    onClick={() => setSelected(m)}
                    onMouseEnter={e => e.currentTarget.style.background = '#F8FAFC'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                      {m.foto_url
                        ? <img src={m.foto_url} alt="" style={{ width: 30, height: 30, objectFit: 'cover', borderRadius: 6, flexShrink: 0 }} />
                        : <div style={{ width: 30, height: 30, borderRadius: 6, background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="tag" size={14} color={DS.colors.textMuted} /></div>}
                      <span style={{ fontSize: 13, fontWeight: 600, color: DS.colors.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.nome}</span>
                    </span>
                    <span style={{ fontSize: 13, color: DS.colors.textSec }}>{m.categoria}</span>
                    <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{s.total}</span>
                    <span style={{ fontSize: 13, fontWeight: 700, color: s.livre < 0 ? DS.colors.danger : DS.colors.success }}>{s.livre}</span>
                    <span style={{ fontSize: 13, color: DS.colors.textSec }}>{s.reservado}</span>
                    <span style={{ fontSize: 13, color: DS.colors.textSec }}>{s.emCampo}</span>
                    <span><Badge variant={m.status === 'Ativo' ? 'success' : 'default'}>{m.status}</Badge></span>
                  </div>
                );
              })}
          </>
        )}
      </Card>

      {/* Detalhe + historico */}
      <Modal open={!!selected} onClose={() => setSelected(null)} title={selected?.nome || ''} width={640}>
        {selected && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
              {selected.foto_url
                ? <img src={selected.foto_url} alt="" style={{ width: 72, height: 72, objectFit: 'cover', borderRadius: DS.radius.sm }} />
                : <div style={{ width: 72, height: 72, borderRadius: DS.radius.sm, background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="tag" size={26} color={DS.colors.textMuted} /></div>}
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', gap: 8, marginBottom: 6 }}>
                  <Badge variant="default">{selected.categoria}</Badge>
                  <Badge variant={selected.status === 'Ativo' ? 'success' : 'default'}>{selected.status}</Badge>
                </div>
                {selected.observacoes && <div style={{ fontSize: 12, color: DS.colors.textSec }}>{selected.observacoes}</div>}
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[
                { label: 'Total', value: saldoSel.total, color: DS.colors.text },
                { label: 'Livre', value: saldoSel.livre, color: DS.colors.success },
                { label: 'Reservado', value: saldoSel.reservado, color: DS.colors.warning },
                { label: 'Em campo', value: saldoSel.emCampo, color: DS.colors.primary },
              ].map(s => (
                <div key={s.label} style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: '10px 12px' }}>
                  <div style={{ fontSize: 10, color: DS.colors.textMuted, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{s.label}</div>
                  <div style={{ fontSize: 18, fontWeight: 800, color: s.color, marginTop: 2 }}>{s.value}</div>
                </div>
              ))}
            </div>

            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Histórico</div>
              {historico.length === 0
                ? <div style={{ fontSize: 13, color: DS.colors.textMuted }}>Este material ainda não foi usado em nenhum evento.</div>
                : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 260, overflowY: 'auto' }}>
                    {historico.map(r => (
                      <div key={r.id} style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '10px 12px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                          <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{r.events?.name || `Evento #${r.event_id}`}</span>
                          <span style={{ display: 'flex', gap: 6 }}>
                            <Badge variant={SITUACAO_VARIANT[r.situacao] || 'default'}>{r.situacao}</Badge>
                            {r.condicao && <Badge variant={CONDICAO_VARIANT[r.condicao] || 'default'}>{r.condicao}</Badge>}
                          </span>
                        </div>
                        <div style={{ fontSize: 12, color: DS.colors.textSec, lineHeight: 1.6 }}>
                          Reservado: {r.quantidade}
                          {r.retirado_em && <> · Retirado por <strong>{r.retirado_por || '—'}</strong> em {fmtDataHora(r.retirado_em)} ({r.retirado_qtd})</>}
                          {r.devolvido_em && <> · Devolvido por <strong>{r.devolvido_por || '—'}</strong> em {fmtDataHora(r.devolvido_em)} ({r.devolvido_qtd})</>}
                          {r.obs && <> · {r.obs}</>}
                        </div>
                      </div>
                    ))}
                  </div>
                )}
            </div>

            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
              <Btn variant="danger" icon="trash" onClick={() => setDelConfirm(true)}>Excluir</Btn>
              <Btn variant="secondary" icon="edit" onClick={openEdit}>Editar</Btn>
            </div>
          </div>
        )}
      </Modal>

      <Modal open={addModal} onClose={() => { setAddModal(false); setForm(emptyForm); }} title="Novo material" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {camposForm(form, setForm)}
          <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="tag">{saving ? 'Salvando…' : 'Adicionar material'}</Btn>
          </div>
        </div>
      </Modal>

      <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar material" width={560}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {camposForm(editForm, setEditForm)}
          <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 open={delConfirm} onClose={() => setDelConfirm(false)} title="Excluir material" 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>? Todo o histórico de reservas dele também será apagado. 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>
  );
}

// ───────────────────────────────────────────────────────────
// Materiais de um evento — aberto pelo detalhe do evento.
// Fluxo rapido: reservar -> retirar -> devolver, com poucos campos.
// ───────────────────────────────────────────────────────────
function MateriaisEventoModal({ open, onClose, event, currentUser }) {
  const [materiais, setMateriais] = React.useState([]);
  const [reservas, setReservas]   = React.useState([]);
  const [loading, setLoading]     = React.useState(true);
  const [saving, setSaving]       = React.useState(false);
  const [novoId, setNovoId]       = React.useState('');
  const [novaQtd, setNovaQtd]     = React.useState('1');
  const [acao, setAcao]           = React.useState(null); // { tipo:'retirar'|'devolver', reserva }
  const [acaoQtd, setAcaoQtd]     = React.useState('');
  const [acaoResp, setAcaoResp]   = React.useState('');
  const [acaoObs, setAcaoObs]     = React.useState('');
  const [toast, setToast]         = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  React.useEffect(() => {
    if (!open || !event?.id) return;
    setLoading(true);
    Promise.all([
      sb.from('materiais').select('*').eq('status', 'Ativo').order('nome'),
      sb.from('material_reservas').select('*').order('created_at', { ascending: false }),
    ]).then(([{ data: mats }, { data: res }]) => {
      setMateriais(mats || []);
      setReservas(res || []);
      setLoading(false);
    });
  }, [open, event?.id]);

  const doEvento = React.useMemo(
    () => reservas.filter(r => r.event_id === event?.id),
    [reservas, event?.id]
  );

  const materialPorId = React.useMemo(() => {
    const map = {};
    materiais.forEach(m => { map[m.id] = m; });
    return map;
  }, [materiais]);

  const handleReservar = async () => {
    const mat = materialPorId[novoId];
    const qtd = parseInt(novaQtd, 10) || 0;
    if (!mat) { showToast('Escolha um material.', 'danger'); return; }
    if (qtd <= 0) { showToast('Informe a quantidade.', 'danger'); return; }
    const saldo = calcSaldo(mat, reservas);
    if (qtd > saldo.livre) { showToast(`Só há ${saldo.livre} livre(s) de ${mat.nome}.`, 'danger'); return; }

    setSaving(true);
    const { data, error } = await sb.from('material_reservas')
      .insert({ material_id: mat.id, event_id: event.id, quantidade: qtd, situacao: 'Reservado' })
      .select().single();
    setSaving(false);
    if (error) {
      console.error('[MateriaisEventoModal.handleReservar] Supabase error:', error);
      showToast('Erro ao reservar: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setReservas(prev => [data, ...prev]);
    setNovoId(''); setNovaQtd('1');
    showToast(`${qtd}× ${mat.nome} reservado.`);
  };

  const abrirAcao = (tipo, reserva) => {
    setAcao({ tipo, reserva });
    setAcaoQtd(String(tipo === 'retirar' ? reserva.quantidade : (reserva.retirado_qtd ?? reserva.quantidade)));
    setAcaoResp(currentUser?.name || '');
    setAcaoObs('');
  };

  const confirmarRetirada = async () => {
    const qtd = parseInt(acaoQtd, 10) || 0;
    if (qtd <= 0) { showToast('Informe a quantidade.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('material_reservas').update({
      situacao: 'Em campo',
      retirado_em: new Date().toISOString(),
      retirado_por: acaoResp || null,
      retirado_qtd: qtd,
    }).eq('id', acao.reserva.id).select().single();
    setSaving(false);
    if (error) { console.error('[MateriaisEventoModal.confirmarRetirada] Supabase error:', error); showToast('Erro ao registrar a retirada.', 'danger'); return; }
    setReservas(prev => prev.map(r => r.id === data.id ? data : r));
    setAcao(null);
    showToast('Retirada registrada!');
  };

  const confirmarDevolucao = async (condicao) => {
    const qtd = parseInt(acaoQtd, 10) || 0;
    setSaving(true);
    const { data, error } = await sb.from('material_reservas').update({
      situacao: 'Devolvido',
      devolvido_em: new Date().toISOString(),
      devolvido_por: acaoResp || null,
      devolvido_qtd: qtd,
      condicao,
      obs: acaoObs || null,
    }).eq('id', acao.reserva.id).select().single();
    setSaving(false);
    if (error) { console.error('[MateriaisEventoModal.confirmarDevolucao] Supabase error:', error); showToast('Erro ao registrar a devolução.', 'danger'); return; }
    setReservas(prev => prev.map(r => r.id === data.id ? data : r));
    setAcao(null);
    showToast(`Devolução registrada (${condicao}).`);
  };

  const handleExcluirReserva = async (reserva) => {
    const { error } = await sb.from('material_reservas').delete().eq('id', reserva.id);
    if (error) { console.error('[MateriaisEventoModal.handleExcluirReserva] Supabase error:', error); showToast('Erro ao remover.', 'danger'); return; }
    setReservas(prev => prev.filter(r => r.id !== reserva.id));
    showToast('Reserva removida.');
  };

  return (
    <Modal open={open} onClose={onClose} title={`Materiais — ${event?.name || ''}`} width={640}>
      {loading ? <Spinner /> : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {/* Reservar */}
          <div style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: 14 }}>
            <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>Reservar material</div>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 0.7fr auto', gap: 10, alignItems: 'flex-end' }}>
              <Select label="Material" value={novoId} onChange={setNovoId}
                options={[{ value: '', label: '— Selecionar —' }, ...materiais.map(m => {
                  const s = calcSaldo(m, reservas);
                  return { value: String(m.id), label: `${m.nome} (${s.livre} livre)` };
                })]} />
              <Input label="Qtd" type="number" value={novaQtd} onChange={setNovaQtd} />
              <Btn icon="plus" onClick={handleReservar} disabled={saving}>Reservar</Btn>
            </div>
          </div>

          {/* Lista do evento */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
              Materiais deste evento ({doEvento.length})
            </div>
            {doEvento.length === 0
              ? <EmptyState icon="tag" title="Nenhum material reservado" desc="Reserve o primeiro material para este evento." />
              : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {doEvento.map(r => {
                    const m = materialPorId[r.material_id];
                    return (
                      <div key={r.id} style={{ border: `1px solid ${DS.colors.border}`, borderRadius: DS.radius.sm, padding: '10px 12px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                          <div style={{ minWidth: 0 }}>
                            <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>
                              {m?.nome || `Material #${r.material_id}`} <span style={{ color: DS.colors.textSec, fontWeight: 500 }}>· {r.quantidade}</span>
                            </div>
                            <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 2 }}>
                              {r.retirado_em && <>Retirado por {r.retirado_por || '—'} em {fmtDataHora(r.retirado_em)}</>}
                              {r.devolvido_em && <> · Devolvido em {fmtDataHora(r.devolvido_em)}</>}
                            </div>
                          </div>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            <Badge variant={SITUACAO_VARIANT[r.situacao] || 'default'}>{r.situacao}</Badge>
                            {r.condicao && <Badge variant={CONDICAO_VARIANT[r.condicao] || 'default'}>{r.condicao}</Badge>}
                            {r.situacao === 'Reservado' && (
                              <>
                                <Btn size="sm" icon="check" onClick={() => abrirAcao('retirar', r)}>Retirar</Btn>
                                <Btn size="sm" variant="ghost" icon="trash" onClick={() => handleExcluirReserva(r)}>Remover</Btn>
                              </>
                            )}
                            {r.situacao === 'Em campo' && (
                              <Btn size="sm" variant="secondary" icon="arrow" onClick={() => abrirAcao('devolver', r)}>Devolver</Btn>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
          </div>

          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Btn variant="secondary" onClick={onClose}>Fechar</Btn>
          </div>
        </div>
      )}

      {/* Retirada / devolucao */}
      <Modal open={!!acao} onClose={() => setAcao(null)}
        title={acao?.tipo === 'retirar' ? 'Registrar retirada' : 'Confirmar devolução'} width={420}>
        {acao && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ fontSize: 13, color: DS.colors.textSec }}>
              <strong style={{ color: DS.colors.text }}>{materialPorId[acao.reserva.material_id]?.nome}</strong>
              {' '}· reservado: {acao.reserva.quantidade}
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 12 }}>
              <Input label="Quantidade" type="number" value={acaoQtd} onChange={setAcaoQtd} />
              <Input label="Responsável" value={acaoResp} onChange={setAcaoResp} placeholder="Quem está assinando" />
            </div>

            {acao.tipo === 'retirar' ? (
              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                <Btn variant="secondary" onClick={() => setAcao(null)}>Cancelar</Btn>
                <Btn icon="check" onClick={confirmarRetirada} disabled={saving}>{saving ? 'Salvando…' : 'Confirmar retirada'}</Btn>
              </div>
            ) : (
              <>
                <Input label="Observação (opcional)" value={acaoObs} onChange={setAcaoObs} placeholder="Ex: faltou 1 unidade" />
                <div style={{ fontSize: 12, fontWeight: 600, color: DS.colors.textSec }}>Como o material voltou?</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  <Btn variant="success" icon="check" onClick={() => confirmarDevolucao('Correto')} disabled={saving}>Correto</Btn>
                  <Btn variant="danger" icon="alert" onClick={() => confirmarDevolucao('Danificado')} disabled={saving}>Danificado</Btn>
                  <Btn variant="secondary" icon="x" onClick={() => confirmarDevolucao('Faltando')} disabled={saving}>Faltando</Btn>
                </div>
              </>
            )}
          </div>
        )}
      </Modal>

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

Object.assign(window, { Estoque, MateriaisEventoModal, calcSaldo, ESTOQUE_CATEGORIAS });