'use client';

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

export function PaymentTab({ data, onChange, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div className="border-b pb-6" style={{ borderColor: 'var(--color-border)' }}>
        <h3 className="text-sm font-medium mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          PayPal 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)' }}>
              PayPal Client ID
            </label>
            <input
              type="text"
              value={data.paypal_client_id || ''}
              onChange={(e) => onChange('paypal_client_id', e.target.value)}
              disabled={!canUpdate}
              placeholder="Your PayPal 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 PayPal Developer Dashboard → Apps & Credentials
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              PayPal Client Secret
            </label>
            <input
              type="password"
              value={data.paypal_client_secret || ''}
              onChange={(e) => onChange('paypal_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>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              PayPal Mode
            </label>
            <select
              value={data.paypal_mode || 'sandbox'}
              onChange={(e) => onChange('paypal_mode', e.target.value)}
              disabled={!canUpdate}
              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)',
              }}
            >
              <option value="sandbox">Sandbox (Testing)</option>
              <option value="live">Live (Production)</option>
            </select>
            <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
              Use Sandbox for testing, Live for real transactions
            </p>
          </div>
        </div>
      </div>

      <div>
        <h3 className="text-sm font-medium mb-4" style={{ color: 'var(--color-text-secondary)' }}>
          Stripe 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)' }}>
              Stripe Publishable Key
            </label>
            <input
              type="text"
              value={data.stripe_publishable_key || ''}
              onChange={(e) => onChange('stripe_publishable_key', e.target.value)}
              disabled={!canUpdate}
              placeholder="pk_test_..."
              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 Stripe Dashboard → Developers → API Keys
            </p>
          </div>

          <div>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              Stripe Secret Key
            </label>
            <input
              type="password"
              value={data.stripe_secret_key || ''}
              onChange={(e) => onChange('stripe_secret_key', e.target.value)}
              disabled={!canUpdate}
              placeholder="sk_test_..."
              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>
            <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
              Stripe Webhook Secret
            </label>
            <input
              type="password"
              value={data.stripe_webhook_secret || ''}
              onChange={(e) => onChange('stripe_webhook_secret', e.target.value)}
              disabled={!canUpdate}
              placeholder="whsec_..."
              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)' }}>
              Webhook signing secret for payment confirmation
            </p>
          </div>
        </div>
      </div>

      <div className="p-4 rounded-lg" style={{ 
        background: 'var(--color-surface-alt)',
        border: '1px solid var(--color-border)'
      }}>
        <h4 className="text-sm font-medium mb-2" style={{ color: 'var(--color-text-secondary)' }}>
          Payment Gateway Tips:
        </h4>
        <ul className="text-xs space-y-1" style={{ color: 'var(--color-text-tertiary)' }}>
          <li>• Always use Sandbox/Test keys first</li>
          <li>• Webhook URLs: {process.env.NEXT_PUBLIC_APP_URL}/api/webhooks/stripe</li>
          <li>• IPN URLs: {process.env.NEXT_PUBLIC_APP_URL}/api/webhooks/paypal</li>
          <li>• Enable webhooks in your gateway dashboard</li>
        </ul>
      </div>
    </div>
  );
}