'use client';

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

export function LegalTab({ 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)' }}>
            Privacy Policy Page ID
          </label>
          <input
            type="number"
            min="0"
            value={data.privacy_policy_page_url || ''}
            onChange={(e) => onChange('privacy_policy_page_url', e.target.value ? parseInt(e.target.value) : null)}
            disabled={!canUpdate}
            placeholder="Enter page 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)' }}>
            Page ID from pages table. Leave empty if not set.
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Terms & Conditions Page ID
          </label>
          <input
            type="number"
            min="0"
            value={data.terms_page_url || ''}
            onChange={(e) => onChange('terms_page_url', e.target.value ? parseInt(e.target.value) : null)}
            disabled={!canUpdate}
            placeholder="Enter page 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>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Return Policy Page ID
          </label>
          <input
            type="number"
            min="0"
            value={data.return_policy_page_url || ''}
            onChange={(e) => onChange('return_policy_page_url', e.target.value ? parseInt(e.target.value) : null)}
            disabled={!canUpdate}
            placeholder="Enter page 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>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Shipping Policy Page ID
          </label>
          <input
            type="number"
            min="0"
            value={data.shipping_policy_page_url || ''}
            onChange={(e) => onChange('shipping_policy_page_url', e.target.value ? parseInt(e.target.value) : null)}
            disabled={!canUpdate}
            placeholder="Enter page 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 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)' }}>
          💡 Enter the page ID from your pages table. These will be linked in the footer and checkout pages.
        </p>
      </div>
    </div>
  );
}