/* global React */
// Business-email waitlist capture. Validates a work email, blocks free
// providers, writes the join to Supabase, and shows a success state.
// tone: 'light' (on white) | 'dark' (on charcoal).

const FREE_EMAIL_DOMAINS = new Set([
  'gmail.com','googlemail.com','yahoo.com','yahoo.co.uk','ymail.com',
  'hotmail.com','hotmail.co.uk','outlook.com','live.com','msn.com',
  'icloud.com','me.com','mac.com','aol.com','proton.me','protonmail.com',
  'gmx.com','zoho.com','yandex.com','mail.com','pm.me','hey.com',
]);

const WAITLIST_TABLE = 'waitlist_signups';
const SUPABASE_PLACEHOLDER_URL = 'https://YOUR_PROJECT.supabase.co';
const SUPABASE_PLACEHOLDER_KEY = 'sb_publishable_YOUR_KEY';

function getWaitlistSupabase() {
  const config = window.RECONCILEAI_SUPABASE || {};
  const url = (config.url || '').trim();
  const publishableKey = (config.publishableKey || '').trim();

  if (!window.supabase || typeof window.supabase.createClient !== 'function') {
    throw new Error('Supabase client library is not loaded.');
  }

  if (!url || !publishableKey || url === SUPABASE_PLACEHOLDER_URL || publishableKey === SUPABASE_PLACEHOLDER_KEY) {
    throw new Error('Supabase waitlist settings are missing.');
  }

  if (!window.reconcileaiWaitlistSupabase) {
    window.reconcileaiWaitlistSupabase = window.supabase.createClient(url, publishableKey);
  }

  return window.reconcileaiWaitlistSupabase;
}

function WaitlistForm({
  ctaLabel = 'Join waitlist',
  placeholder = 'you@company.com',
  requireBusiness = true,
  successMessage = "You're on the list — we'll be in touch.",
  showCount = false,
  countLabel = 'Join 1,200+ finance teams already on the list.',
  tone = 'light',
  id,
}) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle'); // idle | error | success
  const [error, setError] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => window.lucide && window.lucide.createIcons());
  });

  const dark = tone === 'dark';
  const subtleColor = dark ? 'var(--gray-400)' : 'var(--text-muted)';

  const validate = (value) => {
    const v = value.trim();
    if (!v) return 'Enter your work email to join.';
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
    if (!ok) return 'Enter a valid email address.';
    if (requireBusiness) {
      const domain = v.split('@')[1].toLowerCase();
      if (FREE_EMAIL_DOMAINS.has(domain)) return 'Please use your work email, not a personal one.';
    }
    return '';
  };

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;

    const err = validate(email);
    if (err) { setError(err); setStatus('error'); return; }

    const normalizedEmail = email.trim().toLowerCase();
    setSubmitting(true);

    try {
      const supabaseClient = getWaitlistSupabase();
      const { error: insertError } = await supabaseClient
        .from(WAITLIST_TABLE)
        .insert({ email: normalizedEmail, source: 'landing_page' });

      if (insertError && insertError.code !== '23505') {
        throw insertError;
      }

      setEmail(normalizedEmail);
      setError('');
      setStatus('success');
    } catch (submitError) {
      console.warn('ReconcileAI waitlist signup failed:', submitError);
      setError('We could not join the waitlist right now. Please try again in a moment.');
      setStatus('error');
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => { setStatus('idle'); setEmail(''); setError(''); };

  // ---- Success state ----
  if (status === 'success') {
    return (
      <div id={id} style={{ display: 'flex', flexDirection: 'column', gap: '10px', alignItems: tone === 'dark' ? 'center' : 'flex-start', width: '100%', maxWidth: '440px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: '12px',
          padding: '14px 18px', borderRadius: 'var(--radius-md)',
          background: dark ? 'rgba(255,255,255,0.06)' : 'var(--success-surface)',
          border: dark ? '1px solid rgba(255,255,255,0.14)' : '1px solid var(--green-500)',
          width: '100%',
        }}>
          <span style={{
            width: 32, height: 32, flex: 'none', borderRadius: '50%',
            background: 'var(--success)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <i data-lucide="check" style={{ width: 18, height: 18 }}></i>
          </span>
          <span style={{
            fontFamily: 'var(--font-sans)', fontSize: '15px', fontWeight: 600,
            color: dark ? '#fff' : 'var(--green-700)', lineHeight: 1.4,
          }}>{successMessage}</span>
        </div>
        <button type="button" onClick={reset} style={{
          alignSelf: tone === 'dark' ? 'center' : 'flex-start',
          background: 'none', border: 'none', cursor: 'pointer', padding: '2px 0',
          fontFamily: 'var(--font-sans)', fontSize: '13px', fontWeight: 500,
          color: subtleColor, textDecoration: 'underline', textUnderlineOffset: '2px',
        }}>Use a different email</button>
      </div>
    );
  }

  // ---- Entry state ----
  const invalid = status === 'error';
  const fieldBorder = invalid ? 'var(--danger)' : (dark ? 'rgba(255,255,255,0.18)' : 'var(--border-default)');

  return (
    <form onSubmit={submit} noValidate id={id} style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%', maxWidth: '480px', boxSizing: 'border-box', alignItems: tone === 'dark' ? 'center' : 'stretch' }}>
      <div className="rai-waitlist-row" style={{ display: 'flex', alignItems: 'stretch', gap: '10px', width: '100%' }}>
        <div className="rai-waitlist-field" style={{
          display: 'flex', alignItems: 'center', gap: '10px', flex: '1 1 auto', minWidth: 0, width: '100%', boxSizing: 'border-box',
          height: '52px', padding: '0 14px',
          background: dark ? 'rgba(255,255,255,0.96)' : 'var(--surface-card)',
          border: `1px solid ${fieldBorder}`, borderRadius: 'var(--radius-md)',
          transition: 'border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)',
        }}>
          <i data-lucide="mail" style={{ width: 18, height: 18, color: 'var(--text-muted)', flex: 'none' }}></i>
          <input
            type="email"
            value={email}
            placeholder={placeholder}
            aria-label="Work email"
            aria-invalid={invalid}
            disabled={submitting}
            onChange={(e) => { setEmail(e.target.value); if (invalid) { setStatus('idle'); setError(''); } }}
            onFocus={(e) => { if (!invalid) e.currentTarget.parentElement.style.boxShadow = 'var(--focus-ring)'; }}
            onBlur={(e) => { e.currentTarget.parentElement.style.boxShadow = 'none'; }}
            style={{
              flex: '1 1 auto', minWidth: 0, width: '100%', border: 'none', outline: 'none', background: 'transparent',
              fontFamily: 'var(--font-sans)', fontSize: '15px', color: 'var(--text-strong)',
              cursor: submitting ? 'not-allowed' : 'text',
            }}
          />
        </div>
        <button type="submit" className="rai-waitlist-btn" disabled={submitting} aria-busy={submitting} style={{
          flex: 'none', height: '52px', padding: '0 22px',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
          background: 'var(--brand)', color: 'var(--text-on-brand)',
          fontFamily: 'var(--font-sans)', fontSize: '15px', fontWeight: 600,
          border: '1px solid transparent', borderRadius: 'var(--radius-md)', cursor: submitting ? 'not-allowed' : 'pointer',
          whiteSpace: 'nowrap', boxShadow: 'var(--shadow-xs)', opacity: submitting ? 0.72 : 1,
          transition: 'background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)',
        }}
          onMouseEnter={(e) => { if (submitting) return; e.currentTarget.style.background = 'var(--brand-hover)'; e.currentTarget.style.boxShadow = 'var(--shadow-brand)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={(e) => { if (submitting) return; e.currentTarget.style.background = 'var(--brand)'; e.currentTarget.style.boxShadow = 'var(--shadow-xs)'; e.currentTarget.style.transform = 'none'; }}
          onMouseDown={(e) => { if (!submitting) e.currentTarget.style.transform = 'scale(0.98)'; }}
          onMouseUp={(e) => { if (!submitting) e.currentTarget.style.transform = 'translateY(-1px)'; }}
        >
          {submitting ? 'Joining...' : ctaLabel}
          <i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>
        </button>
      </div>

      {invalid && (
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px', fontFamily: 'var(--font-sans)', fontSize: '13px', color: dark ? '#FFB4BD' : 'var(--danger)' }}>
          <i data-lucide="alert-circle" style={{ width: 14, height: 14 }}></i>
          {error}
        </span>
      )}
      {showCount && !invalid && (
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: '13px', color: subtleColor }}>{countLabel}</span>
      )}
    </form>
  );
}
window.WaitlistForm = WaitlistForm;