'use client';

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

export function ReferralTab({ data, onChange, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div>
        <div className="flex items-center gap-3 p-4 rounded-lg border" style={{ 
          borderColor: 'var(--color-border)',
          background: 'var(--color-surface-alt)'
        }}>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={data.referral_enabled ?? true}
              onChange={() => {
                const currentValue = data.referral_enabled ?? true;
                onChange('referral_enabled', !currentValue);
              }}
              disabled={!canUpdate}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-200 peer-focus:ring-2 peer-focus:ring-cta/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cta" style={{
              background: data.referral_enabled ? 'var(--color-cta)' : 'var(--color-border)',
            }}></div>
            <span className="ml-3 text-sm font-medium" style={{ color: 'var(--color-text)' }}>
              {data.referral_enabled ? 'Enabled' : 'Disabled'}
            </span>
          </label>
        </div>
        <p className="text-xs mt-2" style={{ color: 'var(--color-text-tertiary)' }}>
          Enable referral program to reward customers for referring others
        </p>
      </div>

      <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)' }}>
            Referral Reward Type
          </label>
          <select
            value={data.referral_reward_type || 'percentage'}
            onChange={(e) => onChange('referral_reward_type', 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="percentage">Percentage (%)</option>
            <option value="fixed">Fixed Amount</option>
          </select>
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            How the referral reward is calculated
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Referral Reward Value
          </label>
          <input
            type="number"
            step="0.01"
            min="0"
            value={data.referral_reward_value || 5}
            onChange={(e) => onChange('referral_reward_value', parseFloat(e.target.value) || 0)}
            disabled={!canUpdate}
            placeholder="5.00"
            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)' }}>
            Value of referral reward (percentage or fixed amount)
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Minimum Order to Earn Referral
          </label>
          <input
            type="number"
            step="0.01"
            min="0"
            value={data.referral_min_order_to_earn || 300}
            onChange={(e) => onChange('referral_min_order_to_earn', parseFloat(e.target.value) || 0)}
            disabled={!canUpdate}
            placeholder="300.00"
            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)' }}>
            Minimum order amount required to earn referral reward
          </p>
        </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)' }}>
          How Referral Program Works:
        </h4>
        <ul className="text-xs space-y-1" style={{ color: 'var(--color-text-tertiary)' }}>
          <li>• Customers get a unique referral link</li>
          <li>• When someone orders using their link, they earn a reward</li>
          <li>• Rewards can be used as store credit for future purchases</li>
          <li>• Minimum order amount must be met to earn the reward</li>
        </ul>
      </div>
    </div>
  );
}