'use client';

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

export function ContactTab({ data, onChange, errors, 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)' }}>
            Phone Number
          </label>
          <input
            type="tel"
            value={data.phone_number || ''}
            onChange={(e) => onChange('phone_number', e.target.value)}
            disabled={!canUpdate}
            placeholder="+92 300 1234567"
            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)' }}>
            Include country code for international format
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Phone Number 2 (Optional)
          </label>
          <input
            type="tel"
            value={data.phone_number_2 || ''}
            onChange={(e) => onChange('phone_number_2', e.target.value)}
            disabled={!canUpdate}
            placeholder="+92 300 7654321"
            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)' }}>
            WhatsApp Number
          </label>
          <input
            type="tel"
            value={data.whatsapp_number || ''}
            onChange={(e) => onChange('whatsapp_number', e.target.value)}
            disabled={!canUpdate}
            placeholder="+92 300 1234567"
            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)' }}>
            Used for WhatsApp chat button on website
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Email Address
          </label>
          <input
            type="email"
            value={data.email || ''}
            onChange={(e) => onChange('email', e.target.value)}
            disabled={!canUpdate}
            placeholder="info@desicart.pk"
            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 ${errors.email ? 'var(--color-danger)' : 'var(--color-border)'}`,
              color: 'var(--color-text)',
            }}
          />
          {errors.email && (
            <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>{errors.email}</p>
          )}
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Main contact email displayed on website
          </p>
        </div>

        <div>
          <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
            Support Email
          </label>
          <input
            type="email"
            value={data.support_email || ''}
            onChange={(e) => onChange('support_email', e.target.value)}
            disabled={!canUpdate}
            placeholder="support@desicart.pk"
            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 ${errors.support_email ? 'var(--color-danger)' : 'var(--color-border)'}`,
              color: 'var(--color-text)',
            }}
          />
          {errors.support_email && (
            <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>{errors.support_email}</p>
          )}
          <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
            Dedicated support email for customer inquiries
          </p>
        </div>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Address
        </label>
        <textarea
          rows={3}
          value={data.address || ''}
          onChange={(e) => onChange('address', e.target.value)}
          disabled={!canUpdate}
          placeholder="123 Main Street, City, Country"
          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)' }}>
          Physical address of your business
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Google Maps Embed URL
        </label>
        <input
          type="url"
          value={data.google_maps_embed_url || ''}
          onChange={(e) => onChange('google_maps_embed_url', e.target.value)}
          disabled={!canUpdate}
          placeholder="https://www.google.com/maps/embed?pb=..."
          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 ${errors.google_maps_embed_url ? 'var(--color-danger)' : 'var(--color-border)'}`,
            color: 'var(--color-text)',
          }}
        />
        {errors.google_maps_embed_url && (
          <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>{errors.google_maps_embed_url}</p>
        )}
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Get embed URL from Google Maps → Share → Embed map
        </p>
      </div>
    </div>
  );
}