// 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. Continua DERIVADO, nunca gravado (ver migration 025).
//
// A partir do orcamento 291 o "em campo" vem do romaneio, nao mais da reserva:
//   reservado = reservas que ainda nao viraram romaneio (saida_id null)
//   em campo  = o que saiu num romaneio Confirmado e ainda nao voltou
// O termo emCampoLegado existe so por causa das linhas antigas, retiradas pelo
// fluxo item a item que existia antes do romaneio. Some sozinho com o tempo.
function calcSaldo(material, reservas, saidaItens) {
  const doMaterial = (reservas || []).filter(r => r.material_id === material.id);

  const reservado = doMaterial
    .filter(r => r.situacao === 'Reservado' && !r.saida_id)
    .reduce((s, r) => s + (r.quantidade || 0), 0);

  const emCampoLegado = doMaterial
    .filter(r => r.situacao === 'Em campo' && !r.saida_id)
    .reduce((s, r) => s + (r.retirado_qtd || 0), 0);

  const emCampoRomaneio = (saidaItens || [])
    .filter(i => i.material_id === material.id)
    .reduce((s, i) => s + Math.max(0, (i.qtd_enviada || 0) - (i.qtd_recebida || 0)), 0);

  const emCampo = emCampoLegado + emCampoRomaneio;
  const total = material.quantidade_total || 0;
  return { total, reservado, emCampo, livre: total - reservado - emCampo };
}

// Situacao exibida do equipamento. "Em acao" nao existe no banco de proposito:
// e derivado, igual ao saldo. Ver migration 035.
function situacaoExibida(material, saldo) {
  if (saldo && saldo.emCampo > 0) return 'Em ação';
  return material.situacao_fisica || 'Disponível';
}

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 [saidaItens, setSaidaItens] = React.useState([]);
  const [liberarModal, setLiberarModal] = React.useState(null); // 'liberar' | 'baixa'
  const [liberarForm, setLiberarForm]   = React.useState({ qtd: '1', obs: '' });
  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 }, { data: its }] = await Promise.all([
      sb.from('materiais').select('*').order('nome'),
      sb.from('material_reservas').select('*, events(name)').order('created_at', { ascending: false }),
      // So os romaneios que ainda prendem saldo. Conferido e cancelado ja
      // devolveram o material, entao nao entram no calculo.
      sb.from('material_saida_itens')
        .select('*, material_saidas!inner(id, status, event_id, saida_em, responsavel_retirada, responsavel_entrega, conferido_por, conferido_em, events(name))')
        .eq('material_saidas.status', 'Confirmada'),
    ]);
    setMateriais(mats || []);
    setReservas(res || []);
    setSaidaItens(its || []);
    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, saidaItens);
      return { livre: acc.livre + s.livre, reservado: acc.reservado + s.reservado, emCampo: acc.emCampo + s.emCampo };
    }, { livre: 0, reservado: 0, emCampo: 0 });
  }, [materiais, reservas, saidaItens]);

  // Reservas ainda pendentes aparecem no historico como planejamento; o que
  // aconteceu de verdade vem dos romaneios (historicoSaidas).
  const historico = React.useMemo(
    () => selected ? reservas.filter(r => r.material_id === selected.id) : [],
    [selected, reservas]
  );

  // Historico por equipamento: quem entregou, quem recebeu e quem conferiu.
  // Busca separada porque aqui interessam TODOS os romaneios, nao so os que
  // ainda prendem saldo.
  const [historicoSaidas, setHistoricoSaidas] = React.useState([]);
  React.useEffect(() => {
    if (!selected) { setHistoricoSaidas([]); return; }
    let cancelado = false;
    sb.from('material_saida_itens')
      .select('*, material_saidas(id, status, saida_em, responsavel_retirada, responsavel_entrega, conferido_por, conferido_em, events(name))')
      .eq('material_id', selected.id)
      .order('id', { ascending: false })
      .then(({ data, error }) => {
        if (error) { console.error('[Estoque.historicoSaidas] Supabase error:', error); return; }
        if (!cancelado) setHistoricoSaidas(data || []);
      });
    return () => { cancelado = true; };
  }, [selected?.id]);

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

  // Volta o material para circulacao (ou tira em definitivo). Sem isso, item
  // que voltou danificado nunca mais sairia do estoque.
  const aplicarLiberacao = async () => {
    if (!selected) return;
    setSaving(true);
    const patch = {
      situacao_fisica: 'Disponível',
      situacao_obs: liberarForm.obs?.trim() || null,
      situacao_alterada_em: new Date().toISOString(),
      situacao_alterada_por: currentUser?.name || null,
    };
    if (liberarModal === 'baixa') {
      const qtd = parseInt(liberarForm.qtd, 10) || 0;
      if (qtd <= 0 || qtd > (selected.quantidade_total || 0)) {
        setSaving(false);
        showToast(`Informe uma quantidade entre 1 e ${selected.quantidade_total}.`, 'danger');
        return;
      }
      patch.quantidade_total = (selected.quantidade_total || 0) - qtd;
    }
    const { data, error } = await sb.from('materiais').update(patch).eq('id', selected.id).select().single();
    setSaving(false);
    if (error) {
      console.error('[Estoque.aplicarLiberacao] Supabase error:', error);
      showToast('Erro ao atualizar a situação: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setMateriais(prev => prev.map(m => m.id === data.id ? data : m));
    setSelected(data);
    setLiberarModal(null);
    setLiberarForm({ qtd: '1', obs: '' });
    showToast(liberarModal === 'baixa' ? 'Baixa registrada.' : 'Material liberado para uso.');
  };

  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>Situação</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, saidaItens);
                const sit = situacaoExibida(m, s);
                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={SITUACAO_FISICA_VARIANT[sit] || 'default'}>{sit}</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, flexWrap: 'wrap' }}>
                  <Badge variant="default">{selected.categoria}</Badge>
                  <Badge variant={selected.status === 'Ativo' ? 'success' : 'default'}>{selected.status}</Badge>
                  <Badge variant={SITUACAO_FISICA_VARIANT[situacaoSel] || 'default'}>{situacaoSel}</Badge>
                </div>
                {selected.observacoes && <div style={{ fontSize: 12, color: DS.colors.textSec }}>{selected.observacoes}</div>}
              </div>
            </div>

            {/* Situacao fisica: so aparece quando ha algo a resolver */}
            {situacaoSel !== 'Disponível' && situacaoSel !== 'Em ação' && (
              <div style={{ background: DS.colors.warningLight, borderRadius: DS.radius.sm, padding: '12px 14px' }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text, marginBottom: 4 }}>
                  Equipamento {situacaoSel.toLowerCase()}
                </div>
                <div style={{ fontSize: 12, color: DS.colors.textSec, marginBottom: 10, lineHeight: 1.6 }}>
                  {selected.situacao_obs || 'Sem observação registrada.'}
                  {selected.situacao_alterada_em && (
                    <> · Registrado por <strong>{selected.situacao_alterada_por || '—'}</strong> em {fmtDataHora(selected.situacao_alterada_em)}</>
                  )}
                </div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <Btn size="sm" variant="success" icon="check"
                    onClick={() => { setLiberarForm({ qtd: '1', obs: '' }); setLiberarModal('liberar'); }}>
                    Voltar para Disponível
                  </Btn>
                  <Btn size="sm" variant="danger" icon="trash"
                    onClick={() => { setLiberarForm({ qtd: '1', obs: '' }); setLiberarModal('baixa'); }}>
                    Dar baixa definitiva
                  </Btn>
                </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>

            {/* Historico por equipamento — o que saiu de verdade, por acao */}
            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
                Saídas e retornos ({historicoSaidas.length})
              </div>
              {historicoSaidas.length === 0
                ? <div style={{ fontSize: 13, color: DS.colors.textMuted }}>Este material ainda não saiu em nenhum romaneio.</div>
                : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxHeight: 260, overflowY: 'auto' }}>
                    {historicoSaidas.map(it => {
                      const s = it.material_saidas || {};
                      return (
                        <div key={it.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, flexWrap: 'wrap' }}>
                            <span style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>
                              {s.events?.name || 'Ação removida'}
                              <span style={{ color: DS.colors.textMuted, fontWeight: 500 }}> · {romaneioNumero(s)}</span>
                            </span>
                            <span style={{ display: 'flex', gap: 6 }}>
                              <Badge variant={SAIDA_STATUS_VARIANT[s.status] || 'default'}>{s.status}</Badge>
                              {it.ocorrencia && <Badge variant="danger">{it.ocorrencia}</Badge>}
                            </span>
                          </div>
                          <div style={{ fontSize: 12, color: DS.colors.textSec, lineHeight: 1.6 }}>
                            Saiu {it.qtd_enviada} ({it.estado_saida}) em {fmtDataHora(s.saida_em)}
                            {s.responsavel_retirada && <> · Retirou: <strong>{s.responsavel_retirada}</strong></>}
                            {s.responsavel_entrega && <> · Entregou: <strong>{s.responsavel_entrega}</strong></>}
                            {it.retorno && <> · Retorno: <strong>{it.retorno}</strong> ({it.qtd_recebida})</>}
                            {s.conferido_por && <> · Conferiu: <strong>{s.conferido_por}</strong> em {fmtDataHora(s.conferido_em)}</>}
                            {it.obs_retorno && <> · {it.obs_retorno}</>}
                          </div>
                          {it.foto_url && (
                            <a href={it.foto_url} target="_blank" rel="noreferrer">
                              <img src={it.foto_url} alt="Avaria" style={{ marginTop: 6, width: 56, height: 56, objectFit: 'cover', borderRadius: 6, border: `1px solid ${DS.colors.border}` }} />
                            </a>
                          )}
                        </div>
                      );
                    })}
                  </div>
                )}
            </div>

            <div>
              <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Reservas</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>

      {/* Liberacao / baixa definitiva do equipamento */}
      <Modal open={!!liberarModal} onClose={() => setLiberarModal(null)}
        title={liberarModal === 'baixa' ? 'Dar baixa definitiva' : 'Voltar para Disponível'} width={440}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <p style={{ fontSize: 13, color: DS.colors.textSec, lineHeight: 1.6 }}>
            {liberarModal === 'baixa'
              ? <>O material sai do estoque em definitivo: a quantidade total de <strong style={{ color: DS.colors.text }}>{selected?.nome}</strong> diminui. Use quando o equipamento foi perdido ou não tem mais conserto.</>
              : <><strong style={{ color: DS.colors.text }}>{selected?.nome}</strong> volta a ficar disponível para as próximas ações.</>}
          </p>
          {liberarModal === 'baixa' && (
            <Input label={`Quantidade a dar baixa (de ${selected?.quantidade_total ?? 0})`} type="number"
              value={liberarForm.qtd} onChange={v => setLiberarForm(f => ({ ...f, qtd: v }))} />
          )}
          <Input label="Observação" value={liberarForm.obs}
            onChange={v => setLiberarForm(f => ({ ...f, obs: v }))}
            placeholder={liberarModal === 'baixa' ? 'Ex: quebrado sem conserto' : 'Ex: voltou da manutenção'} />
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <Btn variant="secondary" onClick={() => setLiberarModal(null)}>Cancelar</Btn>
            <Btn variant={liberarModal === 'baixa' ? 'danger' : 'success'} icon="check"
              onClick={aplicarLiberacao} disabled={saving}>
              {saving ? 'Salvando…' : 'Confirmar'}
            </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.
//
// A reserva e o PLANEJAMENTO do que vai para a acao. A saida de verdade
// acontece no romaneio (orcamento 291), e o retorno na conferencia. Os botoes
// de retirar/devolver item a item sairam de proposito: dois caminhos para dar
// a mesma baixa era o que dessincronizava o saldo.
// ───────────────────────────────────────────────────────────
function MateriaisEventoModal({ open, onClose, event, currentUser }) {
  const [materiais, setMateriais] = React.useState([]);
  const [reservas, setReservas]   = React.useState([]);
  const [saidas, setSaidas]       = React.useState([]);
  const [saidaItens, setSaidaItens] = 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 [toast, setToast]         = React.useState(null);
  const showToast = (msg, type = 'success') => { setToast({ msg, type }); setTimeout(() => setToast(null), 3000); };

  const carregar = React.useCallback(async () => {
    const [{ data: mats }, { data: res }, { data: sai }, { data: its }] = await Promise.all([
      sb.from('materiais').select('*').eq('status', 'Ativo').order('nome'),
      sb.from('material_reservas').select('*').order('created_at', { ascending: false }),
      sb.from('material_saidas').select('*').order('id', { ascending: false }),
      // Todos os itens: o painel precisa deles para listar, e o saldo filtra
      // depois pelos romaneios que ainda estao Confirmados.
      sb.from('material_saida_itens').select('*, material_saidas(status)'),
    ]);
    setMateriais(mats || []);
    setReservas(res || []);
    setSaidas(sai || []);
    setSaidaItens(its || []);
    setLoading(false);
  }, []);

  React.useEffect(() => {
    if (!open || !event?.id) return;
    setLoading(true);
    carregar();
  }, [open, event?.id, carregar]);

  // Só o que ainda prende saldo entra no cálculo do livre.
  const itensPrendendoSaldo = React.useMemo(
    () => saidaItens.filter(i => i.material_saidas?.status === 'Confirmada'),
    [saidaItens]
  );

  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, itensPrendendoSaldo);
    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 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={760}>
      {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, itensPrendendoSaldo);
                  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>

          {/* Planejamento do que vai para a acao */}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
              Reservado para esta ação ({doEvento.length})
            </div>
            {doEvento.length === 0
              ? <EmptyState icon="tag" title="Nenhum material reservado" desc="Reserve o que vai para a ação. A saída é registrada depois, no romaneio." />
              : (
                <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>
                            {r.saida_id && (
                              <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 2 }}>
                                Já saiu no {romaneioNumero({ id: r.saida_id })}
                              </div>
                            )}
                          </div>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            <Badge variant={r.saida_id ? 'primary' : (SITUACAO_VARIANT[r.situacao] || 'default')}>
                              {r.saida_id ? 'Em campo' : r.situacao}
                            </Badge>
                            {!r.saida_id && r.situacao === 'Reservado' && (
                              <Btn size="sm" variant="ghost" icon="trash" onClick={() => handleExcluirReserva(r)}>Remover</Btn>
                            )}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
          </div>

          <Divider />

          <RomaneiosEventoPanel
            event={event}
            materiais={materiais}
            reservas={reservas}
            saidas={saidas}
            saidaItens={saidaItens}
            currentUser={currentUser}
            onChange={carregar}
            showToast={showToast}
          />

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

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

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