// App do Promotor — PWA mobile, dentro do proprio PROMO UP 360. Orcamento 290.
//
// O promotor ve SOMENTE as acoes em que esta escalado (RLS da migration 027).
// Confirmar presenca / check-in / check-out passam pelas RPCs da migration 026,
// nunca por UPDATE direto — senao ele conseguiria mudar o proprio cache.
//
// Boa parte do detalhe da acao (traje, briefing, cronograma, endereco
// detalhado) vem do payload do Pedido de Producao (event_reports type='PP'),
// que ja existe no sistema. Por isso nao criamos colunas novas em events.

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

const fmtPromoData = (iso) => {
  if (!iso) return '—';
  const [y, m, d] = String(iso).split('-');
  return (y && m && d) ? `${d}/${m}/${y}` : iso;
};

const fmtPromoDataLonga = (iso) => {
  if (!iso) return '—';
  // 'T00:00:00' evita o deslocamento de um dia por UTC (padrao do projeto).
  return new Date(iso + 'T00:00:00').toLocaleDateString('pt-BR', { weekday: 'long', day: '2-digit', month: 'long' });
};

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

function PromotorApp({ session, freelancer }) {
  const [escalas, setEscalas] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [abertaId, setAbertaId] = React.useState(null);
  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, error } = await sb
      .from('event_escalas')
      .select('*, events(id, name, client_name, event_date, event_end_date, event_time, location, coordenador_contato)')
      .order('id', { ascending: false });
    if (error) console.error('[PromotorApp.carregar] Supabase error:', error);
    setEscalas(data || []);
    setLoading(false);
  }, []);

  React.useEffect(() => {
    carregar();
    sb.rpc('promotor_registrar_login').then(() => {});
  }, [carregar]);

  // Proximas primeiro; as sem data vao para o fim.
  const ordenadas = React.useMemo(() => {
    const copia = [...escalas];
    copia.sort((a, b) => {
      const da = a.events?.event_date || '9999-12-31';
      const db = b.events?.event_date || '9999-12-31';
      return da.localeCompare(db);
    });
    return copia;
  }, [escalas]);

  const hojeISO = new Date().toISOString().slice(0, 10);
  const proximas = ordenadas.filter(e => (e.events?.event_date || '9999-12-31') >= hojeISO);
  const passadas = ordenadas.filter(e => (e.events?.event_date || '9999-12-31') < hojeISO).reverse();

  const aberta = escalas.find(e => e.id === abertaId) || null;

  const atualizarEscala = (nova) => setEscalas(prev => prev.map(e => e.id === nova.id ? { ...e, ...nova } : e));

  const handleLogout = () => sb.auth.signOut();

  return (
    <div style={{
      minHeight: '100vh', background: DS.colors.bg, fontFamily: "'Inter', sans-serif",
      paddingBottom: 'calc(24px + env(safe-area-inset-bottom, 0px))',
    }}>
      {/* Topo */}
      <div style={{
        background: DS.colors.sidebar, color: '#fff',
        padding: `calc(14px + env(safe-area-inset-top, 0px)) 16px 14px`,
        position: 'sticky', top: 0, zIndex: 10,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        {aberta ? (
          <button onClick={() => setAbertaId(null)}
            style={{ border: 'none', background: 'rgba(255,255,255,0.12)', color: '#fff', width: 34, height: 34, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}>
            <Icon name="chevronLeft" size={18} color="#fff" />
          </button>
        ) : (
          <Avatar name={freelancer?.name || '?'} size={34} src={freelancer?.photo_url} />
        )}
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 800, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {aberta ? 'Detalhe da ação' : `Olá, ${(freelancer?.name || '').split(' ')[0] || 'promotor'}!`}
          </div>
          <div style={{ fontSize: 11, opacity: 0.7, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {aberta ? (aberta.events?.name || '') : 'Suas ações no PROMO UP 360'}
          </div>
        </div>
        <button onClick={handleLogout} title="Sair"
          style={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,0.7)', padding: 6, cursor: 'pointer', display: 'flex', flexShrink: 0 }}>
          <Icon name="logout" size={18} color="currentColor" />
        </button>
      </div>

      <div style={{ padding: 16, maxWidth: 560, margin: '0 auto' }}>
        {loading ? <Spinner /> : aberta
          ? <DetalheAcao escala={aberta} freelancer={freelancer} onChange={atualizarEscala} showToast={showToast} />
          : (
            <>
              {escalas.length === 0 && (
                <EmptyState icon="calendar" title="Nenhuma ação por enquanto"
                  desc="Quando você for escalado em uma ação, ela aparece aqui." />
              )}

              {proximas.length > 0 && (
                <>
                  <SecaoTitulo>Próximas ações</SecaoTitulo>
                  {proximas.map(e => <CardAcao key={e.id} escala={e} onOpen={() => setAbertaId(e.id)} />)}
                </>
              )}

              {passadas.length > 0 && (
                <>
                  <SecaoTitulo>Ações anteriores</SecaoTitulo>
                  {passadas.map(e => <CardAcao key={e.id} escala={e} onOpen={() => setAbertaId(e.id)} />)}
                </>
              )}
            </>
          )}
      </div>

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

function SecaoTitulo({ children }) {
  return (
    <div style={{ fontSize: 11, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', margin: '18px 0 10px' }}>
      {children}
    </div>
  );
}

function CardAcao({ escala, onOpen }) {
  const ev = escala.events || {};
  return (
    <Card hover onClick={onOpen} style={{ padding: 16, marginBottom: 10, cursor: 'pointer' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 8 }}>
        <div style={{ minWidth: 0 }}>
          <div style={{ fontSize: 15, fontWeight: 800, color: DS.colors.text }}>{ev.name || 'Ação'}</div>
          <div style={{ fontSize: 12, color: DS.colors.textSec, marginTop: 2 }}>{ev.client_name || '—'}</div>
        </div>
        <Badge variant={ESCALA_STATUS_VARIANT[escala.status] || 'default'}>{escala.status}</Badge>
      </div>
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', fontSize: 12, color: DS.colors.textSec }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
          <Icon name="calendar" size={13} color={DS.colors.textMuted} />{fmtPromoData(ev.event_date)}
        </span>
        {ev.event_time && (
          <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="clock" size={13} color={DS.colors.textMuted} />{ev.event_time}
          </span>
        )}
        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontWeight: 700, color: DS.colors.success }}>
          {fmtPromoMoney(escala.cache)}
        </span>
      </div>
    </Card>
  );
}

// ───────────────────────────────────────────────────────────
// Detalhe da acao + confirmar / check-in / fotos / check-out
// ───────────────────────────────────────────────────────────
function DetalheAcao({ escala, freelancer, onChange, showToast }) {
  const ev = escala.events || {};
  const [pp, setPp] = React.useState(null);
  const [fotos, setFotos] = React.useState([]);
  const [busy, setBusy] = React.useState(false);
  const [enviandoFoto, setEnviandoFoto] = React.useState(false);
  const [checkoutOpen, setCheckoutOpen] = React.useState(false);
  const [co, setCo] = React.useState({ realizada: true, houve_problema: false, problema_desc: '', observacao: '' });

  React.useEffect(() => {
    if (!ev.id) return;
    sb.from('event_reports').select('payload').eq('event_id', ev.id).eq('type', 'PP').maybeSingle()
      .then(({ data }) => setPp(data?.payload || null));
    sb.from('escala_fotos').select('*').eq('escala_id', escala.id).order('enviada_em', { ascending: false })
      .then(({ data }) => setFotos(data || []));
  }, [ev.id, escala.id]);

  const chamarRpc = async (fn, args, msgOk) => {
    setBusy(true);
    const { data, error } = await sb.rpc(fn, args);
    setBusy(false);
    if (error) {
      console.error(`[DetalheAcao.${fn}] Supabase error:`, error);
      showToast(error.message || 'Não foi possível concluir.', 'danger');
      return null;
    }
    const linha = Array.isArray(data) ? data[0] : data;
    if (linha) onChange(linha);
    showToast(msgOk);
    return linha;
  };

  const handleFoto = async (file) => {
    if (!file) return;
    setEnviandoFoto(true);
    try {
      const ext = (file.name.split('.').pop() || 'jpg').toLowerCase();
      const path = `escala_${escala.id}/${crypto.randomUUID()}.${ext}`;
      const { error: upErr } = await sb.storage.from('event-photos').upload(path, file, { contentType: file.type });
      if (upErr) throw upErr;
      const { data: { publicUrl } } = sb.storage.from('event-photos').getPublicUrl(path);
      const { data, error } = await sb.from('escala_fotos').insert({
        escala_id: escala.id,
        event_id: ev.id,
        freelancer_id: freelancer.id,
        url: publicUrl,
        storage_path: path,
      }).select().single();
      if (error) {
        await sb.storage.from('event-photos').remove([path]); // rollback
        throw error;
      }
      setFotos(prev => [data, ...prev]);
      showToast('Foto enviada!');
    } catch (err) {
      console.error('[DetalheAcao.handleFoto] error:', err);
      showToast('Erro ao enviar a foto.', 'danger');
    }
    setEnviandoFoto(false);
  };

  const confirmarCheckout = async () => {
    const ok = await chamarRpc('promotor_check_out', {
      p_escala_id: escala.id,
      p_realizada: co.realizada,
      p_houve_problema: co.houve_problema,
      p_problema_desc: co.houve_problema ? (co.problema_desc || null) : null,
      p_observacao: co.observacao || null,
    }, 'Check-out registrado. Obrigado!');
    if (ok) setCheckoutOpen(false);
  };

  const endereco = [ev.location, pp?.ponto_referencia, pp?.cidade_estado].filter(Boolean).join(' · ');
  const briefing = [pp?.objetivo, pp?.script, pp?.regras].filter(Boolean).join('\n\n');
  const horario = pp?.horario_inicio
    ? `${pp.horario_inicio}${pp.horario_fim ? ' às ' + pp.horario_fim : ''}`
    : (ev.event_time || '—');

  const linhas = [
    { icon: 'crm',       label: 'Cliente',   valor: ev.client_name },
    { icon: 'calendar',  label: 'Data',      valor: fmtPromoDataLonga(ev.event_date) },
    { icon: 'clock',     label: 'Horário',   valor: horario },
    { icon: 'map',       label: 'Endereço',  valor: endereco },
    { icon: 'users',     label: 'Traje',     valor: pp?.dress_code },
    { icon: 'phone',     label: 'Coordenador', valor: ev.coordenador_contato || pp?.equipe?.coordenador?.nome },
    { icon: 'wallet',    label: 'Cachê',     valor: fmtPromoMoney(escala.cache) + (escala.funcao ? ` · ${escala.funcao}` : '') },
    { icon: 'budget',    label: 'Prazo de pagamento', valor: escala.prazo_pagamento },
  ].filter(l => l.valor);

  const jaConfirmou = !!escala.confirmado_em;
  const jaCheckIn   = !!escala.check_in_em;
  const jaCheckOut  = !!escala.check_out_em;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <Card style={{ padding: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10, marginBottom: 12 }}>
          <div style={{ fontSize: 17, fontWeight: 800, color: DS.colors.text }}>{ev.name || 'Ação'}</div>
          <Badge variant={ESCALA_STATUS_VARIANT[escala.status] || 'default'}>{escala.status}</Badge>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {linhas.map(l => (
            <div key={l.label} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 28, height: 28, borderRadius: 8, background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name={l.icon} size={14} color={DS.colors.textMuted} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{l.label}</div>
                <div style={{ fontSize: 13, color: DS.colors.text, fontWeight: 600, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>{l.valor}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {briefing && (
        <Card style={{ padding: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>Briefing</div>
          <div style={{ fontSize: 13, color: DS.colors.textSec, lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{briefing}</div>
        </Card>
      )}

      {/* Acoes */}
      <Card style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {!jaConfirmou && !jaCheckOut && (
          <Btn size="lg" icon="check" disabled={busy}
            onClick={() => chamarRpc('promotor_confirmar_presenca', { p_escala_id: escala.id }, 'Presença confirmada!')}>
            Confirmar presença
          </Btn>
        )}
        {jaConfirmou && !jaCheckIn && (
          <Btn size="lg" icon="clock" disabled={busy}
            onClick={() => chamarRpc('promotor_check_in', { p_escala_id: escala.id }, 'Check-in registrado!')}>
            Fazer check-in
          </Btn>
        )}
        {jaCheckIn && !jaCheckOut && (
          <Btn size="lg" variant="success" icon="check" disabled={busy} onClick={() => setCheckoutOpen(true)}>
            Fazer check-out
          </Btn>
        )}
        {jaCheckOut && (
          <div style={{ fontSize: 13, color: DS.colors.success, fontWeight: 700, textAlign: 'center', padding: '6px 0' }}>
            Ação encerrada em {fmtPromoHora(escala.check_out_em)}
          </div>
        )}

        <label style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          border: `1px dashed ${DS.colors.border}`, borderRadius: DS.radius.sm,
          padding: '12px', cursor: enviandoFoto ? 'default' : 'pointer',
          fontSize: 13, fontWeight: 600, color: DS.colors.textSec,
        }}>
          {enviandoFoto ? <Spinner size={16} /> : <Icon name="photo" size={16} color={DS.colors.textMuted} />}
          {enviandoFoto ? 'Enviando…' : 'Enviar foto da ação'}
          <input type="file" accept="image/*" capture="environment" disabled={enviandoFoto}
            onChange={e => { handleFoto(e.target.files?.[0]); e.target.value = ''; }}
            style={{ display: 'none' }} />
        </label>

        {(escala.confirmado_em || escala.check_in_em) && (
          <div style={{ fontSize: 11, color: DS.colors.textMuted, textAlign: 'center' }}>
            {escala.confirmado_em && <>Confirmou {fmtPromoHora(escala.confirmado_em)}</>}
            {escala.check_in_em && <> · Check-in {fmtPromoHora(escala.check_in_em)}</>}
          </div>
        )}
      </Card>

      {fotos.length > 0 && (
        <Card style={{ padding: 16 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: DS.colors.textMuted, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            Fotos enviadas ({fotos.length})
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
            {fotos.map(f => (
              <a key={f.id} href={f.url} target="_blank" rel="noreferrer">
                <img src={f.url} alt="" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 8 }} />
              </a>
            ))}
          </div>
        </Card>
      )}

      {/* Check-out — formulario curto */}
      <Modal open={checkoutOpen} onClose={() => setCheckoutOpen(false)} title="Check-out" width={420}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textSec, marginBottom: 8 }}>A ação foi realizada?</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <Btn variant={co.realizada ? 'success' : 'secondary'} onClick={() => setCo(c => ({ ...c, realizada: true }))}>Sim</Btn>
              <Btn variant={!co.realizada ? 'danger' : 'secondary'} onClick={() => setCo(c => ({ ...c, realizada: false }))}>Não</Btn>
            </div>
          </div>

          <div>
            <div style={{ fontSize: 12, fontWeight: 700, color: DS.colors.textSec, marginBottom: 8 }}>Houve algum problema?</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <Btn variant={!co.houve_problema ? 'success' : 'secondary'} onClick={() => setCo(c => ({ ...c, houve_problema: false }))}>Não</Btn>
              <Btn variant={co.houve_problema ? 'danger' : 'secondary'} onClick={() => setCo(c => ({ ...c, houve_problema: true }))}>Sim</Btn>
            </div>
          </div>

          {co.houve_problema && (
            <Input label="Qual foi o problema?" value={co.problema_desc}
              onChange={v => setCo(c => ({ ...c, problema_desc: v }))} placeholder="Descreva rapidamente" />
          )}

          <Input label="Observação (opcional)" value={co.observacao}
            onChange={v => setCo(c => ({ ...c, observacao: v }))} placeholder="Algo que a produção precisa saber" />

          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
            <Btn variant="secondary" onClick={() => setCheckoutOpen(false)}>Cancelar</Btn>
            <Btn icon="check" onClick={confirmarCheckout} disabled={busy}>{busy ? 'Enviando…' : 'Encerrar ação'}</Btn>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Object.assign(window, { PromotorApp });