// mockups/revisar-firmar.jsx — Página "Paso 5 de 6: Revisión y Firma del Cliente"
// Se muestra después del intake doc-drop. Amelia revisa todo y hace click en
// "Enviar al cliente para firmar remoto" → dispara WhatsApp al cliente.
//
// Props:
//   progress      : 0..1   fade-in
//   btnHover      : bool   hover on Enviar al cliente
//   btnPressed    : bool   button pressed
//
// Exports: RevisarFirmarPage

function RevisarFirmarPage({
  progress = 1,
  btnHover = false,
  btnPressed = false,
}) {
  const lang = useTimeline().lang || 'es';
  const i18n = (window.SOL_I18N && window.SOL_I18N[lang]) || (window.SOL_I18N && window.SOL_I18N.es) || {};
  const rv = i18n.revisar || {};
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: '#fafafa',
      overflow: 'hidden',
      opacity: progress,
      transition: 'opacity 240ms',
    }}>
      <AppHeader />

      {/* Main content area */}
      <div style={{
        position: 'absolute',
        top: 54,
        left: 22, right: 22,
        bottom: 22,
        padding: '20px 28px',
        overflow: 'hidden',
      }}>
        {/* Page header */}
        <div style={{ marginBottom: 14 }}>
          <h2 style={{
            fontSize: 22,
            fontWeight: 600,
            letterSpacing: -0.02,
            color: '#1d1d1f',
            margin: 0,
            marginBottom: 4,
          }}>
            {rv.edit_client || 'Editar cliente:'} <span style={{ color: '#1d1d1f' }}>TOMÁS SMITH</span>
          </h2>
          <div style={{
            fontSize: 12.5,
            color: '#6e6e73',
            letterSpacing: -0.005,
          }}>{rv.intake_lede || 'Sube los documentos y la IA extrae los datos automáticamente'}</div>
        </div>

        {/* Stepper */}
        <Stepper currentStep={5} totalSteps={6} />

        {/* Card body */}
        <div style={{
          background: '#fff',
          border: '1px solid #e8e8ed',
          borderRadius: 14,
          padding: '20px 24px',
          marginTop: 14,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 20,
          height: 'calc(100% - 110px)',
          overflow: 'hidden',
          boxShadow: '0 1px 3px rgba(0,0,0,0.03)',
        }}>
          {/* LEFT column */}
          <div style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
            <div style={{
              display: 'flex',
              alignItems: 'baseline',
              gap: 10,
              marginBottom: 6,
            }}>
              <span style={{
                fontSize: 16,
                fontWeight: 600,
                color: '#1d1d1f',
                letterSpacing: -0.015,
              }}>{rv.page_title || 'Revisión y Firma del Cliente'}</span>
              <span style={{
                background: '#fff5e6',
                color: '#FF9500',
                fontSize: 10,
                fontWeight: 600,
                padding: '2px 8px',
                borderRadius: 999,
                border: '1px solid #ffd9a3',
              }}>{rv.page_step || 'Paso 5 de 6'}</span>
            </div>
            <div style={{
              fontSize: 11.5,
              color: '#6e6e73',
              marginBottom: 14,
            }}>{rv.page_lede || 'Revisa toda la información antes de firmar'}</div>

            {/* RESUMEN DEL CASO */}
            <div style={{
              fontSize: 9.5,
              fontWeight: 600,
              color: '#a1a1a6',
              letterSpacing: 0.14,
              marginBottom: 8,
            }}>{rv.section_caso || 'RESUMEN DEL CASO'}</div>
            <div style={{
              background: '#fafafa',
              border: '1px solid #e8e8ed',
              borderRadius: 10,
              padding: '14px 16px',
              marginBottom: 12,
            }}>
              <div style={{
                fontSize: 16,
                fontWeight: 600,
                color: '#1d1d1f',
                letterSpacing: -0.015,
                marginBottom: 2,
              }}>TOMÁS SMITH</div>
              <div style={{
                fontSize: 10.5,
                color: '#6e6e73',
                marginBottom: 10,
              }}>{rv.dob_label || 'Nac.'} <b style={{ color: '#1d1d1f', fontWeight: 600 }}>1987-04-12</b></div>

              <div style={{
                fontSize: 9.5,
                fontWeight: 600,
                color: '#a1a1a6',
                letterSpacing: 0.14,
                marginBottom: 6,
                paddingTop: 6,
                borderTop: '1px solid #e8e8ed',
              }}>{rv.section_contacto || 'CONTACTO'}</div>
              <div style={{
                display: 'grid',
                gridTemplateColumns: '70px 1fr',
                gap: '3px 8px',
                fontSize: 10.5,
                color: '#1d1d1f',
                letterSpacing: -0.005,
              }}>
                <span style={{ color: '#6e6e73' }}>{rv.email_label || 'Email'}</span>
                <span style={{ fontFamily: 'ui-monospace, monospace' }}>tomas.smith.fl@gmail.com</span>
                <span style={{ color: '#6e6e73' }}>{rv.phone_label || 'Teléfono'}</span>
                <span style={{ fontFamily: 'ui-monospace, monospace' }}>4077445775</span>
                <span style={{ color: '#6e6e73' }}>{rv.address_label || 'Dirección'}</span>
                <span>8810 COMMODITY CIR, ORLANDO, FL 32819</span>
              </div>

              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'baseline',
                paddingTop: 10,
                marginTop: 10,
                borderTop: '1px solid #e8e8ed',
              }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: '#1d1d1f' }}>{rv.income_total || 'Total ingresos del año'}</span>
                <span style={{ fontSize: 18, fontWeight: 600, color: '#1d1d1f', letterSpacing: -0.015 }}>$83,240.00</span>
              </div>
            </div>

            {/* DOCUMENTOS ENTREGADOS */}
            <div style={{
              fontSize: 9.5,
              fontWeight: 600,
              color: '#a1a1a6',
              letterSpacing: 0.14,
              marginBottom: 6,
            }}>{rv.section_docs || 'DOCUMENTOS ENTREGADOS'}</div>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 4,
              fontSize: 10.5,
              fontFamily: 'ui-monospace, monospace',
              color: '#1d1d1f',
            }}>
              {['w2_hilton.pdf', '1099_doordash.pdf', 'id_license.jpg', '1095a_marketplace.pdf'].map(d => (
                <div key={d} style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6,
                  padding: '3px 8px',
                  background: '#fafafa',
                  borderRadius: 6,
                }}>
                  <span style={{
                    width: 12, height: 12,
                    background: '#34C759',
                    color: '#fff',
                    borderRadius: '50%',
                    fontSize: 8,
                    fontWeight: 700,
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flexShrink: 0,
                  }}>✓</span>
                  {d}
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT column — DECLARACIÓN LEGAL + CTA */}
          <div style={{ display: 'flex', flexDirection: 'column', minHeight: 0 }}>
            <div style={{
              fontSize: 9.5,
              fontWeight: 600,
              color: '#a1a1a6',
              letterSpacing: 0.14,
              marginBottom: 8,
            }}>{rv.section_legal || 'DECLARACIÓN LEGAL'}</div>

            <div style={{
              background: 'rgba(0, 122, 255, 0.06)',
              borderLeft: '3px solid #007AFF',
              borderRadius: 10,
              padding: '12px 14px',
              marginBottom: 12,
              flex: 1,
              overflow: 'hidden',
              minHeight: 0,
            }}>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                marginBottom: 8,
              }}>
                <span style={{
                  width: 18, height: 18,
                  borderRadius: '50%',
                  background: '#007AFF',
                  color: '#fff',
                  fontSize: 11,
                  fontWeight: 700,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  flexShrink: 0,
                }}>!</span>
                <b style={{
                  fontSize: 11.5,
                  color: '#0056b3',
                  letterSpacing: -0.005,
                  fontWeight: 600,
                }}>{rv.declaration_title || 'DECLARACIÓN DE VERACIDAD BAJO PERJURIO'}</b>
              </div>
              <div style={{
                fontSize: 10.5,
                color: '#1d1d1f',
                lineHeight: 1.5,
                letterSpacing: -0.005,
              }}>
                Declaro, bajo pena de perjurio, que he revisado personalmente toda la información y documentos presentados en este intake. Cualquier declaración falsa puede resultar en penalidades civiles o criminales bajo las leyes federales y estatales de los Estados Unidos.
              </div>
            </div>

            {/* Compliance info box */}
            <div style={{
              background: '#fff8eb',
              border: '1px solid #fde68a',
              borderRadius: 10,
              padding: '10px 12px',
              marginBottom: 14,
              display: 'flex',
              gap: 10,
            }}>
              <span style={{ fontSize: 14, flexShrink: 0 }}>ℹ️</span>
              <div>
                <div style={{
                  fontSize: 11.5,
                  fontWeight: 600,
                  color: '#7c2d12',
                  letterSpacing: -0.005,
                  marginBottom: 2,
                }}>{rv.sign_warning_title || 'La firma debe hacerla el cliente directamente'}</div>
                <div style={{
                  fontSize: 10.5,
                  color: '#92400e',
                  lineHeight: 1.4,
                  letterSpacing: -0.005,
                }}>{rv.sign_warning_body || "Por compliance E-Sign Act y normas IRS, tú no puedes firmar en lugar del cliente. Usa 'Enviar al cliente para firmar remoto' para mandarle un link único por email o WhatsApp."}</div>
              </div>
            </div>

            {/* Actions */}
            <div style={{
              display: 'flex',
              gap: 10,
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
              <button
                data-target="enviar-firmar"
                style={{
                  flex: 1,
                  padding: '12px 16px',
                  borderRadius: 999,
                  border: 0,
                  background: btnPressed ? '#0061d4' : (btnHover ? '#2289ff' : '#007AFF'),
                  color: '#fff',
                  fontSize: 13,
                  fontWeight: 500,
                  letterSpacing: -0.005,
                  boxShadow: '0 6px 18px rgba(0, 122, 255, 0.30)',
                  transform: btnPressed ? 'scale(0.98)' : 'none',
                  transition: 'transform 100ms, background 160ms',
                  cursor: 'pointer',
                  display: 'inline-flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 8,
                }}>
                <span style={{ fontSize: 14 }}>📱</span>
                {rv.send_to_client || 'Enviar al cliente para firmar remoto'}
              </button>
              <button style={{
                padding: '10px 16px',
                borderRadius: 999,
                border: '1px solid #e8e8ed',
                background: '#fff',
                color: '#1d1d1f',
                fontSize: 12.5,
                fontWeight: 500,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 5,
              }}>
                <span>💾</span> Guardar
              </button>
              <button style={{
                padding: '10px 16px',
                borderRadius: 999,
                border: '1px solid #e8e8ed',
                background: '#fff',
                color: '#1d1d1f',
                fontSize: 12.5,
                fontWeight: 500,
              }}>← Volver</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Stepper({ currentStep = 5, totalSteps = 6 }) {
  const lang = useTimeline().lang || 'es';
  const i18n = (window.SOL_I18N && window.SOL_I18N[lang]) || (window.SOL_I18N && window.SOL_I18N.es) || {};
  const rv = i18n.revisar || {};
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 4,
    }}>
      {Array.from({ length: totalSteps }, (_, i) => {
        const stepNum = i + 1;
        const done = stepNum < currentStep;
        const current = stepNum === currentStep;
        return (
          <React.Fragment key={i}>
            <div style={{
              width: 28, height: 28,
              borderRadius: '50%',
              background: done ? '#34C759' : (current ? '#007AFF' : '#f5f5f7'),
              color: done || current ? '#fff' : '#a1a1a6',
              fontSize: 11,
              fontWeight: 600,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              boxShadow: current ? '0 0 0 4px rgba(0, 122, 255, 0.15)' : 'none',
              transition: 'all 200ms',
            }}>
              {done ? '✓' : stepNum}
            </div>
            {current && (
              <span style={{
                fontSize: 12,
                fontWeight: 500,
                color: '#007AFF',
                letterSpacing: -0.005,
                marginLeft: 4,
                marginRight: 8,
              }}>{rv.step_label || 'Revisar y Firmar'}</span>
            )}
            {i < totalSteps - 1 && (
              <div style={{
                flex: 1,
                height: 2,
                background: done ? '#34C759' : '#e8e8ed',
                maxWidth: 80,
              }} />
            )}
          </React.Fragment>
        );
      })}
    </div>
  );
}

Object.assign(window, { RevisarFirmarPage });