// Step 5 — Tracking: Meta Pixel, OneSignal, GA

const TrackingService = ({ icon: Ic, accent, name, desc, idLabel, idPlaceholder, value, onChange, events, badge }) => {
  const enabled = !!value;
  return (
    <div className="panel" style={{ padding: 22, position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, marginBottom: 16 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 10,
          background: `${accent}1A`, border: `1px solid ${accent}40`,
          color: accent, display: 'grid', placeItems: 'center', flexShrink: 0,
        }}>
          <Ic size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 15, fontWeight: 600 }}>{name}</span>
            {badge && <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 8, background: 'var(--bg-3)', color: 'var(--muted)', fontFamily: 'JetBrains Mono, monospace' }}>{badge}</span>}
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{desc}</div>
        </div>
        <window.Toggle on={enabled} onChange={(v) => { if (!v) onChange(''); }} />
      </div>

      <div className="field" style={{ marginBottom: 0 }}>
        <label style={{ marginBottom: 6 }}>{idLabel}</label>
        <input
          type="text"
          className="mono"
          value={value}
          onChange={e => onChange(e.target.value)}
          placeholder={idPlaceholder}
        />
      </div>

      {events && enabled && (
        <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line-soft)' }}>
          <div style={{ fontSize: 10.5, color: 'var(--muted-2)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, marginBottom: 8 }}>
            Events that will fire
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {events.map(ev => (
              <div key={ev.name} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12 }}>
                <code style={{ background: 'var(--bg-3)', padding: '2px 7px', borderRadius: 4, color: 'var(--text)', minWidth: 130, fontSize: 11 }}>{ev.name}</code>
                <span style={{ color: 'var(--muted)', flex: 1 }}>{ev.when}</span>
                {ev.star && <span style={{ color: 'var(--warn)' }}>★</span>}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const Step5Tracking = ({ draft, setDraft }) => {
  const { SectionTitle, IconFacebook, IconBell, IconChart } = window;

  return (
    <div className="step-anim">
      <SectionTitle
        kicker="Step 05 / 07"
        title="Pixels, push & analytics"
        desc="All three are optional. Each app keeps its own IDs — no shared state. Toggle off the ones you're not using."
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <TrackingService
          icon={IconFacebook}
          accent="#66b3ff"
          name="Meta Pixel"
          badge="primary"
          desc="Track install funnel back to Meta for paid social attribution & optimization."
          idLabel="Pixel ID"
          idPlaceholder="1234567890123456"
          value={draft.metaPixelId}
          onChange={(v) => setDraft({ ...draft, metaPixelId: v })}
          events={[
            { name: 'PageView',         when: 'Pre-lander loads' },
            { name: 'ViewContent',      when: 'Pre-lander rendered' },
            { name: 'AddToCart',        when: 'User clicks Install' },
            { name: 'Lead',             when: 'PWA installed', star: true },
            { name: 'InitiateCheckout', when: 'Casino URL fetched' },
            { name: 'Purchase',         when: 'FTD posted back from RP' },
          ]}
        />

        <TrackingService
          icon={IconBell}
          accent="#b794f4"
          name="OneSignal Push"
          desc="Re-engage users with push after install. Requires HTTPS and the OneSignal service worker."
          idLabel="App ID"
          idPlaceholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
          value={draft.oneSignalId}
          onChange={(v) => setDraft({ ...draft, oneSignalId: v })}
          events={[
            { name: 'opt-in prompt', when: 'After install on first open' },
            { name: 'welcome push',  when: '60 seconds after opt-in' },
          ]}
        />

        <TrackingService
          icon={IconChart}
          accent="#00d084"
          name="Google Analytics 4"
          desc="Funnel insight beyond Meta — GEO heatmap, page timing, bounce."
          idLabel="Measurement ID"
          idPlaceholder="G-XXXXXXXXXX"
          value={draft.gaId}
          onChange={(v) => setDraft({ ...draft, gaId: v })}
          events={[
            { name: 'page_view', when: 'Every page load' },
            { name: 'install',   when: 'PWA installed' },
          ]}
        />
      </div>

      <div style={{
        marginTop: 22, padding: '12px 16px',
        background: 'var(--info-dim)', border: '1px solid rgba(103,179,255,0.25)',
        borderRadius: 10, fontSize: 12.5, color: 'var(--text-dim)',
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <window.IconActivity size={16} style={{ color: 'var(--info)', flexShrink: 0, marginTop: 1 }} />
        <span>
          IDs are injected into the deployed PWA on launch — no manual paste needed. Existing apps re-deploy automatically when you change a tracking ID.
        </span>
      </div>
    </div>
  );
};

window.Step5Tracking = Step5Tracking;