'use client';

import { TabProps } from '../types';

export function AnalyticsTab({ data, onChange, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Google Analytics ID
          </label>
          <input
            type="text"
            value={data.google_analytics_id || ''}
            onChange={(e) => onChange('google_analytics_id', e.target.value)}
            disabled={!canUpdate}
            placeholder="G-XXXXXXXXXX or UA-XXXXXXXX-X"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            GA4: G-XXXXXXXXXX | Universal: UA-XXXXXXXX-X
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Google Tag Manager ID
          </label>
          <input
            type="text"
            value={data.google_tag_manager_id || ''}
            onChange={(e) => onChange('google_tag_manager_id', e.target.value)}
            disabled={!canUpdate}
            placeholder="GTM-XXXXXXXX"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            GTM container ID for tag management
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Facebook Pixel ID
          </label>
          <input
            type="text"
            value={data.facebook_pixel_id || ''}
            onChange={(e) => onChange('facebook_pixel_id', e.target.value)}
            disabled={!canUpdate}
            placeholder="123456789012345"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Facebook Pixel ID for conversion tracking
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            TikTok Pixel ID
          </label>
          <input
            type="text"
            value={data.tiktok_pixel_id || ''}
            onChange={(e) => onChange('tiktok_pixel_id', e.target.value)}
            disabled={!canUpdate}
            placeholder="TikTok Pixel ID"
            className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50"
            style={{
              background: 'var(--color-surface-alt)',
              border: '1px solid var(--color-border)',
              color: 'var(--color-text)',
            }}
          />
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Custom Body Scripts
        </label>
        <textarea
          rows={4}
          value={data.custom_body_scripts || ''}
          onChange={(e) => onChange('custom_body_scripts', e.target.value)}
          disabled={!canUpdate}
          placeholder={`<!-- Example: Facebook Pixel -->\n<script>\n  !function(f,b,e,v,n,t,s)\n  {...}\n</script>`}
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50 resize-none font-mono"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Scripts inserted after opening &lt;body&gt; tag (e.g., pixel events, analytics)
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Custom Footer Scripts
        </label>
        <textarea
          rows={4}
          value={data.custom_footer_scripts || ''}
          onChange={(e) => onChange('custom_footer_scripts', e.target.value)}
          disabled={!canUpdate}
          placeholder={`<!-- Example: Live Chat -->\n<script>\n  // Live chat code here\n</script>`}
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20 disabled:opacity-50 resize-none font-mono"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Scripts inserted before closing &lt;/body&gt; tag (e.g., live chat, retargeting)
        </p>
      </div>
    </div>
  );
}