// Lead form. Creates contact directly in GHL with all tracking fields mapped.
const GHL_WEBHOOK = 'https://services.leadconnectorhq.com/hooks/DdYbWmBpVg8CnoQJuSfZ/webhook-trigger/6a9a5ddd-2230-4c9a-9567-119e3ac879d9';
const GHL_API = 'https://services.leadconnectorhq.com/contacts/';
const GHL_TOKEN = 'pit-239b4aa2-9f99-462b-b83c-bc1158122b7d';
const GHL_LOCATION = 'DdYbWmBpVg8CnoQJuSfZ';

// Custom field IDs (created in GHL)
const FIELD_IDS = {
  contact_for:    'xr42kHIWnDF6xvCAzHnH',
  insurance_plan: 'ZZYK9bpf7k4RF8AZ1PLK',
  utm_source:     '3KBbg1GKwIeC00UmiVHS',
  utm_medium:     'xnSmyTM79fsMg7gu4zn6',
  utm_campaign:   'X5fkECxTNf0tR225BCAp',
  utm_term:       '4zcxv6tBaA9cKD9SbFIV',
  utm_content:    'N3liitMlXxDpM1TFvIYf',
  gbraid:         'm0zwJTJdN4YLt3yC7LM3',
  wbraid:         'KE533N4p3S27ylGiqM6T',
  fbclid:         'AYx6u31udaRLOBndEAC1',
  msclkid:        'S50XCxkphAEXJmIirDc9',
  page_url:       'e5hMw8oBYTMgv5FL5uHa',
  landing_page:   '0xdRh4NzsXUncaP2wf69',
  referrer:       '4N9fM7loPy1CaYpCOPgZ',
  user_agent:     '8eH9QuLo2OvAmCnREVdW',
  lead_source:    'tp0H1BFHeaft8A8PKlCa',
  submitted_at:   '6EYDLskeSkEnnI6lydug',
};

function getTrackingParams() {
  const params = new URLSearchParams(window.location.search);
  const get = k => params.get(k) || '';
  return {
    utm_source:   get('utm_source'),
    utm_medium:   get('utm_medium'),
    utm_campaign: get('utm_campaign'),
    utm_term:     get('utm_term'),
    utm_content:  get('utm_content'),
    gclid:        get('gclid'),
    gbraid:       get('gbraid'),
    wbraid:       get('wbraid'),
    fbclid:       get('fbclid'),
    msclkid:      get('msclkid'),
  };
}

function LeadForm({ compact = false }) {
  const [status, setStatus] = React.useState('idle');
  const [data, setData] = React.useState({ name: '', phone: '', who: 'Myself', plan: '' });
  const [focus, setFocus] = React.useState('');
  const valid = data.name.trim() && data.phone.trim().replace(/\D/g, '').length >= 10;

  const inputStyle = key => ({
    width: '100%', font: '400 15px var(--font-body)', color: 'var(--fg1)',
    background: 'var(--white)', border: '1.5px solid ' + (focus === key ? 'var(--forest)' : 'var(--line)'),
    borderRadius: 'var(--r-sm)', padding: '12px 14px', outline: 'none',
    boxShadow: focus === key ? '0 0 0 3px rgba(26,64,53,.12)' : 'none', transition: 'all .18s'
  });
  const labelStyle = { display: 'block', font: '600 13px var(--font-body)', color: 'var(--forest)', marginBottom: 6 };

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

  async function handleSubmit(e) {
    e.preventDefault();
    if (!valid || status === 'sending') return;
    setStatus('sending');

    const tracking = getTrackingParams();
    const now = new Date().toISOString();

    // Build custom fields array
    const customFields = [
      { id: FIELD_IDS.contact_for,    field_value: data.who },
      { id: FIELD_IDS.insurance_plan, field_value: data.plan.trim() },
      { id: FIELD_IDS.utm_source,     field_value: tracking.utm_source },
      { id: FIELD_IDS.utm_medium,     field_value: tracking.utm_medium },
      { id: FIELD_IDS.utm_campaign,   field_value: tracking.utm_campaign },
      { id: FIELD_IDS.utm_term,       field_value: tracking.utm_term },
      { id: FIELD_IDS.utm_content,    field_value: tracking.utm_content },
      { id: FIELD_IDS.gbraid,         field_value: tracking.gbraid },
      { id: FIELD_IDS.wbraid,         field_value: tracking.wbraid },
      { id: FIELD_IDS.fbclid,         field_value: tracking.fbclid },
      { id: FIELD_IDS.msclkid,        field_value: tracking.msclkid },
      { id: FIELD_IDS.page_url,       field_value: window.location.href },
      { id: FIELD_IDS.landing_page,   field_value: window.location.pathname },
      { id: FIELD_IDS.referrer,       field_value: document.referrer || '' },
      { id: FIELD_IDS.user_agent,     field_value: navigator.userAgent },
      { id: FIELD_IDS.lead_source,    field_value: 'mam-php-burleson-lp' },
      { id: FIELD_IDS.submitted_at,   field_value: now },
    ].filter(f => f.field_value); // only send non-empty fields

    const contactPayload = {
      locationId: GHL_LOCATION,
      name: data.name.trim(),
      phone: data.phone.trim(),
      source: 'mam-php-burleson-lp',
      tags: ['LP Lead', 'PHP Burleson'],
      customFields: customFields,
    };

    // Also include gclid at the top level (GHL standard field)
    if (tracking.gclid) {
      contactPayload.gclid = tracking.gclid;
    }

    try {
      // Create contact directly via GHL API
      const apiRes = await fetch(GHL_API, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + GHL_TOKEN,
          'Version': '2021-07-28',
        },
        body: JSON.stringify(contactPayload),
      });

      // Also fire the webhook (triggers any workflow automations)
      fetch(GHL_WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          full_name: data.name.trim(),
          phone: data.phone.trim(),
          contact_for: data.who,
          insurance_plan: data.plan.trim(),
          ...tracking,
          page_url: window.location.href,
          landing_page: window.location.pathname,
          referrer: document.referrer || '',
          lead_source: 'mam-php-burleson-lp',
          submitted_at: now,
        }),
      }).catch(() => {}); // fire-and-forget

      // Fire Google Ads form conversion
      if (typeof gtag === 'function') {
        gtag('event', 'conversion', {
          'send_to': 'AW-307684369/sgdvCNvQ5LwcEJHI25IB',
          'value': 50.0,
          'currency': 'USD',
        });
      }
      setStatus('sent');
    } catch (err) {
      console.error('Submit error:', err);
      // Fallback: try webhook only
      try {
        await fetch(GHL_WEBHOOK, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            full_name: data.name.trim(),
            phone: data.phone.trim(),
            contact_for: data.who,
            insurance_plan: data.plan.trim(),
            ...getTrackingParams(),
            page_url: window.location.href,
            landing_page: window.location.pathname,
            referrer: document.referrer || '',
            lead_source: 'mam-php-burleson-lp',
            submitted_at: now,
          }),
        });
      } catch (e2) { /* silent */ }
      setStatus('sent'); // Show success regardless
    }
  }

  if (status === 'sent') {
    return (
      <div style={{ textAlign: 'center', padding: '18px 6px' }}>
        <div style={{ width: 60, height: 60, borderRadius: 999, background: 'var(--mint)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 16px' }}>
          <i data-lucide="check" style={{ width: 30, height: 30, color: 'var(--forest)', strokeWidth: 2.5 }}></i>
        </div>
        <div style={{ font: '600 28px var(--font-display)', color: 'var(--forest)' }}>We&rsquo;re here.</div>
        <p style={{ font: '400 15px/1.55 var(--font-body)', color: 'var(--fg2)', margin: '10px auto 0', maxWidth: 320 }}>
          Thank you. A Burleson care advocate will reach out shortly, usually within one business day. Need to talk now? Call <a href="tel:8176626179" style={{ color: 'var(--accent)', fontWeight: 700 }}>817-662-6179</a>.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 13 }}>
      <div>
        <label style={labelStyle}>Full name</label>
        <input value={data.name} placeholder="Your name" style={inputStyle('name')}
          onFocus={() => setFocus('name')} onBlur={() => setFocus('')}
          onChange={e => setData({ ...data, name: e.target.value })} />
      </div>
      <div>
        <label style={labelStyle}>Phone number</label>
        <input value={data.phone} placeholder="(817) 000-0000" inputMode="tel" style={inputStyle('phone')}
          onFocus={() => setFocus('phone')} onBlur={() => setFocus('')}
          onChange={e => setData({ ...data, phone: e.target.value })} />
      </div>
      {!compact && (
        <div className="form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 13 }}>
          <div>
            <label style={labelStyle}>This is for</label>
            <select value={data.who} style={inputStyle('who')}
              onFocus={() => setFocus('who')} onBlur={() => setFocus('')}
              onChange={e => setData({ ...data, who: e.target.value })}>
              <option>Myself</option><option>My child / teen</option><option>A loved one</option>
            </select>
          </div>
          <div>
            <label style={labelStyle}>Insurance <span style={{ fontWeight: 400, color: 'var(--fg3)' }}>(optional)</span></label>
            <input value={data.plan} placeholder="Plan or Medicaid" style={inputStyle('plan')}
              onFocus={() => setFocus('plan')} onBlur={() => setFocus('')}
              onChange={e => setData({ ...data, plan: e.target.value })} />
          </div>
        </div>
      )}
      <button type="submit" disabled={status === 'sending'}
        className="btn btn-accent btn-caps btn-block" style={{ marginTop: 5, padding: '15px 26px', opacity: status === 'sending' ? 0.7 : 1 }}>
        {status === 'sending' ? 'Sending...' : 'Check my coverage'}
      </button>
      <p style={{ font: '400 12px/1.45 var(--font-body)', color: 'var(--fg3)', margin: '1px 0 0', textAlign: 'center' }}>
        Confidential &amp; no obligation. We&rsquo;ll verify your benefits for free.
      </p>
    </form>
  );
}
window.LeadForm = LeadForm;