// Escalas — lado do admin. Orcamento 290.
//
//   EscalaEventoModal  -> escalar a equipe dentro do evento (funcao, cache,
//                         prazo de pagamento) + acompanhar presenca/check-in.
//   PainelPromotores   -> acompanhamento em tempo real de confirmacoes,
//                         check-ins, fotos e check-outs.
//
// O promotor NAO altera estas linhas direto: ele usa as RPCs da migration 026.

const ESCALA_FUNCOES = [
  { value: 'Promotor',    label: 'Promotor' },
  { value: 'Supervisor',  label: 'Supervisor' },
  { value: 'Coordenador', label: 'Coordenador' },
  { value: 'Motorista',   label: 'Motorista' },
];

const ESCALA_STATUS_VARIANT = {
  'Convidado':  'default',
  'Confirmado': 'primary',
  'Recusado':   'danger',
  'Check-in':   'warning',
  'Concluído':  'success',
  'Falta':      'danger',
};

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

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

function EscalaEventoModal({ open, onClose, event }) {
  const [freelancers, setFreelancers] = React.useState([]);
  const [escalas, setEscalas]   = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [saving, setSaving]     = React.useState(false);
  const [coordenador, setCoordenador] = React.useState('');
  const [form, setForm] = React.useState({ freelancer_id: '', funcao: 'Promotor', cache: '', prazo_pagamento: '' });
  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);
    setCoordenador(event.coordenador_contato || '');
    Promise.all([
      sb.from('freelancers').select('id, name, role, rate, phone, app_ativo, auth_user_id').order('name'),
      sb.from('event_escalas').select('*').eq('event_id', event.id).order('created_at'),
    ]).then(([{ data: fl }, { data: es }]) => {
      setFreelancers(fl || []);
      setEscalas(es || []);
      setLoading(false);
    });
  }, [open, event?.id]);

  const freelancerPorId = React.useMemo(() => {
    const map = {};
    freelancers.forEach(f => { map[f.id] = f; });
    return map;
  }, [freelancers]);

  // Ao escolher o freelancer, o cache ja vem preenchido com a diaria dele.
  const escolherFreelancer = (id) => {
    const f = freelancerPorId[id];
    setForm(prev => ({ ...prev, freelancer_id: id, cache: f ? String(f.rate ?? '') : prev.cache }));
  };

  const jaEscalados = React.useMemo(() => new Set(escalas.map(e => e.freelancer_id)), [escalas]);

  const handleEscalar = async () => {
    const f = freelancerPorId[form.freelancer_id];
    if (!f) { showToast('Escolha um freelancer.', 'danger'); return; }
    setSaving(true);
    const { data, error } = await sb.from('event_escalas').insert({
      event_id: event.id,
      freelancer_id: f.id,
      funcao: form.funcao,
      cache: parseFloat(String(form.cache).replace(',', '.')) || 0,
      prazo_pagamento: form.prazo_pagamento || null,
    }).select().single();
    setSaving(false);
    if (error) {
      console.error('[EscalaEventoModal.handleEscalar] Supabase error:', error);
      showToast(error.code === '23505' ? 'Esse freelancer já está escalado neste evento.' : 'Erro ao escalar: ' + (error.message || 'desconhecido'), 'danger');
      return;
    }
    setEscalas(prev => [...prev, data]);
    setForm({ freelancer_id: '', funcao: 'Promotor', cache: '', prazo_pagamento: form.prazo_pagamento });
    showToast(`${f.name} escalado!`);
  };

  const handleRemover = async (escala) => {
    const { error } = await sb.from('event_escalas').delete().eq('id', escala.id);
    if (error) { console.error('[EscalaEventoModal.handleRemover] Supabase error:', error); showToast('Erro ao remover.', 'danger'); return; }
    setEscalas(prev => prev.filter(e => e.id !== escala.id));
    showToast('Removido da escala.');
  };

  const handleSalvarCoordenador = async () => {
    setSaving(true);
    const { error } = await sb.from('events').update({ coordenador_contato: coordenador || null }).eq('id', event.id);
    setSaving(false);
    if (error) { console.error('[EscalaEventoModal.handleSalvarCoordenador] Supabase error:', error); showToast('Erro ao salvar o contato.', 'danger'); return; }
    if (event) event.coordenador_contato = coordenador;
    showToast('Contato do coordenador salvo!');
  };

  const totalCache = escalas.reduce((s, e) => s + (parseFloat(e.cache) || 0), 0);

  return (
    <Modal open={open} onClose={onClose} title={`Escala — ${event?.name || ''}`} width={680}>
      {loading ? <Spinner /> : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          {/* Contato do coordenador — aparece no app do promotor */}
          <div style={{ background: '#F8FAFC', borderRadius: DS.radius.sm, padding: 14 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'flex-end' }}>
              <Input label="Contato do coordenador (aparece no app do promotor)" value={coordenador} onChange={setCoordenador}
                placeholder="Ex: Ana Lima — (11) 99999-0000" />
              <Btn variant="secondary" icon="check" onClick={handleSalvarCoordenador} disabled={saving}>Salvar</Btn>
            </div>
          </div>

          {/* Escalar */}
          <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 }}>Escalar freelancer</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 0.9fr', gap: 10, marginBottom: 10 }}>
              <Select label="Freelancer" value={form.freelancer_id} onChange={escolherFreelancer}
                options={[{ value: '', label: '— Selecionar —' },
                  ...freelancers.filter(f => !jaEscalados.has(f.id)).map(f => ({
                    value: String(f.id),
                    label: `${f.name}${f.role ? ' · ' + f.role : ''}${f.auth_user_id ? ' ✓app' : ''}`,
                  }))]} />
              <Select label="Função" value={form.funcao} onChange={v => setForm(f => ({ ...f, funcao: v }))} options={ESCALA_FUNCOES} />
              <Input label="Cachê (R$)" value={form.cache} onChange={v => setForm(f => ({ ...f, cache: v }))} placeholder="Ex: 180" />
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 10, alignItems: 'flex-end' }}>
              <Input label="Prazo de pagamento" value={form.prazo_pagamento} onChange={v => setForm(f => ({ ...f, prazo_pagamento: v }))}
                placeholder="Ex: até 5 dias úteis após a ação" />
              <Btn icon="plus" onClick={handleEscalar} disabled={saving}>{saving ? 'Salvando…' : 'Escalar'}</Btn>
            </div>
          </div>

          {/* Equipe escalada */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                Equipe escalada ({escalas.length})
              </div>
              {escalas.length > 0 && (
                <div style={{ fontSize: 12, color: DS.colors.textSec }}>
                  Total de cachês: <strong style={{ color: DS.colors.text }}>{fmtEscalaMoney(totalCache)}</strong>
                </div>
              )}
            </div>

            {escalas.length === 0
              ? <EmptyState icon="users" title="Ninguém escalado ainda" desc="Escale a equipe para que ela veja a ação no app do promotor." />
              : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {escalas.map(e => {
                    const f = freelancerPorId[e.freelancer_id];
                    return (
                      <div key={e.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={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                            <Avatar name={f?.name || '?'} size={30} />
                            <div style={{ minWidth: 0 }}>
                              <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{f?.name || `Freelancer #${e.freelancer_id}`}</div>
                              <div style={{ fontSize: 11, color: DS.colors.textMuted }}>
                                {e.funcao} · {fmtEscalaMoney(e.cache)}
                                {e.prazo_pagamento ? ` · ${e.prazo_pagamento}` : ''}
                                {f && !f.auth_user_id ? ' · sem acesso ao app' : ''}
                              </div>
                            </div>
                          </div>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            <Badge variant={ESCALA_STATUS_VARIANT[e.status] || 'default'}>{e.status}</Badge>
                            <Btn size="sm" variant="ghost" icon="trash" onClick={() => handleRemover(e)}>Remover</Btn>
                          </div>
                        </div>
                        {(e.confirmado_em || e.check_in_em || e.check_out_em) && (
                          <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 6, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                            {e.confirmado_em && <span>Confirmou {fmtEscalaHora(e.confirmado_em)}</span>}
                            {e.check_in_em   && <span>Check-in {fmtEscalaHora(e.check_in_em)}</span>}
                            {e.check_out_em  && <span>Check-out {fmtEscalaHora(e.check_out_em)}</span>}
                            {e.houve_problema && <span style={{ color: DS.colors.danger }}>Problema: {e.problema_desc || 'relatado'}</span>}
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
          </div>

          <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>
  );
}

// ───────────────────────────────────────────────────────────
// Acompanhamento em tempo real — confirmacoes, check-ins, fotos, check-outs.
// ───────────────────────────────────────────────────────────
function PainelPromotores() {
  const [linhas, setLinhas] = React.useState([]);
  const [fotos, setFotos]   = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  const carregar = React.useCallback(async () => {
    const [{ data: es }, { data: fo }] = await Promise.all([
      sb.from('event_escalas')
        .select('*, events(name, event_date), freelancers(name)')
        .order('created_at', { ascending: false })
        .limit(100),
      sb.from('escala_fotos').select('*').order('enviada_em', { ascending: false }).limit(60),
    ]);
    setLinhas(es || []);
    setFotos(fo || []);
    setLoading(false);
  }, []);

  React.useEffect(() => {
    carregar();
    const channel = sb.channel('escalas-painel')
      .on('postgres_changes', { event: '*', schema: 'public', table: 'event_escalas' }, carregar)
      .on('postgres_changes', { event: '*', schema: 'public', table: 'escala_fotos' }, carregar)
      .subscribe();
    return () => { sb.removeChannel(channel); };
  }, [carregar]);

  const fotosPorEscala = React.useMemo(() => {
    const map = {};
    fotos.forEach(f => { (map[f.escala_id] = map[f.escala_id] || []).push(f); });
    return map;
  }, [fotos]);

  const stats = React.useMemo(() => ({
    confirmados: linhas.filter(l => l.confirmado_em).length,
    checkins:    linhas.filter(l => l.check_in_em).length,
    checkouts:   linhas.filter(l => l.check_out_em).length,
    problemas:   linhas.filter(l => l.houve_problema).length,
  }), [linhas]);

  if (loading) return <Spinner />;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
        {[
          { label: 'Presenças confirmadas', value: stats.confirmados, color: DS.colors.primary },
          { label: 'Check-ins', value: stats.checkins, color: DS.colors.warning },
          { label: 'Check-outs', value: stats.checkouts, color: DS.colors.success },
          { label: 'Com problema', value: stats.problemas, color: DS.colors.danger },
        ].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>

      <Card>
        {linhas.length === 0
          ? <EmptyState icon="users" title="Nenhuma escala ainda" desc="Escale a equipe dentro de um evento na Agenda." />
          : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {linhas.map((l, i) => {
                const fs = fotosPorEscala[l.id] || [];
                return (
                  <div key={l.id} style={{ padding: '12px 20px', borderBottom: i < linhas.length - 1 ? `1px solid ${DS.colors.border}` : 'none' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                        <Avatar name={l.freelancers?.name || '?'} size={30} />
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontSize: 13, fontWeight: 700, color: DS.colors.text }}>{l.freelancers?.name || '—'}</div>
                          <div style={{ fontSize: 11, color: DS.colors.textMuted }}>
                            {l.events?.name || '—'} · {l.funcao} · {fmtEscalaMoney(l.cache)}
                          </div>
                        </div>
                      </div>
                      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                        {fs.length > 0 && (
                          <span style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, color: DS.colors.textSec }}>
                            <Icon name="photo" size={13} color={DS.colors.textMuted} />{fs.length}
                          </span>
                        )}
                        <Badge variant={ESCALA_STATUS_VARIANT[l.status] || 'default'}>{l.status}</Badge>
                      </div>
                    </div>
                    {(l.confirmado_em || l.check_in_em || l.check_out_em || l.houve_problema) && (
                      <div style={{ fontSize: 11, color: DS.colors.textMuted, marginTop: 6, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                        {l.confirmado_em && <span>Confirmou {fmtEscalaHora(l.confirmado_em)}</span>}
                        {l.check_in_em   && <span>Check-in {fmtEscalaHora(l.check_in_em)}</span>}
                        {l.check_out_em  && <span>Check-out {fmtEscalaHora(l.check_out_em)}</span>}
                        {l.houve_problema && <span style={{ color: DS.colors.danger }}>Problema: {l.problema_desc || 'relatado'}</span>}
                        {l.observacao && <span>Obs: {l.observacao}</span>}
                      </div>
                    )}
                    {fs.length > 0 && (
                      <div style={{ display: 'flex', gap: 6, marginTop: 8, flexWrap: 'wrap' }}>
                        {fs.slice(0, 8).map(f => (
                          <a key={f.id} href={f.url} target="_blank" rel="noreferrer">
                            <img src={f.url} alt="" style={{ width: 48, height: 48, objectFit: 'cover', borderRadius: 6, border: `1px solid ${DS.colors.border}` }} />
                          </a>
                        ))}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )}
      </Card>
    </div>
  );
}

Object.assign(window, { EscalaEventoModal, PainelPromotores, ESCALA_FUNCOES, ESCALA_STATUS_VARIANT });