'use client';

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

export function SocialLoginTab({ data, onChange, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div className="border-b pb-4" style={{ borderColor: 'var(--color-border)' }}>
        <h3 className="text-sm font-medium mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          Google OAuth Settings
        </h3>
        <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 Client ID
            </label>
            <input
              type="text"
              value={data.google_client_id || ''}
              onChange={(e) => onChange('google_client_id', e.target.value)}
              disabled={!canUpdate}
              placeholder="Your Google Client 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)',
              }}
            />
            <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
              From Google Cloud Console → Credentials
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              Google Client Secret
            </label>
            <input
              type="password"
              value={data.google_client_secret || ''}
              onChange={(e) => onChange('google_client_secret', e.target.value)}
              disabled={!canUpdate}
              placeholder="••••••••"
              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)' }}>
              Leave empty to keep current value
            </p>
          </div>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          Facebook OAuth Settings
        </h3>
        <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)' }}>
              Facebook App ID
            </label>
            <input
              type="text"
              value={data.facebook_app_id || ''}
              onChange={(e) => onChange('facebook_app_id', e.target.value)}
              disabled={!canUpdate}
              placeholder="Your Facebook App 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)',
              }}
            />
            <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
              From Facebook Developers → Apps
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              Facebook App Secret
            </label>
            <input
              type="password"
              value={data.facebook_app_secret || ''}
              onChange={(e) => onChange('facebook_app_secret', e.target.value)}
              disabled={!canUpdate}
              placeholder="••••••••"
              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)' }}>
              Leave empty to keep current value
            </p>
          </div>
        </div>
      </div>

      <div className="p-4 rounded-lg" style={{ 
        background: 'var(--color-surface-alt)',
        border: '1px solid var(--color-border)'
      }}>
        <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
          💡 Social login allows customers to sign in using their Google or Facebook accounts. 
          Redirect URIs: {process.env.NEXT_PUBLIC_APP_URL}/api/auth/callback
        </p>
      </div>
    </div>
  );
}