'use client';

import { TabProps } from '../types';
import ImageUpload from '@/components/ui/ImageUpload';

export function BrandingTab({ 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)' }}>
          Logo
        </label>
        <ImageUpload
          value={data.logo || null}
          onUpload={(publicId) => onChange('logo', publicId)}
          onRemove={() => onChange('logo', null)}
          label="Upload Logo"
          folder="settings"
          maxSize={2}
          aspectRatio={2}
          disabled={!canUpdate}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Recommended: 200x80px PNG with transparent background
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Logo Alt Text
        </label>
        <input
          type="text"
          value={data.logo_alt || ''}
          onChange={(e) => onChange('logo_alt', e.target.value)}
          disabled={!canUpdate}
          placeholder="e.g., DesiCart Logo"
          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)' }}>
          Alternative text for logo (important for accessibility and SEO)
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Footer Logo
        </label>
        <ImageUpload
          value={data.footer_logo || null}
          onUpload={(publicId) => onChange('footer_logo', publicId)}
          onRemove={() => onChange('footer_logo', null)}
          label="Upload Footer Logo"
          folder="settings"
          maxSize={2}
          aspectRatio={2}
          disabled={!canUpdate}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Recommended: 150x60px PNG. Leave empty to use main logo.
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Footer Logo Alt Text
        </label>
        <input
          type="text"
          value={data.footer_logo_alt || ''}
          onChange={(e) => onChange('footer_logo_alt', e.target.value)}
          disabled={!canUpdate}
          placeholder="e.g., DesiCart Footer Logo"
          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)' }}>
          Footer Text
        </label>
        <textarea
          rows={3}
          value={data.footer_text || ''}
          onChange={(e) => onChange('footer_text', e.target.value)}
          disabled={!canUpdate}
          placeholder="Enter footer copyright or about text"
          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"
          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)' }}>
          HTML tags are allowed (e.g., &lt;b&gt;, &lt;i&gt;, &lt;a&gt;)
        </p>
      </div>
    </div>
  );
}