// shared/recordatorios-mini.jsx
// Mini interactive Recordatorios IA section — used in product pages + home

const { useState: rmUs, useRef: rmUr, useEffect: rmUe } = React;

// ---- Slack logo inline SVG ----
function RmSlackLogo() {
  return (
    <svg width="12" height="12" viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>
      <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z" fill="#E01E5A" />
    </svg>
  );
}

// ---- Mini interactive widget strip ----
function RmMiniWidget({ icon, label, defaultDate, channel, channelType }) {
  const [dateLabel, setDateLabel] = rmUs(defaultDate || null);
  const [dropOpen, setDropOpen] = rmUs(false);
  const [toast, setToast] = rmUs(false);
  const dropRef = rmUr();
  const presets = ['Hoy 12:00', 'Mañana 10:00', 'En 3 días', 'En 7 días', 'En 14 días'];

  rmUe(() => {
    const fn = e => { if (dropRef.current && !dropRef.current.contains(e.target)) setDropOpen(false); };
    document.addEventListener('mousedown', fn);
    return () => document.removeEventListener('mousedown', fn);
  }, []);

  const schedule = lbl => {
    setDateLabel(lbl);
    setDropOpen(false);
    setToast(true);
    setTimeout(() => setToast(false), 2200);
  };

  return (
    <div style={{ position: 'relative', width: '100%' }}>
      {toast && (
        <div style={{
          position: 'absolute', bottom: '-30px', left: 0,
          fontSize: 12, fontWeight: 600, color: '#15803D',
          display: 'flex', alignItems: 'center', gap: 5,
          animation: 'rmfadeup 200ms ease both', whiteSpace: 'nowrap',
        }}>
          <Icon name="check" size={13} color="#15803D" /> Recordatorio programado
        </div>
      )}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 7, flexWrap: 'wrap',
        padding: '7px 12px', borderRadius: 8,
        background: '#F5F3FF', border: '1px solid #DDD6FE',
      }}>
        {/* Icon + label */}
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 13, fontWeight: 600, color: '#4C1D95', whiteSpace: 'nowrap', flexShrink: 0 }}>
          <Icon name={icon} size={14} color="#7C3AED" /> {label}
        </span>

        {/* Date pill */}
        {dateLabel && (
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', background: '#DCFCE7', borderRadius: 5, fontSize: 12, fontWeight: 600, color: '#15803D', whiteSpace: 'nowrap', flexShrink: 0 }}>
            <Icon name="calendar" size={11} color="#15803D" />
            {dateLabel}
            <span onClick={() => setDateLabel(null)} style={{ cursor: 'pointer', opacity: 0.5, marginLeft: 1, lineHeight: 1 }}>×</span>
          </span>
        )}

        {/* Channel */}
        <span style={{ color: '#CBD5E1', fontSize: 14, flexShrink: 0 }}>·</span>
        {channelType === 'slack'
          ? <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: '#3d1573', whiteSpace: 'nowrap', flexShrink: 0 }}><RmSlackLogo /> {channel}</span>
          : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 12, color: '#475569', whiteSpace: 'nowrap', flexShrink: 0 }}><Icon name="send" size={11} color="#64748B" /> {channel}</span>
        }

        {/* Programar */}
        <span style={{ color: '#CBD5E1', padding: '0 1px', fontSize: 14, flexShrink: 0 }}>|</span>
        <span style={{ fontSize: 12, color: 'var(--fg-muted)', flexShrink: 0 }}>Programar:</span>

        <button
          onClick={() => schedule('3 · 7 · 14 días')}
          style={{ padding: '4px 10px', borderRadius: 6, border: 'none', background: 'linear-gradient(90deg,#8b5cf6,#6366f1)', color: '#fff', fontSize: 12, fontWeight: 700, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap', flexShrink: 0, transition: 'opacity 150ms' }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.82'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
        >3+7+14d</button>

        <div ref={dropRef} style={{ position: 'relative', flexShrink: 0 }}>
          <button onClick={() => setDropOpen(o => !o)} style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: '4px 9px', borderRadius: 6, border: '1px solid var(--border-default)', background: '#fff', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--fg-default)' }}>
            Otra fecha <span style={{ fontSize: 9, opacity: 0.55 }}>▾</span>
          </button>
          {dropOpen && (
            <div style={{ position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 100, background: '#fff', border: '1px solid var(--border-default)', borderRadius: 8, boxShadow: '0 8px 24px rgba(15,23,42,0.12)', minWidth: 140, overflow: 'hidden' }}>
              {presets.map(p => (
                <div key={p} onClick={() => schedule(p)} style={{ padding: '7px 12px', fontSize: 13, cursor: 'pointer', color: 'var(--fg-strong)' }}
                  onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-subtle)'}
                  onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                  {p}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ---- Mini doc card (header + panel) ----
function RmDocCard({ docLabel, docNumber, client, amount, status, statusColor, statusBg, widget }) {
  return (
    <div style={{ borderRadius: 12, overflow: 'hidden', boxShadow: '0 20px 56px rgba(15,23,42,0.10)', border: '1px solid var(--border-default)' }}>
      {/* Doc header */}
      <div style={{ background: '#fff', padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, borderBottom: '1px solid var(--border-default)' }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--fg-muted)', letterSpacing: '0.07em', marginBottom: 3 }}>{docLabel.toUpperCase()}</div>
          <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--fg-strong)', letterSpacing: '-0.02em' }}>{docNumber}</div>
          <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>{client}</div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{ fontSize: 21, fontWeight: 700, color: 'var(--fg-strong)', letterSpacing: '-0.025em' }}>{amount}</div>
          <div style={{ marginTop: 5, fontSize: 11, fontWeight: 700, padding: '3px 10px', background: statusBg, color: statusColor, borderRadius: 999, display: 'inline-block' }}>{status}</div>
        </div>
      </div>
      {/* Recordatorios panel */}
      <div style={{ background: 'linear-gradient(100deg,#FEFCFF,#F7F3FF)', borderTop: '1px solid #E9DEFF', padding: '10px 16px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: '#7C3AED', opacity: 0.72, display: 'flex', alignItems: 'center', gap: 5 }}>
          <span style={{ fontSize: 13 }}>✨</span> Recordatorios IA
        </div>
        {widget}
      </div>
    </div>
  );
}

// ---- Full marketing section ----
function RecordatoriosMiniSection({ eyebrow, title, titleAccent, desc, bullets, bg, docProps, widgetProps, accent, ctaHref, flip }) {
  const textCol = (
    <div>
      <div style={{ fontSize: 13, fontWeight: 600, color: accent || '#7C3AED', letterSpacing: '0.04em', marginBottom: 14 }}>{eyebrow || 'RECORDATORIOS IA'}</div>
      <h2 style={{ fontSize: 'clamp(26px,3.2vw,38px)', fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.1, margin: '0 0 18px', color: 'var(--fg-strong)' }}>
        {title}{titleAccent && <><br /><span style={{ color: accent || '#7C3AED' }}>{titleAccent}</span></>}
      </h2>
      <p style={{ fontSize: 17, color: 'var(--fg-muted)', lineHeight: 1.65, margin: '0 0 28px', maxWidth: 480 }}>{desc}</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 32 }}>
        {bullets.map((b, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, color: 'var(--fg-strong)' }}>
            <div style={{ width: 22, height: 22, borderRadius: 999, background: 'linear-gradient(135deg,#8b5cf6,#6366f1)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
              <Icon name="check" size={12} color="#fff" />
            </div>
            {b}
          </div>
        ))}
      </div>
      <a href={ctaHref || '/sign-up/'} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 20px', borderRadius: 9, background: 'linear-gradient(90deg,#8b5cf6,#6366f1)', color: '#fff', fontSize: 14, fontWeight: 600, textDecoration: 'none', boxShadow: '0 4px 14px rgba(99,102,241,0.28)', transition: 'opacity 150ms' }}
    onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
    onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
        Probar gratis <Icon name="arrow" size={14} color="#fff" />
      </a>
    </div>
  );

  const demoCol = (
    <div style={{ position: 'relative' }}>
      <style>{`@keyframes rmfadeup { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }`}</style>
      <RmDocCard {...docProps} widget={<RmMiniWidget {...widgetProps} />} />
    </div>
  );

  return (
    <section data-screen-label={eyebrow} style={{ background: bg || '#fff', padding: '96px 24px' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: flip ? '1.05fr 1fr' : '1fr 1.05fr', gap: 64, alignItems: 'center' }} className="afer-tabs-grid">
        {flip ? <>{demoCol}{textCol}</> : <>{textCol}{demoCol}</>}
      </div>
    </section>
  );
}

Object.assign(window, { RecordatoriosMiniSection });