const { useState: useAdSt, useEffect: useAdEff, useContext: useAdCtx, useMemo: useAdMemo } = React;

/* Mapa de chaves do JSONB → label legível para o CSV/UI */
const ONBOARDING_LABELS = {
  valor_ganha:         'Quanto ganha (R$)',
  valor_deseja:        'Quanto deseja (R$)',
  valor_sessao:        'Valor sessão (R$)',
  valor_maximo:        'Máximo já ganho (R$)',
  ano_formacao:        'Ano formação',
  ano_clinica:         'Ano clínica',
  horas_trabalha:      'Horas/semana',
  outra_atividade:     'Outra atividade',
  abordagem:           'Abordagem',
  consultorio:         'Consultório próprio',
  convenios:           'Aceita convênios',
  publico:             'Público',
  nicho:               'Nicho',
  rede_social:         'Rede social',
  dificuldade_digital: 'Dificuldade digital',
  expectativa:         'Expectativa da mentoria',
  comprometimento:     'Comprometimento (0-10)',
  familia:             'Família',
};

const ONBOARDING_KEYS = Object.keys(ONBOARDING_LABELS);

/* ── Formata uma linha em CSV (escapa aspas) ──────────────────────── */
const csvCell = (v) => {
  if (v == null) return '';
  if (Array.isArray(v)) v = v.join(', ');
  const s = String(v);
  return /[",\n;]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
};

const downloadCsv = (rows) => {
  const headers = ['Nome', 'E-mail', 'Data', ...ONBOARDING_KEYS.map(k => ONBOARDING_LABELS[k])];
  const lines = [headers.map(csvCell).join(',')];
  rows.forEach(r => {
    const onb = r.onboarding || {};
    const row = [
      r.name || '',
      r.email || '',
      r.updated_at ? new Date(r.updated_at).toLocaleString('pt-BR') : '',
      ...ONBOARDING_KEYS.map(k => onb[k] ?? ''),
    ];
    lines.push(row.map(csvCell).join(','));
  });
  /* BOM pra Excel reconhecer UTF-8 (acentos) */
  const csv = '' + lines.join('\n');
  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `onboarding_${new Date().toISOString().slice(0, 10)}.csv`;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
};

/* ── Tela admin ──────────────────────────────────────────────────── */
const AdminOnboardingPage = ({ onBack }) => {
  const { user } = useAdCtx(UserCtx);
  const { theme, toggleTheme } = useAdCtx(ThemeCtx);
  const isMob = typeof useIsMobile === 'function' ? useIsMobile() : false;

  const [rows, setRows]     = useAdSt([]);
  const [loading, setLoading] = useAdSt(true);
  const [error, setError]   = useAdSt('');
  const [filter, setFilter] = useAdSt('');
  const [sortBy, setSortBy] = useAdSt('recent'); // 'recent' | 'comp_desc' | 'comp_asc'
  const [selected, setSelected] = useAdSt(null);

  /* Carrega dados via RPC SECURITY DEFINER (server-side checa admin) */
  useAdEff(() => {
    let cancel = false;
    setLoading(true);
    _supabase.rpc('get_onboarding_responses').then(({ data, error: err }) => {
      if (cancel) return;
      if (err) {
        console.error('[admin onboarding]', err);
        setError(err.message || 'Erro ao carregar respostas');
        setRows([]);
      } else {
        setRows(Array.isArray(data) ? data : []);
        setError('');
      }
      setLoading(false);
    });
    return () => { cancel = true; };
  }, []);

  /* Busca por nome/email + ordenação por comprometimento ou data */
  const filtered = useAdMemo(() => {
    const q = filter.trim().toLowerCase();
    let list = !q ? rows : rows.filter(r =>
      (r.name || '').toLowerCase().includes(q) ||
      (r.email || '').toLowerCase().includes(q)
    );

    const compOf = (r) => {
      const v = r?.onboarding?.comprometimento;
      const n = parseInt(v, 10);
      return isNaN(n) ? -1 : n;
    };

    if (sortBy === 'comp_desc') {
      list = [...list].sort((a, b) => compOf(b) - compOf(a));
    } else if (sortBy === 'comp_asc') {
      list = [...list].sort((a, b) => compOf(a) - compOf(b));
    } else {
      /* 'recent' — mais recentes primeiro (default vindo do RPC já vem assim) */
      list = [...list].sort((a, b) => {
        const ta = a.updated_at ? new Date(a.updated_at).getTime() : 0;
        const tb = b.updated_at ? new Date(b.updated_at).getTime() : 0;
        return tb - ta;
      });
    }

    return list;
  }, [rows, filter, sortBy]);

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--bg)', color: 'var(--text)',
      paddingBottom: isMob ? 90 : 40,
    }}>
      {/* Conteúdo */}
      <div style={{
        maxWidth: 1080, margin: '0 auto',
        padding: isMob ? '20px 16px 40px' : '32px 24px 60px',
      }}>

        {/* Voltar — só no mobile, leva pro dashboard */}
        {isMob && (
          <button
            onClick={onBack}
            style={{
              background: 'none', color: 'var(--text2)', fontSize: 13,
              padding: '4px 8px 4px 0',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              marginBottom: 24, fontFamily: 'inherit',
            }}
          >
            ← Voltar
          </button>
        )}

        {/* Marca centralizada */}
        <p style={{
          fontSize: 11, fontWeight: 600, color: 'var(--gold)',
          letterSpacing: '0.18em', textTransform: 'uppercase',
          textAlign: 'center',
          marginBottom: isMob ? 32 : 24,
        }}>
          Descomplicando a Clínica
        </p>

        {/* Header */}
        <div style={{ marginBottom: isMob ? 36 : 28, textAlign: 'center' }}>
          <h1 style={{
            fontSize: isMob ? 22 : 28, fontWeight: 700, color: 'var(--text)',
            marginBottom: isMob ? 12 : 8, letterSpacing: '-0.01em',
          }}>
            Onboarding das alunas
          </h1>
          <p style={{ fontSize: 14, color: 'var(--text2)' }}>
            {loading ? 'Carregando...' :
              error    ? error :
              `${rows.length} ${rows.length === 1 ? 'aluna respondeu' : 'alunas responderam'}`}
          </p>
        </div>

        {/* Toolbar */}
        <div style={{
          display: 'flex', gap: isMob ? 14 : 10, marginBottom: isMob ? 28 : 18,
          flexDirection: isMob ? 'column' : 'row',
        }}>
          <input
            type="text"
            placeholder="Buscar por nome ou e-mail..."
            value={filter}
            onChange={e => setFilter(e.target.value)}
            style={{
              flex: 1, height: 42, minWidth: 0,
              background: 'var(--card)', border: '1px solid var(--border)',
              borderRadius: 9, padding: '0 14px',
              fontSize: 14, color: 'var(--text)', fontFamily: 'inherit', outline: 'none',
            }}
          />

          {/* Filtro de ordenação */}
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <select
              value={sortBy}
              onChange={e => setSortBy(e.target.value)}
              style={{
                height: 42,
                background: 'var(--card)', border: '1px solid var(--border)',
                borderRadius: 9, padding: '0 36px 0 14px',
                fontSize: 13.5, color: 'var(--text)', fontFamily: 'inherit',
                outline: 'none', cursor: 'pointer',
                appearance: 'none', WebkitAppearance: 'none', MozAppearance: 'none',
                minWidth: 220,
              }}
            >
              <option value="recent">Mais recentes primeiro</option>
              <option value="comp_desc">Maior comprometimento</option>
              <option value="comp_asc">Menor comprometimento</option>
            </select>
            {/* Setinha custom */}
            <span style={{
              position: 'absolute', right: 12, top: '50%',
              transform: 'translateY(-50%)', pointerEvents: 'none',
              color: 'var(--text2)', fontSize: 11,
            }}>▼</span>
          </div>

          <button
            onClick={() => downloadCsv(filtered)}
            disabled={filtered.length === 0}
            style={{
              background: 'var(--gold)', color: '#0A0A0A',
              padding: '0 22px', height: 42, borderRadius: 9,
              fontSize: 13, fontWeight: 700, letterSpacing: '0.02em',
              display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
              opacity: filtered.length === 0 ? 0.5 : 1,
              cursor: filtered.length === 0 ? 'not-allowed' : 'pointer',
            }}
          >
            <IconDownload size={14}/>
            Baixar CSV ({filtered.length})
          </button>
        </div>

        {/* Lista */}
        {loading && (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--text3)' }}>
            Carregando respostas…
          </div>
        )}

        {!loading && !error && filtered.length === 0 && (
          <div style={{
            padding: '60px 24px', textAlign: 'center',
            background: 'var(--card)', border: '1px solid var(--border)',
            borderRadius: 12, color: 'var(--text3)', fontSize: 14,
          }}>
            {rows.length === 0
              ? 'Ainda ninguém respondeu o questionário.'
              : 'Nenhum resultado para esse filtro.'}
          </div>
        )}

        {!loading && filtered.length > 0 && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {filtered.map(r => {
              const onb = r.onboarding || {};
              return (
                <button
                  key={r.id}
                  onClick={() => setSelected(r)}
                  style={{
                    textAlign: 'left', cursor: 'pointer',
                    background: 'var(--card)', border: '1px solid var(--border)',
                    borderRadius: 10, padding: '14px 18px',
                    display: 'flex', alignItems: 'center', gap: 14,
                    transition: 'border-color 0.15s, background 0.15s',
                    fontFamily: 'inherit',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-h)'; }}
                  onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}
                >
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <p style={{
                      fontSize: 14.5, fontWeight: 600, color: 'var(--text)',
                      marginBottom: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>
                      {r.name || '(sem nome)'}
                    </p>
                    <p style={{
                      fontSize: 12, color: 'var(--text2)',
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                    }}>
                      {r.email}
                    </p>
                  </div>
                  {onb.comprometimento != null && (
                    <div style={{
                      flexShrink: 0, padding: '4px 10px', borderRadius: 6,
                      background: 'var(--gold-bg)', border: '1px solid var(--border-h)',
                      fontSize: 11, fontWeight: 700, color: 'var(--gold)',
                      letterSpacing: '0.04em',
                    }}>
                      Comp. {onb.comprometimento}/10
                    </div>
                  )}
                  <span style={{ color: 'var(--text3)', flexShrink: 0 }}>
                    <IconChevron size={14}/>
                  </span>
                </button>
              );
            })}
          </div>
        )}
      </div>

      {/* Modal de detalhes */}
      {selected && (
        <div
          onClick={() => setSelected(null)}
          style={{
            position: 'fixed', inset: 0, zIndex: 1000,
            background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(6px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            padding: 16,
          }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{
              width: '100%', maxWidth: 640, maxHeight: '90vh',
              background: 'var(--card)', border: '1px solid var(--border-h)',
              borderRadius: 14, overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
            }}
          >
            {/* Header */}
            <div style={{
              padding: '20px 22px', borderBottom: '1px solid var(--border)',
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <p style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)', marginBottom: 3 }}>
                  {selected.name || '(sem nome)'}
                </p>
                <p style={{ fontSize: 12, color: 'var(--text2)' }}>
                  {selected.email}
                </p>
              </div>
              <button onClick={() => setSelected(null)} style={{
                width: 32, height: 32, borderRadius: '50%',
                background: 'var(--bg2)', border: '1px solid var(--border)',
                color: 'var(--text2)', fontSize: 16, lineHeight: 1,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>✕</button>
            </div>

            {/* Respostas */}
            <div style={{ flex: 1, overflowY: 'auto', padding: '4px 22px 20px' }}>
              {ONBOARDING_KEYS.map(key => {
                const value = selected.onboarding?.[key];
                const shown = Array.isArray(value) ? value.join(', ') : (value ?? '');
                return (
                  <div key={key} style={{
                    padding: '14px 0', borderBottom: '1px solid var(--border)',
                  }}>
                    <p style={{
                      fontSize: 11, fontWeight: 600, color: 'var(--text3)',
                      letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 4,
                    }}>
                      {ONBOARDING_LABELS[key]}
                    </p>
                    <p style={{
                      fontSize: 14, color: shown ? 'var(--text)' : 'var(--text3)',
                      lineHeight: 1.5, fontStyle: shown ? 'normal' : 'italic',
                      whiteSpace: 'pre-wrap', wordBreak: 'break-word',
                    }}>
                      {shown || '(não respondeu)'}
                    </p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

window.AdminOnboardingPage = AdminOnboardingPage;