/* ============================================================
   AUTOMATIZACIONES — journey studio
   Direction A (calm canvas, editor closed) + Direction B (dense, editor open)
   3 columns: journey list · canvas · performance sidebar
   ============================================================ */
(function () {
  const tt = (lang, es, en) => (lang === 'en' ? en : es);

  const JOURNEYS = [
    { es: 'Matrícula y bienvenida', en: 'Enrollment & welcome', meta: { es: 'Opt-in 88%', en: 'Opt-in 88%' }, st: 'on', ico: 'user' },
    { es: 'Cobro de pensiones', en: 'Tuition collection', meta: { es: 'Conversión 31%', en: 'Conversion 31%' }, st: 'on', ico: 'cash', active: true },
    { es: 'Informes académicos', en: 'Academic reports', meta: { es: 'Leídos 88%', en: 'Read 88%' }, st: 'on', ico: 'mail' },
    { es: 'Asistencia y seguridad', en: 'Attendance & safety', meta: { es: 'Fase 2', en: 'Phase 2' }, st: 'phase2', ico: 'alert' },
    { es: 'Eventos y recaudación', en: 'Events & fundraising', meta: { es: 'Ingresos $10,2M', en: 'Revenue $10.2M' }, st: 'on', ico: 'calendar' },
    { es: 'Pastoral y sacramentos', en: 'Pastoral & sacraments', meta: { es: 'Confirmada 71%', en: 'Confirmed 71%' }, st: 'on', ico: 'cross' },
    { es: 'Escuela de Padres', en: 'Parent school', meta: { es: 'Asistencia 49%', en: 'Attendance 49%' }, st: 'draft', ico: 'users' },
    { es: 'Alertas y emergencias', en: 'Alerts & emergencies', meta: { es: 'Leídos 92%', en: 'Read 92%' }, st: 'on', ico: 'alert' },
    { es: 'Renovación y fin de año', en: 'Renewal & year-end', meta: { es: 'Renovación 69%', en: 'Renewal 69%' }, st: 'draft', ico: 'calendar' }
  ];

  const NODES = [
    { type: 'entry', label: { es: 'Entrada · saldo pendiente', en: 'Entry · balance due' } },
    { type: 'wait', days: 5 },
    { type: 'msg', tags: ['WhatsApp', 'util'], title: { es: 'Próximo vencimiento', en: 'Upcoming due-date' }, prev: { es: 'Su pensión de MAY vence pronto. Evite la mora.', en: 'Your MAY tuition is due soon. Avoid late fees.' } },
    { type: 'wait', days: 5 },
    { type: 'msg', tags: ['WhatsApp', 'util'], title: { es: 'Vence hoy + enlace de pago', en: 'Due today + pay link' }, prev: { es: 'Hoy vence su pensión. Pague aquí 👇', en: 'Tuition is due today. Pay here 👇' }, sel: true },
    { type: 'decision', q: { es: '¿Pagó?', en: 'Paid?' }, yes: { h: { es: 'SÍ', en: 'YES' }, s: { es: 'Recibo · Salida', en: 'Receipt · Exit' } }, no: { h: 'NO', s: { es: 'continúa', en: 'continue' } } },
    { type: 'wait', days: 5 },
    { type: 'msg', tags: ['WhatsApp', 'util'], title: { es: 'Recordatorio de mora (+recargo)', en: 'Overdue reminder (+late fee)' }, prev: { es: 'Saldo en mora. Evite recargos adicionales.', en: 'Overdue balance. Avoid extra late fees.' } },
    { type: 'goal', label: { es: 'Meta · Pago recibido', en: 'Goal · Payment received' } }
  ];

  const BADGE_ICO = { entry: 'play', wait: 'clock', msg: 'mail', decision: 'branch', goal: 'flag' };

  function JourneyList({ lang, dense }) {
    return (
      <div className={'au-list' + (dense ? ' dense' : '')}>
        <div className="au-jstats">
          <span className="chip util">6 {tt(lang, 'activas', 'active')}</span>
          <span className="chip mk">2 {tt(lang, 'borrador', 'draft')}</span>
          <span className="chip">1 {tt(lang, 'fase 2', 'phase 2')}</span>
        </div>
        {JOURNEYS.map((j, i) => (
          <div key={i} className={'au-jrow' + (j.active ? ' active' : '')}>
            <div className="au-jico" style={{ background: j.active ? 'var(--accent)' : 'var(--warm-2)', color: j.active ? '#fff' : 'var(--text-soft)' }}><Ic name={j.ico} size={17} /></div>
            <div className="au-jmain">
              <div className="au-jname">{tt(lang, j.es, j.en)}</div>
              <div className="au-jmeta">{tt(lang, j.meta.es, j.meta.en)}</div>
            </div>
            <span className={'au-jdot ' + j.st}></span>
          </div>
        ))}
      </div>
    );
  }

  function Flow({ lang, dense }) {
    return (
      <div className="au-flow">
        {NODES.map((n, i) => (
          <div className="au-node" key={i}>
            <div className="au-rail">
              <div className={'au-badge ' + n.type}><Ic name={BADGE_ICO[n.type]} size={20} /></div>
              {i < NODES.length - 1 && <div className="au-connector"></div>}
            </div>
            <div className="au-body">
              {n.type === 'entry' && <div className="au-pill-entry"><Ic name="play" size={14} style={{ marginRight: 8 }} />{tt(lang, n.label.es, n.label.en)}</div>}
              {n.type === 'goal' && <div className="au-pill-entry" style={{ background: 'var(--status-pagado-bg)', color: 'var(--status-pagado)' }}><Ic name="flag" size={14} style={{ marginRight: 8 }} />{tt(lang, n.label.es, n.label.en)}</div>}
              {n.type === 'wait' && <div className="au-wait"><Ic name="clock" size={14} />{tt(lang, 'Esperar', 'Wait')} <input defaultValue={n.days} /> {tt(lang, 'días', 'days')}</div>}
              {n.type === 'msg' && (
                <div className={'au-card' + (n.sel && dense ? ' sel' : '')}>
                  <div className="au-card-tags"><span className="chip wa"><Ic name="whatsapp" size={11} />WhatsApp</span><span className="chip util">{tt(lang, 'Utilidad', 'Utility')}</span></div>
                  <div className="au-card-title">{tt(lang, n.title.es, n.title.en)}</div>
                  <div className="au-card-prev">{tt(lang, n.prev.es, n.prev.en)}</div>
                </div>
              )}
              {n.type === 'decision' && (
                <div className="au-decision">
                  <div className="au-decision-q"><Ic name="branch" size={15} style={{ verticalAlign: '-3px', marginRight: 6 }} />{tt(lang, n.q.es, n.q.en)}</div>
                  <div className="au-branches">
                    <div className="au-branch yes"><div className="bh">{tt(lang, n.yes.h.es, n.yes.h.en)}</div><div className="bs">{tt(lang, n.yes.s.es, n.yes.s.en)}</div></div>
                    <div className="au-branch no"><div className="bh">{n.no.h}</div><div className="bs">{tt(lang, n.no.s.es, n.no.s.en)}</div></div>
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    );
  }

  function Perf({ lang, dense }) {
    const metrics = [
      { v: '1.180', l: { es: 'Enviados / mes', en: 'Sent / mo' } },
      { v: '97%', l: { es: 'Entregados', en: 'Delivered' }, tone: 'good' },
      { v: '84%', l: { es: 'Leídos', en: 'Read' }, tone: 'accent' },
      { v: '41%', l: { es: 'Clic enlace pago', en: 'Pay-link clicks' }, tone: 'accent' },
      { v: '31%', l: { es: 'Conversión', en: 'Conversion' }, tone: 'good' },
      { v: '14%', l: { es: 'Respuestas', en: 'Replies' } },
      { v: '$52,4M', l: { es: 'Recuperado', en: 'Recovered' }, tone: 'good' },
      { v: '40%', l: { es: 'En mora', en: 'Overdue' }, tone: 'warn' }
    ];
    const funnel = [
      { n: { es: 'Enviados', en: 'Sent' }, p: 100 },
      { n: { es: 'Entregados', en: 'Delivered' }, p: 97 },
      { n: { es: 'Leídos', en: 'Read' }, p: 82 },
      { n: { es: 'Clic enlace', en: 'Clicked link' }, p: 41 },
      { n: { es: 'Pagó', en: 'Paid' }, p: 31, paid: true }
    ];
    return (
      <div className={'au-perf' + (dense ? ' dense' : '')}>
        <h2 className="au-perfhead">{tt(lang, 'Desempeño', 'Performance')}</h2>
        <div className="au-metrics">
          {metrics.map((m, i) => (
            <div key={i} className={'au-metric' + (m.tone ? ' ' + m.tone : '')}>
              <div className="mv">{m.v}</div><div className="ml">{tt(lang, m.l.es, m.l.en)}</div>
            </div>
          ))}
        </div>
        <div className="au-funnel-h">{tt(lang, 'Embudo de conversión', 'Conversion funnel')}</div>
        {funnel.map((f, i) => (
          <div key={i} className="au-frow">
            <div className="au-frow-top"><span className="fn">{tt(lang, f.n.es, f.n.en)}</span><span className="fp">{f.p}%</span></div>
            <div className={'au-fbar' + (f.paid ? ' paid' : '')}><i style={{ width: f.p + '%' }}></i></div>
          </div>
        ))}
        <div className="au-disc">{tt(lang, 'Datos ilustrativos (ficticios).', 'Illustrative data (fabricated).')}</div>
      </div>
    );
  }

  function NodeEditor({ lang }) {
    return (
      <div className="au-editor">
        <div className="au-ed-head">
          <div className="au-ed-title">{tt(lang, 'Editar mensaje', 'Edit message')}</div>
          <button className="au-ed-x"><Ic name="x" size={18} /></button>
        </div>
        <div className="au-ed-sub">{tt(lang, 'Vence hoy + enlace de pago', 'Due today + pay link')}</div>
        <div className="au-ed-label">{tt(lang, 'Canal', 'Channel')}</div>
        <div className="seg" style={{ width: '100%' }}><button className="active" style={{ flex: 1 }}><Ic name="whatsapp" size={13} style={{ verticalAlign: '-2px', marginRight: 4 }} />WhatsApp</button><button style={{ flex: 1 }}><Ic name="mail" size={13} style={{ verticalAlign: '-2px', marginRight: 4 }} />{tt(lang, 'Correo', 'Email')}</button></div>
        <div className="au-ed-label">{tt(lang, 'Tipo de plantilla', 'Template type')}</div>
        <div className="seg" style={{ width: '100%' }}><button className="active" style={{ flex: 1 }}>{tt(lang, 'Utilidad', 'Utility')}</button><button style={{ flex: 1 }}>{tt(lang, 'Marketing', 'Marketing')}</button></div>
        <div className="au-ed-label">{tt(lang, 'Plantilla aprobada', 'Approved template')}</div>
        <select className="inp" style={{ width: '100%' }}><option>{tt(lang, 'Vence hoy + enlace de pago', 'Due today + pay link')}</option><option>{tt(lang, 'Próximo vencimiento', 'Upcoming due-date')}</option></select>
        <div className="au-ed-label">{tt(lang, 'Imagen adjunta', 'Attached image')}</div>
        <div className="au-imgslot stripe-ph">
          <div style={{ background: 'var(--paper)', padding: '6px 10px', borderRadius: 6 }}><Ic name="image" size={16} style={{ verticalAlign: '-3px', marginRight: 5 }} />{tt(lang, 'Arrastre una imagen', 'Drop an image')}</div>
        </div>
        <div className="au-ed-label">{tt(lang, 'Vista previa', 'Preview')}</div>
        <div className="bubble out" style={{ maxWidth: '100%', alignSelf: 'stretch' }}>{tt(lang, 'Hoy vence su pensión de MAY ($170.000). Pague aquí 👇', 'Your MAY tuition ($170,000) is due today. Pay here 👇')}<span className="bt">10:00 a.m.</span></div>
        <button className="btn btn-primary btn-block" style={{ marginTop: 16 }}><Ic name="check" size={15} />{tt(lang, 'Guardar paso', 'Save step')}</button>
      </div>
    );
  }

  function CanvasHead({ lang, dense }) {
    return (
      <>
        <div className="au-cvhead">
          <div>
            <div className="au-cvtitle"><span className="checkbox on" style={{ verticalAlign: '-3px' }}><Ic name="check" size={11} sw={3} /></span> {tt(lang, 'Cobro de pensiones', 'Tuition collection')}</div>
            <div className="au-cvsub">{tt(lang, 'Cada mes, según el saldo', 'Monthly, by balance')} · <span className="chip util" style={{ verticalAlign: 'middle' }}>{tt(lang, 'ACTIVA', 'ACTIVE')}</span></div>
          </div>
          <button className="toggle on"><span className="knob"></span></button>
        </div>
        <div className="au-hint"><Ic name="bolt" size={14} />{tt(lang, 'Toque un paso para editar la espera, la plantilla o la imagen.', 'Tap a step to edit its wait, template or image.')}</div>
      </>
    );
  }

  function AutoA({ lang = 'es' }) {
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="auto" lang={lang} showToday={false} />
          <div className="main">
            <div className="pagehead">
              <div>
                <div className="ph-eyebrow">{tt(lang, 'Jornadas automáticas · M1', 'Automated journeys · M1')}</div>
                <h1>{tt(lang, 'Automatizaciones', 'Automations')}</h1>
                <div className="ph-sub">{tt(lang, 'Diseñe el recorrido de cada jornada y vea su desempeño', 'Design each journey and see its performance')}</div>
              </div>
              <div className="ph-actions"><button className="btn btn-primary"><Ic name="plus" size={16} />{tt(lang, 'Nueva jornada', 'New journey')}</button></div>
            </div>
            <div className="au">
              <JourneyList lang={lang} dense={false} />
              <div className="au-canvas grid-bg"><CanvasHead lang={lang} /><Flow lang={lang} dense={false} /></div>
              <Perf lang={lang} dense={false} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  function AutoB({ lang = 'es' }) {
    return (
      <div className="app v3">
        <AppHeader lang={lang} />
        <div className="app-body">
          <LeftNav active="auto" lang={lang} />
          <div className="main">
            <div className="pagehead">
              <div>
                <div className="ph-eyebrow">{tt(lang, 'Jornadas automáticas · M1', 'Automated journeys · M1')}</div>
                <h1>{tt(lang, 'Automatizaciones', 'Automations')}</h1>
                <div className="ph-sub">{tt(lang, 'Diseñe el recorrido de cada jornada y vea su desempeño', 'Design each journey and see its performance')}</div>
              </div>
              <div className="ph-actions"><button className="btn btn-secondary"><Ic name="columns" size={15} />{tt(lang, 'Plantillas', 'Templates')}</button><button className="btn btn-primary"><Ic name="plus" size={16} />{tt(lang, 'Nueva jornada', 'New journey')}</button></div>
            </div>
            <div className="au">
              <JourneyList lang={lang} dense={true} />
              <div className="au-canvas grid-bg" style={{ position: 'relative' }}>
                <CanvasHead lang={lang} dense />
                <div style={{ paddingRight: 320 }}><Flow lang={lang} dense={true} /></div>
                <NodeEditor lang={lang} />
              </div>
              <Perf lang={lang} dense={true} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  Object.assign(window, { AutoA, AutoB });
})();