// WaitlistForm — 3-step interactive form for private beta
// Steps: 1) email, 2) company + role, 3) llm spend
// Visual + functional. Fake submit on final step.

const ROLES = [
  { id: 'eng', label: 'Engineer', sub: 'IC' },
  { id: 'em', label: 'Eng Manager', sub: 'or tech lead' },
  { id: 'cto', label: 'CTO / VP', sub: 'or director+' },
  { id: 'other', label: 'Other', sub: 'finance, ops, etc' },
];

const SPENDS = [
  { id: 's0', label: '< $5k', sub: 'tinkering' },
  { id: 's1', label: '$5k – $50k', sub: 'spinning up' },
  { id: 's2', label: '$50k – $500k', sub: 'real spend' },
  { id: 's3', label: '$500k+', sub: 'enterprise' },
];

function validateEmail(s) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((s || '').trim());
}

function StepDots({ step, total }) {
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{
          width: i === step ? 22 : 6, height: 6, borderRadius: 3,
          background: i <= step ? 'var(--accent)' : 'var(--bg-3)',
          transition: 'all var(--dur-mid) var(--ease)',
        }} />
      ))}
    </div>
  );
}

function FieldLabel({ children, hint }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
      <span style={{
        fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)',
        textTransform: 'uppercase', letterSpacing: '0.06em',
      }}>{children}</span>
      {hint && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)' }}>{hint}</span>}
    </div>
  );
}

function TextInput({ value, onChange, placeholder, error, autoFocus, type = 'text', onEnter }) {
  return (
    <input
      type={type}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      onKeyDown={(e) => { if (e.key === 'Enter' && onEnter) { e.preventDefault(); onEnter(); } }}
      placeholder={placeholder}
      autoFocus={autoFocus}
      style={{
        width: '100%', height: 44,
        background: 'var(--bg-0)',
        border: `1px solid ${error ? 'var(--danger)' : 'var(--border-strong)'}`,
        borderRadius: 'var(--radius-sm)',
        color: 'var(--fg-0)',
        fontFamily: 'var(--font-mono)', fontSize: 14,
        padding: '0 14px',
        outline: 'none',
        transition: 'border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease)',
      }}
      onFocus={(e) => { e.target.style.borderColor = error ? 'var(--danger)' : 'var(--accent)'; }}
      onBlur={(e) => { e.target.style.borderColor = error ? 'var(--danger)' : 'var(--border-strong)'; }}
    />
  );
}

function ChipGrid({ options, value, onChange, columns = 2 }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: 8 }}>
      {options.map((o) => {
        const sel = value === o.id;
        return (
          <button
            key={o.id}
            type="button"
            onClick={() => onChange(o.id)}
            style={{
              textAlign: 'left',
              padding: '12px 14px',
              background: sel ? 'var(--accent-faint)' : 'var(--bg-0)',
              border: `1px solid ${sel ? 'var(--accent)' : 'var(--border)'}`,
              borderRadius: 'var(--radius-sm)',
              cursor: 'pointer',
              transition: 'all var(--dur-fast) var(--ease)',
              color: 'var(--fg-1)',
              fontFamily: 'var(--font-body)',
            }}
            onMouseEnter={(e) => { if (!sel) e.currentTarget.style.borderColor = 'var(--border-strong)'; }}
            onMouseLeave={(e) => { if (!sel) e.currentTarget.style.borderColor = 'var(--border)'; }}
          >
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 500,
              color: sel ? 'var(--accent)' : 'var(--fg-0)',
            }}>{o.label}</div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{o.sub}</div>
          </button>
        );
      })}
    </div>
  );
}

function PrimaryBtn({ children, onClick, disabled, full, type = 'button' }) {
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      style={{
        height: 44, padding: '0 22px',
        background: disabled ? 'var(--bg-3)' : 'var(--accent)',
        color: disabled ? 'var(--fg-3)' : 'var(--accent-fg)',
        border: 'none',
        borderRadius: 'var(--radius-sm)',
        fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
        cursor: disabled ? 'not-allowed' : 'pointer',
        width: full ? '100%' : 'auto',
        transition: 'all var(--dur-fast) var(--ease)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}
      onMouseEnter={(e) => { if (!disabled) e.currentTarget.style.background = 'var(--accent-hover)'; }}
      onMouseLeave={(e) => { if (!disabled) e.currentTarget.style.background = 'var(--accent)'; }}
    >
      {children}
    </button>
  );
}

function GhostBtn({ children, onClick }) {
  return (
    <button
      type="button"
      onClick={onClick}
      style={{
        height: 44, padding: '0 18px',
        background: 'transparent',
        color: 'var(--fg-2)',
        border: '1px solid var(--border)',
        borderRadius: 'var(--radius-sm)',
        fontFamily: 'var(--font-body)', fontSize: 14,
        cursor: 'pointer',
      }}
    >{children}</button>
  );
}

function WaitlistForm({ compact = false, accentLabel = 'Join the private beta', onSuccess }) {
  const [step, setStep] = React.useState(0);
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [role, setRole] = React.useState('');
  const [spend, setSpend] = React.useState('');
  const [emailErr, setEmailErr] = React.useState('');
  const [companyErr, setCompanyErr] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [submitErr, setSubmitErr] = React.useState('');
  const [done, setDone] = React.useState(false);

  const next1 = () => {
    if (!validateEmail(email)) { setEmailErr('valid work email, please'); return; }
    setEmailErr('');
    setStep(1);
  };
  const next2 = () => {
    if (!company.trim()) { setCompanyErr('company name required'); return; }
    if (!role) { setCompanyErr('pick a role'); return; }
    setCompanyErr('');
    setStep(2);
  };
  const submit = async () => {
    if (!spend) return;
    setSubmitting(true);
    setSubmitErr('');
    try {
      const res = await fetch('/api/join', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim(), company: company.trim(), role, spend }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setSubmitErr(data.error || 'something went wrong, try again');
        setSubmitting(false);
        return;
      }
      setSubmitting(false);
      setDone(true);
      onSuccess && onSuccess();
    } catch (e) {
      setSubmitErr('network error, try again');
      setSubmitting(false);
    }
  };

  if (done) {
    return (
      <div style={{
        background: 'var(--bg-1)',
        border: '1px solid var(--accent)',
        borderRadius: 'var(--radius-md)',
        padding: 28,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 2,
          background: 'var(--accent)',
        }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: 'var(--accent)', color: 'var(--accent-fg)',
            display: 'grid', placeItems: 'center',
            fontFamily: 'var(--font-mono)', fontWeight: 700,
          }}>✓</div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)',
            textTransform: 'uppercase', letterSpacing: '0.08em',
          }}>// you're on the list</div>
        </div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600,
          color: 'var(--fg-0)', marginBottom: 6, letterSpacing: '-0.02em',
        }}>welcome, tokenmaxxer</h3>
        <p style={{ color: 'var(--fg-2)', fontSize: 14, margin: 0 }}>
          we'll email <span className="t-mono" style={{ color: 'var(--fg-0)' }}>{email}</span> as soon as we have a spot for you.
        </p>
      </div>
    );
  }

  return (
    <div style={{
      background: 'var(--bg-1)',
      border: '1px solid var(--border)',
      borderRadius: 'var(--radius-md)',
      padding: compact ? 22 : 28,
      position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <SlashTag>{accentLabel}</SlashTag>
        <StepDots step={step} total={3} />
      </div>

      {step === 0 && (
        <div>
          <FieldLabel hint="step 1 of 3">work email</FieldLabel>
          <TextInput
            value={email}
            onChange={(v) => { setEmail(v); if (emailErr) setEmailErr(''); }}
            placeholder="you@company.com"
            error={!!emailErr}
            autoFocus
            type="email"
            onEnter={next1}
          />
          {emailErr && (
            <div style={{
              marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--danger)',
            }}>! {emailErr}</div>
          )}
          <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
              // stays here. no list-buying, no enrichment.
            </span>
            <PrimaryBtn onClick={next1} disabled={!email}>continue →</PrimaryBtn>
          </div>
        </div>
      )}

      {step === 1 && (
        <div>
          <FieldLabel hint="step 2 of 3">company</FieldLabel>
          <TextInput
            value={company}
            onChange={(v) => { setCompany(v); if (companyErr) setCompanyErr(''); }}
            placeholder="acme inc."
            autoFocus
            onEnter={next2}
          />
          <div style={{ height: 18 }} />
          <FieldLabel>your role</FieldLabel>
          <ChipGrid options={ROLES} value={role} onChange={setRole} columns={2} />
          {companyErr && (
            <div style={{
              marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--danger)',
            }}>! {companyErr}</div>
          )}
          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
            <GhostBtn onClick={() => setStep(0)}>← back</GhostBtn>
            <PrimaryBtn onClick={next2} disabled={!company || !role}>continue →</PrimaryBtn>
          </div>
        </div>
      )}

      {step === 2 && (
        <div>
          <FieldLabel hint="step 3 of 3">monthly llm spend</FieldLabel>
          <ChipGrid options={SPENDS} value={spend} onChange={setSpend} columns={2} />
          <div style={{
            marginTop: 14, padding: '10px 12px',
            background: 'var(--bg-0)', border: '1px solid var(--border)',
            borderRadius: 'var(--radius-sm)',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)' }}>$</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)' }}>
              // helps us understand your scale. we don't share this.
            </span>
          </div>
          {submitErr && (
            <div style={{
              marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--danger)',
            }}>! {submitErr}</div>
          )}
          <div style={{ marginTop: 20, display: 'flex', justifyContent: 'space-between' }}>
            <GhostBtn onClick={() => setStep(1)}>← back</GhostBtn>
            <PrimaryBtn onClick={submit} disabled={!spend || submitting}>
              {submitting ? 'submitting…' : 'request access →'}
            </PrimaryBtn>
          </div>
        </div>
      )}
    </div>
  );
}

// Single-line email signup — for footer / "stay in the loop"
function EmailSignup({ label = 'company updates', placeholder = 'you@company.com', cta = 'subscribe', size = 'md' }) {
  const [email, setEmail] = React.useState('');
  const [done, setDone] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);

  const submit = async () => {
    if (!validateEmail(email)) { setErr('valid email please'); return; }
    setErr('');
    setSubmitting(true);
    try {
      const res = await fetch('/api/updates', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email.trim() }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setErr(data.error || 'something went wrong, try again');
        setSubmitting(false);
        return;
      }
      setSubmitting(false);
      setDone(true);
    } catch {
      setErr('network error, try again');
      setSubmitting(false);
    }
  };

  if (done) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '12px 16px',
        border: '1px dashed var(--accent)',
        borderRadius: 'var(--radius-sm)',
        background: 'var(--accent-faint)',
        color: 'var(--accent)',
        fontFamily: 'var(--font-mono)', fontSize: 13,
      }}>
        <span>✓</span>
        <span>// you're on the list. unsubscribe any time.</span>
      </div>
    );
  }

  const h = size === 'lg' ? 48 : 40;
  return (
    <div>
      <div style={{
        display: 'flex', gap: 0,
        border: `1px solid ${err ? 'var(--danger)' : 'var(--border-strong)'}`,
        borderRadius: 'var(--radius-sm)',
        background: 'var(--bg-0)',
        overflow: 'hidden',
        transition: 'border-color var(--dur-fast) var(--ease)',
      }}>
        <input
          type="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); setErr(''); }}
          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
          placeholder={placeholder}
          style={{
            flex: 1, height: h, padding: '0 14px',
            background: 'transparent', border: 'none', outline: 'none',
            color: 'var(--fg-0)',
            fontFamily: 'var(--font-mono)', fontSize: size === 'lg' ? 14 : 13,
          }}
        />
        <button
          onClick={submit}
          disabled={submitting}
          style={{
            height: h, padding: '0 18px',
            background: 'var(--accent)', color: 'var(--accent-fg)',
            border: 'none',
            fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: size === 'lg' ? 14 : 13,
            cursor: submitting ? 'wait' : 'pointer', whiteSpace: 'nowrap',
            opacity: submitting ? 0.7 : 1,
          }}
          onMouseEnter={(e) => { if (!submitting) e.currentTarget.style.background = 'var(--accent-hover)'; }}
          onMouseLeave={(e) => { if (!submitting) e.currentTarget.style.background = 'var(--accent)'; }}
        >{submitting ? '…' : `${cta} →`}</button>
      </div>
      <div style={{ marginTop: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: err ? 'var(--danger)' : 'var(--fg-3)' }}>
        {err ? `! ${err}` : `// ${label}`}
      </div>
    </div>
  );
}

Object.assign(window, { WaitlistForm, EmailSignup, validateEmail, PrimaryBtn, GhostBtn });