'use client';

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

export function SEOTab({ data, onChange, canUpdate }: TabProps) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Robots.txt
        </label>
        <textarea
          rows={6}
          value={data.robots_txt || ''}
          onChange={(e) => onChange('robots_txt', e.target.value)}
          disabled={!canUpdate}
          placeholder={`User-agent: *\nAllow: /\nDisallow: /admin/\nDisallow: /api/`}
          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)' }}>
          Define search engine crawling rules. One directive per line.
        </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)' }}>
            Google Site Verification
          </label>
          <input
            type="text"
            value={data.google_site_verification || ''}
            onChange={(e) => onChange('google_site_verification', e.target.value)}
            disabled={!canUpdate}
            placeholder="Google verification code"
            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 Search Console verification
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Bing Site Verification
          </label>
          <input
            type="text"
            value={data.bing_site_verification || ''}
            onChange={(e) => onChange('bing_site_verification', e.target.value)}
            disabled={!canUpdate}
            placeholder="Bing verification code"
            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 Bing Webmaster Tools verification
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Pinterest Verification
          </label>
          <input
            type="text"
            value={data.pinterest_verification || ''}
            onChange={(e) => onChange('pinterest_verification', e.target.value)}
            disabled={!canUpdate}
            placeholder="Pinterest verification code"
            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)' }}>
            Yandex Verification
          </label>
          <input
            type="text"
            value={data.yandex_verification || ''}
            onChange={(e) => onChange('yandex_verification', e.target.value)}
            disabled={!canUpdate}
            placeholder="Yandex verification code"
            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)' }}>
            Baidu Verification
          </label>
          <input
            type="text"
            value={data.baidu_verification || ''}
            onChange={(e) => onChange('baidu_verification', e.target.value)}
            disabled={!canUpdate}
            placeholder="Baidu verification code"
            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)' }}>
            For Baidu search engine (Chinese market)
          </p>
        </div>
      </div>
    </div>
  );
}