/* Screens — pure presentational components for each wizard step.
   Receives state + setters from app.jsx. */

const { useState, useEffect, useMemo } = React;

/* Render headline arrays with <em> emphasis */
function renderRich(parts) {
  if (typeof parts === 'string') return parts;
  return parts.map((p, i) =>
    typeof p === 'string' ? <React.Fragment key={i}>{p}</React.Fragment>
    : <em key={i}>{p.em}</em>
  );
}

function ArrowRight() {
  return (
    <svg className="btn-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function CheckIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 6.5l2.5 2.5L9.5 3.5" stroke="#1a0500" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* === Screen 1: pain hero === */
function ScreenPain1({ copy, onNext, btnShape }) {
  return (
    <div className="screen">
      <div className="eyebrow"><span className="dot"></span>{copy.eyebrow}</div>
      <h1 className="headline">{renderRich(copy.headline)}</h1>
      <p className="lede">{copy.lede}</p>
      <ul className="bullet-list">
        {copy.bullets.map((b, i) => (
          <li key={i} className="bullet-item">
            <span className="bullet-ic">
              <svg width="13" height="13" viewBox="0 0 12 12" fill="none">
                <path d="M2.5 6.5l2.5 2.5L9.5 3.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            <span>{b}</span>
          </li>
        ))}
      </ul>
      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} onClick={onNext}>
          {copy.cta} <ArrowRight />
        </button>
        <div className="fine">3 minutos · Gratis · Sin compromiso</div>
      </div>
    </div>
  );
}

/* === Screen 2: pain hero 2 / promise === */
function ScreenPain2({ copy, onNext, onBack, btnShape }) {
  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <div className="eyebrow"><span className="dot"></span>{copy.eyebrow}</div>
      <h1 className="headline">{renderRich(copy.headline)}</h1>
      <p className="lede">{copy.lede}</p>

      <ul className="point-list">
        {copy.points.map((p, i) => (
          <li key={i} className="point-item">
            <span className="point-ic">
              <svg width="15" height="15" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
            <span>{p}</span>
          </li>
        ))}
      </ul>

      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} onClick={onNext}>
          {copy.cta} <ArrowRight />
        </button>
      </div>
    </div>
  );
}

/* === Q1: multi-select areas === */
function ScreenAreas({ copy, value, onChange, onNext, onBack, btnShape }) {
  const toggle = (id) => {
    onChange(value.includes(id) ? value.filter(v => v !== id) : [...value, id]);
  };
  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <h2 className="q-title">{renderRich(copy.title)}</h2>
      <p className="q-sub">{copy.sub}</p>
      <div className="choices">
        {copy.options.map((o) => (
          <button
            key={o.id}
            type="button"
            className={`choice ${value.includes(o.id) ? 'is-selected' : ''}`}
            onClick={() => toggle(o.id)}
          >
            <span className="emoji">{o.emoji}</span>
            <span style={{ flex: 1 }}>{o.label}</span>
            <span className="check"><CheckIcon /></span>
          </button>
        ))}
      </div>
      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} disabled={value.length === 0} onClick={onNext}>
          Siguiente <ArrowRight />
        </button>
      </div>
    </div>
  );
}

/* === Q2: scale 1-10 === */
function ScreenScale({ copy, value, onChange, onNext, onBack, btnShape }) {
  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <h2 className="q-title">{renderRich(copy.title)}</h2>
      <p className="q-sub">{copy.sub}</p>
      <div className="scale">
        {Array.from({ length: 10 }, (_, i) => i + 1).map((n) => (
          <button
            key={n}
            type="button"
            className={`scale-btn ${value === n ? 'is-selected' : ''}`}
            onClick={() => onChange(n)}
          >{n}</button>
        ))}
      </div>
      <div className="scale-legend">
        <span>1 — {copy.legendLow}</span>
        <span>{copy.legendHigh} — 10</span>
      </div>
      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} disabled={value == null} onClick={onNext}>
          Siguiente <ArrowRight />
        </button>
      </div>
    </div>
  );
}

/* === Q3: frequency scale (3 niveles) === */
const FREQ_OPTS = [
  { v: 2, label: 'Me pasa' },
  { v: 1, label: 'A veces' },
  { v: 0, label: 'No' },
];
function ScreenYesNo({ copy, value, onChange, onNext, onBack, btnShape }) {
  const setAt = (i, v) => {
    const next = [...value];
    next[i] = v;
    onChange(next);
  };
  const allAnswered = value.every((v) => v !== null && v !== undefined);
  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <h2 className="q-title">{renderRich(copy.title)}</h2>
      <p className="q-sub">{copy.sub}</p>
      <div className="yn-list">
        {copy.items.map((q, i) => (
          <div key={i} className="yn-item">
            <div className="yn-q">{q}</div>
            <div className="freq-buttons">
              {FREQ_OPTS.map((o) => (
                <button
                  key={o.v}
                  type="button"
                  className={`freq-btn lvl-${o.v} ${value[i] === o.v ? 'is-selected' : ''}`}
                  onClick={() => setAt(i, o.v)}
                >{o.label}</button>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} disabled={!allAnswered} onClick={onNext}>
          Siguiente <ArrowRight />
        </button>
      </div>
    </div>
  );
}

/* === Q4: revenue slider === */
const REVENUE_TICKS = [
  { v: 0, label: '< 3k €' },
  { v: 1, label: '3 – 10k €' },
  { v: 2, label: '10 – 25k €' },
  { v: 3, label: '25 – 50k €' },
  { v: 4, label: '50 – 100k €' },
  { v: 5, label: '100 – 250k €' },
  { v: 6, label: '+ 250k €' },
];
function ScreenRevenue({ copy, value, onChange, onNext, onBack, btnShape }) {
  const tick = REVENUE_TICKS[value ?? 2];
  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <h2 className="q-title">{renderRich(copy.title)}</h2>
      <p className="q-sub">{copy.sub}</p>
      <div className="slider-wrap">
        <div className="slider-value">
          {tick.label}
          <small>Facturación mensual aproximada</small>
        </div>
        <input
          className="slider-input"
          type="range"
          min={0}
          max={REVENUE_TICKS.length - 1}
          step={1}
          value={value ?? 2}
          onChange={(e) => onChange(Number(e.target.value))}
        />
        <div className="slider-ticks">
          <span>menos</span>
          <span>más</span>
        </div>
      </div>

      <div className="costs-block">
        <div className="costs-title">{copy.costsTitle}</div>
        <ul className="costs-list">
          {copy.costs.map((c, i) => (
            <li key={i} className="costs-item">
              <span className="costs-dot"></span>
              <span className="costs-text">
                <strong>{c.label}</strong>
                <em>{c.hint}</em>
              </span>
            </li>
          ))}
        </ul>
      </div>

      <div className="cta-row">
        <button className={`btn btn-primary ${btnShape}`} onClick={onNext}>
          Ver mi diagnóstico <ArrowRight />
        </button>
      </div>
    </div>
  );
}

/* === Final CTA: capture name + phone (honest exchange for the report) === */
function ScreenCTA({ copy, state, onSubmit, onBack, btnShape }) {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState('+34');
  const [consent, setConsent] = useState(true);
  const valid = name.trim().length > 1 && phone.replace(/\D/g, '').length >= 9 && consent;

  /* Cuántas palancas tendrá su informe — número REAL, no inventado */
  const leverCount = (state.areas && state.areas.length) ? Math.min(4, state.areas.length) : 2;

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    onSubmit({ name, phone: `${country} ${phone}`, consent });
  };

  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <div className="eyebrow"><span className="dot"></span>{copy.eyebrow}</div>
      <h1 className="headline" style={{ fontSize: 'clamp(26px, 7.2vw, 32px)' }}>
        {renderRich(copy.headline)}
      </h1>

      {/* Lo que VAN a recibir — valor concreto, sin números inventados */}
      <div className="value-card">
        <div className="value-card-title">Tu informe incluye</div>
        <ul className="value-list">
          <li><span className="vdot"></span>Tu <strong>Índice de Método</strong> y en qué fase está tu negocio</li>
          <li><span className="vdot"></span><strong>{leverCount} {leverCount === 1 ? 'palanca' : 'palancas'} de mejora</strong> según tus respuestas</li>
          <li><span className="vdot"></span>Una <strong>acción concreta</strong> para empezar esta misma semana</li>
        </ul>
      </div>

      <p className="lede" style={{ marginBottom: 16, fontSize: 14 }}>{copy.lede}</p>

      <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="field">
          <label className="field-label">Tu nombre</label>
          <input
            className="input"
            type="text"
            placeholder="Carlos Martín"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="field">
          <label className="field-label">WhatsApp</label>
          <div className="phone-row">
            <select className="input" value={country} onChange={(e) => setCountry(e.target.value)}>
              <option value="+34">🇪🇸 +34</option>
              <option value="+52">🇲🇽 +52</option>
              <option value="+57">🇨🇴 +57</option>
              <option value="+54">🇦🇷 +54</option>
              <option value="+56">🇨🇱 +56</option>
              <option value="+51">🇵🇪 +51</option>
              <option value="+1">🇺🇸 +1</option>
            </select>
            <input
              className="input"
              type="tel"
              placeholder="600 123 456"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
        </div>
        <label className="check-line">
          <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
          <span>{copy.consent}</span>
        </label>
        <button type="submit" className={`btn btn-primary ${btnShape}`} disabled={!valid} style={{ marginTop: 4 }}>
          {copy.submit} <ArrowRight />
        </button>
        <div className="fine">{copy.fine}</div>
      </form>
    </div>
  );
}

/* === Captura (paso 3): nombre + WhatsApp + RGPD === */
function ScreenCapture({ copy, contact, onSubmit, onBack, btnShape }) {
  const init = contact || {};
  const [name, setName] = useState(init.name || '');
  const [phone, setPhone] = useState(init.phoneLocal || '');
  const [country, setCountry] = useState(init.country || '+34');
  const [consent, setConsent] = useState(false); // RGPD: NO preseleccionado
  const valid = name.trim().length > 1 && phone.replace(/\D/g, '').length >= 9 && consent;
  const privacyUrl = (window.Integrations && window.Integrations.PRIVACY_URL) || '#';

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    onSubmit({
      name: name.trim(),
      country,
      phoneLocal: phone.trim(),
      phone: `${country} ${phone.trim()}`,
      consent: true,
      consentText: 'Política de privacidad — Consultoría Método',
      ts: new Date().toISOString(),
    });
  };

  return (
    <div className="screen">
      <button className="link-back" onClick={onBack}>← Atrás</button>
      <div className="eyebrow"><span className="dot"></span>{copy.eyebrow}</div>
      <h1 className="headline" style={{ fontSize: 'clamp(26px, 7.2vw, 32px)' }}>
        {renderRich(copy.headline)}
      </h1>
      <p className="lede" style={{ marginBottom: 18, fontSize: 15 }}>{copy.lede}</p>

      <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="field">
          <label className="field-label">Tu nombre</label>
          <input
            className="input"
            type="text"
            placeholder="Carlos Martín"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </div>
        <div className="field">
          <label className="field-label">WhatsApp</label>
          <div className="phone-row">
            <select className="input" value={country} onChange={(e) => setCountry(e.target.value)}>
              <option value="+34">🇪🇸 +34</option>
              <option value="+52">🇲🇽 +52</option>
              <option value="+57">🇨🇴 +57</option>
              <option value="+54">🇦🇷 +54</option>
              <option value="+56">🇨🇱 +56</option>
              <option value="+51">🇵🇪 +51</option>
              <option value="+1">🇺🇸 +1</option>
            </select>
            <input
              className="input"
              type="tel"
              inputMode="numeric"
              placeholder="600 123 456"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}
            />
          </div>
        </div>

        <p className="why-note">{copy.why}</p>

        <label className="check-line">
          <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)} />
          <span>
            He leído y acepto la{' '}
            <a href={privacyUrl} target="_blank" rel="noopener noreferrer">política de privacidad</a>.
            Responsable: <strong>Consultoría Método</strong>.
          </span>
        </label>

        <button type="submit" className={`btn btn-primary ${btnShape}`} disabled={!valid} style={{ marginTop: 4 }}>
          {copy.submit} <ArrowRight />
        </button>
        <div className="fine">{copy.fine}</div>
      </form>
    </div>
  );
}

window.Screens = {
  ScreenPain1, ScreenPain2, ScreenAreas, ScreenScale,
  ScreenYesNo, ScreenRevenue, ScreenCTA, ScreenCapture,
};