// ─── DIAGNÓSTICO PAGE ──────────────────────────────────────────────────────
// Evaluación de Madurez Digital para IA — 10 preguntas, captura de lead, dashboard

const QUIZ_QUESTIONS = [
  { category: "Almacenamiento", text: "¿Dónde y cómo gestionan actualmente la información de clientes, ventas e inventario?", options: [
    { text: "En hojas de cálculo aisladas (Excel) o papel.", points: 1 },
    { text: "En un software específico (CRM/ERP), pero algunas áreas siguen usando Excel.", points: 3 },
    { text: "En un sistema centralizado y en la nube, donde la información está unificada.", points: 5 }
  ]},
  { category: "Calidad", text: "Si extraes un reporte hoy, ¿qué tanta confianza tienes en que los datos son exactos?", options: [
    { text: "Poca. Hay datos duplicados, incompletos o desactualizados.", points: 1 },
    { text: "Media. Los datos son útiles, pero requieren limpieza manual antes de analizarse.", points: 3 },
    { text: "Alta. Los datos son precisos, estandarizados y se actualizan constantemente.", points: 5 }
  ]},
  { category: "Procesos", text: "¿Cómo se ejecutan los procesos clave de la empresa (ventas, operaciones, atención)?", options: [
    { text: "Cada persona lo hace a su manera; no hay documentación clara.", points: 1 },
    { text: "Están documentados, pero en la práctica hay excepciones y cuellos de botella frecuentes.", points: 3 },
    { text: "Están estructurados, documentados y el equipo los sigue rigurosamente.", points: 5 }
  ]},
  { category: "Carga Operativa", text: "¿Cuánto tiempo invierte el equipo en tareas operativas, como trasladar datos de un sistema a otro o armar reportes?", options: [
    { text: "Demasiado. El trabajo manual consume gran parte del día a día.", points: 1 },
    { text: "Moderado. Hay algunas automatizaciones básicas configuradas.", points: 3 },
    { text: "Mínimo. Las tareas repetitivas están automatizadas casi en su totalidad.", points: 5 }
  ]},
  { category: "Silos", text: "¿Cómo fluye la información entre los distintos departamentos (ej. Marketing, Ventas y Operaciones)?", options: [
    { text: "No fluye. Cada área tiene sus propios datos y están desconectadas.", points: 1 },
    { text: "Fluye con fricción. Se comparten reportes periódicos por correo o reuniones.", points: 3 },
    { text: "Fluye en tiempo real. Todos ven la misma información desde sus plataformas.", points: 5 }
  ]},
  { category: "Toma de Decisiones", text: "¿En qué se basan las decisiones estratégicas actuales de la dirección?", options: [
    { text: "En la intuición y la experiencia del equipo directivo.", points: 1 },
    { text: "En reportes históricos o 'post-mortem' (qué pasó el mes anterior).", points: 3 },
    { text: "En paneles de inteligencia de negocios (Dashboards) con datos en tiempo real.", points: 5 }
  ]},
  { category: "Cultura", text: "¿Cómo reacciona el equipo frente a la adopción de nuevas herramientas digitales?", options: [
    { text: "Hay mucha resistencia al cambio y cuesta que dejen de usar sus métodos tradicionales.", points: 1 },
    { text: "Hay disposición, pero requieren mucho acompañamiento porque la curva de aprendizaje es lenta.", points: 3 },
    { text: "Son proactivos, se adaptan rápido a plataformas intuitivas y buscan optimizar su trabajo.", points: 5 }
  ]},
  { category: "Talento", text: "¿Cuentan en el equipo con personas capaces de interpretar datos o gestionar la tecnología actual?", options: [
    { text: "No, la tecnología es un dolor de cabeza para todos.", points: 1 },
    { text: "Sí, hay una o dos personas clave que entienden los sistemas.", points: 3 },
    { text: "Sí, existe una cultura general de aprovechamiento tecnológico y análisis de datos.", points: 5 }
  ]},
  { category: "Estrategia", text: "¿Cuál es el objetivo principal de querer implementar Inteligencia Artificial ahora?", options: [
    { text: "Porque es la tendencia y queremos modernizarnos.", points: 1 },
    { text: "Para resolver un problema puntual y aislado en un departamento.", points: 3 },
    { text: "Para escalar operaciones, eliminar carga operativa y generar ventajas competitivas medibles.", points: 5 }
  ]},
  { category: "Inversión", text: "¿Cómo percibe la empresa la inversión tecnológica?", options: [
    { text: "Como un gasto necesario y costoso que se debe minimizar.", points: 1 },
    { text: "Invierten en licencias, pero no en optimizar o conectar las herramientas.", points: 3 },
    { text: "Como un aliado estratégico; hay presupuesto para herramientas, integración y capacitación.", points: 5 }
  ]}
];

// Configuración del Webhook para Zoho CRM (reemplazar con la URL real en producción)
const QUIZ_WEBHOOK_URL = "https://flow.zoho.com/888033317/flow/webhook/incoming?zapikey=1001.2ed58c2ccd0c3d3228b62f98ad5de5d4.edb123acfecde0afcd1f643532d8161f&isdebug=false";

const DiagnosticoPage = ({ navigate }) => {
  const [view, setView] = React.useState('quiz'); // 'quiz' | 'lead' | 'results'
  const [currentQ, setCurrentQ] = React.useState(0);
  const [answers, setAnswers] = React.useState(() => new Array(QUIZ_QUESTIONS.length).fill(null));
  const [score, setScore] = React.useState(0);
  const [lead, setLead] = React.useState({ name: '', email: '', company: '', jobTitle: '' });
  const [submitting, setSubmitting] = React.useState(false);

  const q = QUIZ_QUESTIONS[currentQ];
  const answeredCurrent = answers[currentQ];
  const percent = Math.round(((currentQ + 1) / QUIZ_QUESTIONS.length) * 100);
  const isLast = currentQ === QUIZ_QUESTIONS.length - 1;

  const selectOption = (optionIndex, points) => {
    const next = [...answers];
    next[currentQ] = { optionIndex, points };
    setAnswers(next);
    setTimeout(() => {
      if (currentQ < QUIZ_QUESTIONS.length - 1) {
        setCurrentQ(currentQ + 1);
      } else {
        // Última pregunta → ir directo al formulario
        const total = next.reduce((s, a) => s + (a ? a.points : 0), 0);
        setScore(total);
        setView('lead');
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    }, 320);
  };

  const goNext = () => {
    if (isLast) {
      // Calcular puntaje y pasar al formulario
      const total = answers.reduce((s, a) => s + (a ? a.points : 0), 0);
      setScore(total);
      setView('lead');
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      setCurrentQ(currentQ + 1);
    }
  };

  const goBack = () => {
    if (currentQ > 0) setCurrentQ(currentQ - 1);
  };

  const submitLead = (e) => {
    e.preventDefault();
    setSubmitting(true);

    const leadData = {
      Nombre: lead.name,
      Correo: lead.email,
      Empresa: lead.company,
      Cargo: lead.jobTitle,
      Puntaje_Madurez_Digital: score,
      Origen: "Evaluación Web AI"
    };

    const showResults = () => {
      setSubmitting(false);
      setView('results');
      window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    // Zoho Flow webhook desde el navegador: usamos URLSearchParams (form-urlencoded)
    // que es un "simple request" y no requiere preflight CORS. Si enviamos JSON
    // con no-cors, el body se descarta silenciosamente.
    const params = new URLSearchParams();
    Object.entries(leadData).forEach(([k, v]) => params.append(k, String(v)));

    fetch(QUIZ_WEBHOOK_URL, {
      method: 'POST',
      mode: 'no-cors',
      body: params
    })
      .then(() => showResults())
      .catch((err) => { console.warn('Webhook fallback:', err); showResults(); });
  };

  const restart = () => {
    setView('quiz');
    setCurrentQ(0);
    setAnswers(new Array(QUIZ_QUESTIONS.length).fill(null));
    setScore(0);
    setLead({ name: '', email: '', company: '', jobTitle: '' });
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  // ─── Lógica de resultados ─────────────────────────────────────────────────
  const getResultData = () => {
    let level, color, title, desc, diag, actions;
    if (score <= 22) {
      level = 'explorador';
      color = '#EF4444';
      title = 'Nivel Explorador (Fase de Digitalización)';
      desc = 'La empresa se encuentra dando sus primeros pasos digitales. Introducir Inteligencia Artificial en este punto equivaldría a automatizar el caos.';
      diag = 'Tu prioridad absoluta debe ser estructurar los cimientos del negocio. Los datos están dispersos y la carga operativa manual es crítica, lo que impide que cualquier modelo de IA aprenda de información confiable.';
      actions = [
        '<strong>Centralización urgente:</strong> Migrar la información de hojas de cálculo sueltas o papel hacia un sistema estructurado en la nube (CRM o ERP intuitivo).',
        '<strong>Mapeo de procesos:</strong> Documentar cómo se ejecutan las ventas y operaciones clave antes de intentar configurar herramientas avanzadas.',
        '<strong>Evitar herramientas complejas:</strong> No invertir en licencias sofisticadas de IA por el momento; prefiere plataformas que tengan una curva de aprendizaje corta para el equipo.'
      ];
    } else if (score <= 38) {
      level = 'transicion';
      color = '#F59E0B';
      title = 'Nivel Transición (Fase de Automatización)';
      desc = 'La empresa ya utiliza herramientas digitales y valora la información, pero opera en silos desconectados y mantiene procesos con alta fricción operativa.';
      diag = 'Estás en el punto óptimo para limpiar, conectar y preparar el terreno. El equipo tiene la disposición pero los datos requieren manipulación manual recurrente y las áreas no conversan en tiempo real.';
      actions = [
        '<strong>Integración de plataformas:</strong> Conectar las herramientas actuales (Ventas, Marketing, Operaciones) mediante integraciones limpias o scripts personalizados para eliminar flujos de datos manuales.',
        '<strong>Higiene de datos:</strong> Establecer reglas claras de estandarización para evitar registros duplicados o incompletos.',
        '<strong>Business Intelligence básico:</strong> Implementar tableros de control (Dashboards) centralizados para que la dirección empiece a tomar decisiones basadas en datos en tiempo real y no en reportes históricos del mes pasado.'
      ];
    } else {
      level = 'driven';
      color = '#10B981';
      title = 'Nivel Data-Driven (Listos para IA)';
      desc = 'La empresa cuenta con procesos robustos, datos centralizados y un equipo con una mentalidad proactiva hacia la tecnología.';
      diag = '¡Escenario ideal para el despliegue de IA! Cuentas con la infraestructura necesaria para que los algoritmos aporten un valor real inmediato, automatizando decisiones complejas o prediciendo comportamientos del mercado.';
      actions = [
        '<strong>Despliegue de IA enfocado al Core:</strong> Implementar modelos de Machine Learning o analítica predictiva directamente sobre tus datos centralizados para optimizar conversiones o inventarios.',
        '<strong>Automatización inteligente profunda:</strong> Diseñar flujos de trabajo autónomos que eliminen los últimos rastros de operatividad repetitiva del equipo.',
        '<strong>Escalamiento ágil:</strong> Utilizar el alto entendimiento digital del talento interno para liderar proyectos experimentales de IA generativa aplicada al negocio de manera controlada y medible.'
      ];
    }

    // Acciones críticas adicionales
    if (answers[3] && answers[3].points === 1) {
      actions.push('<strong>Acción Crítica por Alta Carga Operativa:</strong> Diseñar automatizaciones iniciales para transferencias de datos repetitivas antes de introducir soluciones de IA complejas.');
    }
    if (answers[4] && answers[4].points === 1) {
      actions.push('<strong>Acción Crítica por Desconexión:</strong> Unificar la visibilidad de los datos de marketing y ventas en un panel compartido para romper el aislamiento operativo.');
    }

    return { level, color, title, desc, diag, actions };
  };

  // ─── Render: QUIZ ─────────────────────────────────────────────────────────
  const renderQuiz = () => (
    <React.Fragment>
      {/* Progress */}
      <div style={{ marginBottom: 32 }}>
        <div style={{ background: 'var(--border)', height: 6, borderRadius: 3, overflow: 'hidden', marginBottom: 10 }}>
          <div style={{ height: '100%', width: percent + '%', background: 'var(--teal)', transition: 'width 0.35s ease', boxShadow: '0 0 12px rgba(26,171,181,0.5)' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--gray-300)' }}>
          <span style={{ color: 'var(--teal)', fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', fontSize: 11 }}>
            {q.category} · Pregunta {currentQ + 1} de {QUIZ_QUESTIONS.length}
          </span>
          <span>{percent}%</span>
        </div>
      </div>

      {/* Question */}
      <div key={currentQ} className="quiz-fade">
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(22px, 3vw, 30px)', lineHeight: 1.25, marginBottom: 28, letterSpacing: '-0.01em' }}>
          {q.text}
        </h2>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 32 }}>
          {q.options.map((opt, oIdx) => {
            const isSel = answeredCurrent && answeredCurrent.optionIndex === oIdx;
            return (
              <button key={oIdx} type="button" onClick={() => selectOption(oIdx, opt.points)} style={{
                display: 'flex', alignItems: 'flex-start', gap: 16,
                background: isSel ? 'rgba(26,171,181,0.12)' : 'rgba(255,255,255,0.02)',
                border: `1.5px solid ${isSel ? 'var(--teal)' : 'var(--border)'}`,
                padding: '18px 22px', borderRadius: 12,
                cursor: 'pointer',
                textAlign: 'left', fontFamily: 'inherit', color: 'inherit',
                transition: 'all 0.2s ease',
                boxShadow: isSel ? '0 0 0 4px rgba(26,171,181,0.08)' : 'none'
              }}>
                <span style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: isSel ? 'var(--teal)' : 'transparent',
                  border: `1.5px solid ${isSel ? 'var(--teal)' : 'var(--gray-500)'}`,
                  color: isSel ? 'var(--navy)' : 'var(--gray-300)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 13, flexShrink: 0, transition: 'all 0.2s'
                }}>
                  {String.fromCharCode(65 + oIdx)}
                </span>
                <span style={{ fontSize: 15, lineHeight: 1.55, color: isSel ? 'var(--white)' : 'var(--gray-300)' }}>{opt.text}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Nav */}
      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <button className="btn-ghost" onClick={goBack} disabled={currentQ === 0} style={{ opacity: currentQ === 0 ? 0.4 : 1, cursor: currentQ === 0 ? 'not-allowed' : 'pointer' }}>
          ← Atrás
        </button>
        <button className="btn-primary" onClick={goNext} disabled={!answeredCurrent} style={{ opacity: !answeredCurrent ? 0.4 : 1, cursor: !answeredCurrent ? 'not-allowed' : 'pointer' }}>
          {isLast ? 'Continuar' : 'Siguiente'} →
        </button>
      </div>
    </React.Fragment>
  );

  // ─── Render: LEAD FORM ────────────────────────────────────────────────────
  const renderLeadForm = () => (
    <div className="quiz-fade">
      <div style={{ textAlign: 'center', marginBottom: 32 }}>
        <div className="section-label" style={{ justifyContent: 'center' }}>Casi listo</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 40px)', marginBottom: 12 }}>
          Recibe tu <span style={{ color: 'var(--teal)' }}>diagnóstico</span>
        </h2>
        <p style={{ color: 'var(--gray-300)', fontSize: 15, lineHeight: 1.6, maxWidth: 460, margin: '0 auto' }}>
          Necesitamos unos datos para enviarte tu diagnóstico completo y un plan de acción a la medida de tu empresa.
        </p>
      </div>

      <form onSubmit={submitLead} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {[
          { key: 'name', label: 'Nombre completo', placeholder: 'Ej. Juan Pérez', type: 'text' },
          { key: 'email', label: 'Correo electrónico', placeholder: 'ejemplo@empresa.com', type: 'email' },
          { key: 'company', label: 'Empresa', placeholder: 'Nombre de tu empresa', type: 'text' },
          { key: 'jobTitle', label: 'Cargo', placeholder: 'Ej. Gerente de Operaciones', type: 'text' }
        ].map(f => (
          <div key={f.key}>
            <label style={{ display: 'block', fontSize: 12, fontWeight: 700, color: 'var(--teal)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{f.label} *</label>
            <input
              type={f.type} required placeholder={f.placeholder}
              value={lead[f.key]}
              onChange={(e) => setLead({ ...lead, [f.key]: e.target.value })}
              style={{ width: '100%', background: 'var(--navy)', border: '1.5px solid var(--border)', borderRadius: 10, padding: '13px 16px', color: 'var(--white)', fontSize: 15, fontFamily: 'inherit', outline: 'none', transition: 'border-color 0.2s' }}
              onFocus={(e) => e.target.style.borderColor = 'var(--teal)'}
              onBlur={(e) => e.target.style.borderColor = 'var(--border)'}
            />
          </div>
        ))}
        <button type="submit" className="btn-primary" disabled={submitting} style={{ width: '100%', marginTop: 8, padding: '14px 24px', opacity: submitting ? 0.7 : 1 }}>
          {submitting ? 'Procesando…' : 'Ver mis resultados →'}
        </button>
      </form>
    </div>
  );

  // ─── Render: RESULTS ──────────────────────────────────────────────────────
  const renderResults = () => {
    const r = getResultData();
    return (
      <div className="quiz-fade">
        {/* Score circle */}
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <div style={{
            width: 160, height: 160, borderRadius: '50%',
            border: `4px solid ${r.color}`,
            background: `radial-gradient(circle, ${r.color}1a 0%, transparent 70%)`,
            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto 24px',
            boxShadow: `0 0 40px ${r.color}33`
          }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 56, color: 'var(--white)', lineHeight: 1 }}>{score}</span>
            <span style={{ fontSize: 12, color: 'var(--gray-300)', marginTop: 4, letterSpacing: '0.05em' }}>de 50 pts</span>
          </div>
          <div style={{
            display: 'inline-block',
            padding: '8px 20px',
            background: `${r.color}22`,
            border: `1px solid ${r.color}`,
            color: r.color,
            borderRadius: 100,
            fontWeight: 700,
            fontSize: 14,
            letterSpacing: '0.02em',
            marginBottom: 20
          }}>
            {r.title}
          </div>
          <p style={{ color: 'var(--gray-300)', fontSize: 15, lineHeight: 1.7, maxWidth: 560, margin: '0 auto' }}>{r.desc}</p>
        </div>

        {/* Diagnóstico */}
        <div className="card" style={{ marginBottom: 20 }}>
          <div className="section-label" style={{ marginBottom: 14 }}>Diagnóstico estratégico</div>
          <p style={{ color: 'var(--gray-300)', fontSize: 15, lineHeight: 1.75 }}>{r.diag}</p>
        </div>

        {/* Action plan */}
        <div className="card" style={{ marginBottom: 32 }}>
          <div className="section-label" style={{ marginBottom: 20 }}>Plan de acción recomendado</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {r.actions.map((act, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '12px 0', borderBottom: i < r.actions.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <span style={{
                  flexShrink: 0,
                  width: 28, height: 28, borderRadius: 8,
                  background: 'rgba(26,171,181,0.12)',
                  color: 'var(--teal)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 13
                }}>{i + 1}</span>
                <span style={{ color: 'var(--gray-300)', fontSize: 14, lineHeight: 1.65 }} dangerouslySetInnerHTML={{ __html: act }} />
              </div>
            ))}
          </div>
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn-primary" onClick={() => navigate('contact')}>Agendar consultoría →</button>
          <button className="btn-ghost" onClick={restart}>Repetir evaluación</button>
        </div>
      </div>
    );
  };

  // ─── Layout ───────────────────────────────────────────────────────────────
  return (
    <div className="page-enter">
      <section style={{ paddingTop: 140, paddingBottom: 80, background: 'var(--navy-mid)', position: 'relative', overflow: 'hidden' }}>
        {/* Background orbs */}
        <div style={{
          position: 'absolute', width: 500, height: 500, borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(26,171,181,0.08) 0%, transparent 70%)',
          top: '-100px', right: '-100px', pointerEvents: 'none'
        }} />

        {view === 'quiz' && (
          <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 32px', textAlign: 'center', marginBottom: 48 }}>
            <div className="section-label" style={{ justifyContent: 'center' }}>Diagnóstico gratuito</div>
            <h1 className="section-title" style={{ marginBottom: 16 }}>
              Madurez Digital para <span className="accent">IA</span>
            </h1>
            <p style={{ color: 'var(--gray-300)', fontSize: 17, maxWidth: 560, margin: '0 auto', lineHeight: 1.65 }}>
              Evalúa el estado de tu empresa antes de implementar Inteligencia Artificial. <strong style={{ color: 'var(--white)' }}>10 preguntas · 3 minutos.</strong>
            </p>
          </div>
        )}

        <div className="card" style={{ maxWidth: 760, margin: '0 32px', marginLeft: 'auto', marginRight: 'auto', padding: 'clamp(28px, 4vw, 48px)', position: 'relative', zIndex: 1 }}>
          {view === 'quiz' && renderQuiz()}
          {view === 'lead' && renderLeadForm()}
          {view === 'results' && renderResults()}
        </div>
      </section>
    </div>
  );
};

window.DiagnosticoPage = DiagnosticoPage;
