// Registros da acao no app do promotor — orcamento 310, item 3.
//
//   EnvioFotoModal  -> foto com categoria, legenda e localizacao
//   ResultadosModal -> indicadores configurados pela producao no evento
//
// Por que a categoria e obrigatoria e a legenda nao: no fim da acao a producao
// precisa montar o relatorio do cliente separando montagem, abordagem e
// resultado. Sem categoria, sobram 200 fotos soltas e alguem tem que
// classificar na mao. Ja a legenda so serve quando tem algo a dizer — exigir
// texto a cada foto derruba o envio.

const FOTO_CATEGORIAS = [
  'Montagem', 'Equipe', 'Início da ação', 'Abordagem', 'Público',
  'Ativação', 'Brindes', 'Estrutura', 'Resultado', 'Encerramento',
  'Ocorrência', 'Outros',
];

function EnvioFotoModal({ open, escala, freelancer, onClose, onEnviada, showToast }) {
  const [categoria, setCategoria] = React.useState('Abordagem');
  const [legenda, setLegenda] = React.useState('');
  const [arquivo, setArquivo] = React.useState(null);
  const [preview, setPreview] = React.useState('');
  const [enviando, setEnviando] = React.useState(false);

  React.useEffect(() => () => { if (preview) URL.revokeObjectURL(preview); }, [preview]);

  React.useEffect(() => {
    if (!open) return;
    setCategoria('Abordagem');
    setLegenda('');
    setArquivo(null);
    setPreview('');
  }, [open]);

  const escolher = (file) => {
    if (!file) return;
    if (preview) URL.revokeObjectURL(preview);
    setArquivo(file);
    setPreview(URL.createObjectURL(file));
  };

  const enviar = async () => {
    if (!arquivo) return;
    setEnviando(true);
    const ext = (arquivo.name.split('.').pop() || 'jpg').toLowerCase();
    const path = 'escala_' + escala.id + '/' + crypto.randomUUID() + '.' + ext;
    try {
      const { error: upErr } = await sb.storage
        .from('event-photos').upload(path, arquivo, { contentType: arquivo.type });
      if (upErr) throw upErr;

      const { data: pub } = sb.storage.from('event-photos').getPublicUrl(path);

      // Localizacao da foto e best-effort: a promotora ja provou presenca no
      // check-in. Travar o envio por GPS fraco so faria ela parar de mandar foto.
      let pos = null;
      try { pos = await obterPosicao(); }
      catch (err) { console.warn('[EnvioFotoModal] sem GPS:', err.message); }
      const endereco = pos ? await enderecoAproximado(pos.lat, pos.lng) : null;

      const { data, error } = await sb.from('escala_fotos').insert({
        escala_id: escala.id,
        event_id: escala.event_id,
        freelancer_id: freelancer.id,
        url: pub.publicUrl,
        storage_path: path,
        categoria,
        legenda: legenda.trim() || null,
        lat: pos ? pos.lat : null,
        lng: pos ? pos.lng : null,
        endereco,
      }).select().single();

      if (error) {
        await sb.storage.from('event-photos').remove([path]); // rollback
        throw error;
      }

      onEnviada(data);
      showToast('Foto enviada!');
      onClose();
    } catch (err) {
      console.error('[EnvioFotoModal.enviar] error:', err);
      showToast(err.message || 'Erro ao enviar a foto.', 'danger');
    }
    setEnviando(false);
  };

  return (
    <Modal open={open} onClose={enviando ? undefined : onClose} title="Enviar foto" width={420}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textSec, marginBottom: 8 }}>
            O que a foto mostra?
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {FOTO_CATEGORIAS.map(c => (
              <button key={c} onClick={() => setCategoria(c)} disabled={enviando}
                style={{
                  border: '1px solid ' + (categoria === c ? DS.colors.primary : DS.colors.border),
                  background: categoria === c ? DS.colors.primary : '#fff',
                  color: categoria === c ? '#fff' : DS.colors.textSec,
                  borderRadius: 999, padding: '6px 12px', fontSize: 12,
                  fontWeight: categoria === c ? 800 : 600,
                  fontFamily: 'inherit', cursor: enviando ? 'default' : 'pointer',
                }}>
                {c}
              </button>
            ))}
          </div>
        </div>

        <label style={{
          display: 'block', borderRadius: DS.radius.sm, overflow: 'hidden',
          border: '1px dashed ' + (preview ? 'transparent' : DS.colors.border),
          cursor: enviando ? 'default' : 'pointer',
        }}>
          {preview ? (
            <img src={preview} alt="" style={{ width: '100%', maxHeight: 240, objectFit: 'cover', display: 'block' }} />
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, padding: '24px 12px', color: DS.colors.textSec }}>
              <Icon name="photo" size={22} color={DS.colors.textMuted} />
              <div style={{ fontSize: 13, fontWeight: 700 }}>Tirar foto</div>
            </div>
          )}
          <input type="file" accept="image/*" capture="environment" disabled={enviando}
            onChange={e => { escolher(e.target.files && e.target.files[0]); e.target.value = ''; }}
            style={{ display: 'none' }} />
        </label>

        <Input label="Legenda (opcional)" value={legenda} onChange={setLegenda}
          placeholder="Ex: fila grande no início da tarde" />

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Btn variant="secondary" onClick={onClose} disabled={enviando}>Cancelar</Btn>
          <Btn icon="check" onClick={enviar} disabled={!arquivo || enviando}>
            {enviando ? 'Enviando…' : 'Enviar foto'}
          </Btn>
        </div>
      </div>
    </Modal>
  );
}

// ───────────────────────────────────────────────────────────
// Resultados — os indicadores que a producao configurou nesta acao
// ───────────────────────────────────────────────────────────
function ResultadosModal({ open, escala, onClose, onSalvo, showToast }) {
  const campos = ((escala && escala.events && escala.events.resultado_campos) || []);
  const [valores, setValores] = React.useState({});
  const [salvando, setSalvando] = React.useState(false);

  React.useEffect(() => {
    if (!open) return;
    // Reabrir precisa mostrar o que ja foi registrado, nao um formulario vazio.
    const atuais = {};
    campos.forEach(c => {
      const v = (escala.resultados || {})[c.chave];
      atuais[c.chave] = (v === null || v === undefined) ? '' : String(v);
    });
    setValores(atuais);
  }, [open, escala && escala.id]);

  const salvar = async () => {
    const payload = {};
    for (const c of campos) {
      const bruto = String(valores[c.chave] || '').trim();
      if (!bruto) continue;
      const n = Number(bruto.replace(',', '.'));
      if (!Number.isFinite(n) || n < 0) {
        showToast('Confira o campo "' + c.label + '": use apenas números.', 'danger');
        return;
      }
      payload[c.chave] = n;
    }

    setSalvando(true);
    const { data, error } = await sb.rpc('promotor_salvar_resultados', {
      p_escala_id: escala.id,
      p_resultados: payload,
    });
    setSalvando(false);

    if (error) {
      console.error('[ResultadosModal.salvar] Supabase error:', error);
      showToast(error.message || 'Não foi possível salvar.', 'danger');
      return;
    }
    onSalvo(Array.isArray(data) ? data[0] : data);
    showToast('Resultados salvos!');
    onClose();
  };

  return (
    <Modal open={open} onClose={salvando ? undefined : onClose} title="Registrar resultados" width={420}>
      {campos.length === 0 ? (
        <div style={{ fontSize: 13, color: DS.colors.textSec, lineHeight: 1.6 }}>
          A produção ainda não definiu indicadores para esta ação.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {campos.map(c => (
            <div key={c.chave}>
              <Input label={c.label} value={valores[c.chave] || ''}
                onChange={v => setValores(prev => ({ ...prev, [c.chave]: v }))}
                placeholder="0" />
              {c.meta ? (
                <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 4 }}>
                  Meta da ação: {Number(c.meta).toLocaleString('pt-BR')}
                </div>
              ) : null}
            </div>
          ))}

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <Btn variant="secondary" onClick={onClose} disabled={salvando}>Cancelar</Btn>
            <Btn icon="check" onClick={salvar} disabled={salvando}>
              {salvando ? 'Salvando…' : 'Salvar resultados'}
            </Btn>
          </div>
        </div>
      )}
    </Modal>
  );
}

Object.assign(window, { EnvioFotoModal, ResultadosModal, FOTO_CATEGORIAS });

// ───────────────────────────────────────────────────────────
// Ocorrencia — secao 14. Orcamento 310, Fase 2.
//
// Botao destacado e caminho curto de proposito: quem esta registrando ocorrencia
// esta no meio de um problema. Categoria + descricao bastam; a foto ajuda mas
// nao trava o envio.
// ───────────────────────────────────────────────────────────
const OCORRENCIA_CATEGORIAS = [
  'Falta de material', 'Atraso', 'Ausência de profissional',
  'Problema com estrutura', 'Problema com cliente/local',
  'Problema com uniforme', 'Problema técnico', 'Acidente', 'Outro',
];

function OcorrenciaModal({ open, escala, onClose, onRegistrada, showToast }) {
  const [categoria, setCategoria] = React.useState('Falta de material');
  const [descricao, setDescricao] = React.useState('');
  const [arquivo, setArquivo] = React.useState(null);
  const [preview, setPreview] = React.useState('');
  const [enviando, setEnviando] = React.useState(false);

  React.useEffect(() => () => { if (preview) URL.revokeObjectURL(preview); }, [preview]);

  React.useEffect(() => {
    if (!open) return;
    setCategoria('Falta de material');
    setDescricao('');
    setArquivo(null);
    setPreview('');
  }, [open]);

  const escolher = (file) => {
    if (!file) return;
    if (preview) URL.revokeObjectURL(preview);
    setArquivo(file);
    setPreview(URL.createObjectURL(file));
  };

  const enviar = async () => {
    if (descricao.trim().length < 3) {
      showToast('Descreva rapidamente o que aconteceu.', 'danger');
      return;
    }
    setEnviando(true);
    let fotoUrl = null, fotoPath = null;
    try {
      if (arquivo) {
        const ext = (arquivo.name.split('.').pop() || 'jpg').toLowerCase();
        const caminho = 'ocorrencia_' + escala.id + '/' + crypto.randomUUID() + '.' + ext;
        const { error: upErr } = await sb.storage
          .from('event-photos').upload(caminho, arquivo, { contentType: arquivo.type });
        if (upErr) throw upErr;
        const { data: pub } = sb.storage.from('event-photos').getPublicUrl(caminho);
        fotoUrl = pub.publicUrl; fotoPath = caminho;
      }

      let pos = null;
      try { pos = await obterPosicao(); }
      catch (err) { console.warn('[OcorrenciaModal] sem GPS:', err.message); }
      const endereco = pos ? await enderecoAproximado(pos.lat, pos.lng) : null;

      const { data, error } = await sb.rpc('promotor_registrar_ocorrencia', {
        p_escala_id: escala.id,
        p_categoria: categoria,
        p_descricao: descricao.trim(),
        p_foto_url: fotoUrl,
        p_foto_path: fotoPath,
        p_lat: pos ? pos.lat : null,
        p_lng: pos ? pos.lng : null,
        p_endereco: endereco,
      });
      if (error) {
        if (fotoPath) await sb.storage.from('event-photos').remove([fotoPath]);
        throw error;
      }

      onRegistrada(Array.isArray(data) ? data[0] : data);
      showToast('Ocorrência enviada. A produção foi avisada.');
      onClose();
    } catch (err) {
      console.error('[OcorrenciaModal.enviar] error:', err);
      showToast(err.message || 'Não foi possível enviar a ocorrência.', 'danger');
    }
    setEnviando(false);
  };

  return (
    <Modal open={open} onClose={enviando ? undefined : onClose} title="Informar ocorrência" width={420}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textSec, marginBottom: 8 }}>
            O que aconteceu?
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {OCORRENCIA_CATEGORIAS.map(c => (
              <button key={c} onClick={() => setCategoria(c)} disabled={enviando}
                style={{
                  border: '1px solid ' + (categoria === c ? DS.colors.danger : DS.colors.border),
                  background: categoria === c ? DS.colors.danger : '#fff',
                  color: categoria === c ? '#fff' : DS.colors.textSec,
                  borderRadius: 999, padding: '6px 12px', fontSize: 12,
                  fontWeight: categoria === c ? 800 : 600,
                  fontFamily: 'inherit', cursor: enviando ? 'default' : 'pointer',
                }}>
                {c}
              </button>
            ))}
          </div>
        </div>

        <Input label="Descrição" value={descricao} onChange={setDescricao}
          placeholder="Ex: chegaram 200 brindes em vez de 500" />

        <label style={{
          display: 'block', borderRadius: DS.radius.sm, overflow: 'hidden',
          border: '1px dashed ' + (preview ? 'transparent' : DS.colors.border),
          cursor: enviando ? 'default' : 'pointer',
        }}>
          {preview ? (
            <img src={preview} alt="" style={{ width: '100%', maxHeight: 200, objectFit: 'cover', display: 'block' }} />
          ) : (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '16px', fontSize: 13, fontWeight: 600, color: DS.colors.textSec }}>
              <Icon name="photo" size={16} color={DS.colors.textMuted} />
              Adicionar foto (opcional)
            </div>
          )}
          <input type="file" accept="image/*" capture="environment" disabled={enviando}
            onChange={e => { escolher(e.target.files && e.target.files[0]); e.target.value = ''; }}
            style={{ display: 'none' }} />
        </label>

        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <Btn variant="secondary" onClick={onClose} disabled={enviando}>Cancelar</Btn>
          <Btn variant="danger" icon="alert" onClick={enviar} disabled={enviando}>
            {enviando ? 'Enviando…' : 'Enviar ocorrência'}
          </Btn>
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { OcorrenciaModal, OCORRENCIA_CATEGORIAS });