'use client';

import { TabProps } from '../types';
import { GeneralSettings } from '@/lib/validations/settings.validation';

// ─── Type Definitions ─────────────────────────────────────────────────────────

type SocialFieldKey = Extract<keyof GeneralSettings, 
  'facebook_url' | 'instagram_url' | 'twitter_url' | 'youtube_url' | 
  'tiktok_url' | 'pinterest_url' | 'linkedin_url' | 'snapchat_url'
>;

interface SocialField {
  key: SocialFieldKey;
  label: string;
  placeholder: string;
  icon?: string;
}

// ─── Component ───────────────────────────────────────────────────────────────

export function SocialTab({ data, onChange, errors, canUpdate }: TabProps) {
  const socialFields: SocialField[] = [
    { key: 'facebook_url', label: 'Facebook', placeholder: 'https://facebook.com/your-page', icon: '📘' },
    { key: 'instagram_url', label: 'Instagram', placeholder: 'https://instagram.com/your-username', icon: '📷' },
    { key: 'twitter_url', label: 'Twitter / X', placeholder: 'https://twitter.com/your-username', icon: '🐦' },
    { key: 'youtube_url', label: 'YouTube', placeholder: 'https://youtube.com/@your-channel', icon: '▶️' },
    { key: 'tiktok_url', label: 'TikTok', placeholder: 'https://tiktok.com/@your-username', icon: '🎵' },
    { key: 'pinterest_url', label: 'Pinterest', placeholder: 'https://pinterest.com/your-username', icon: '📌' },
    { key: 'linkedin_url', label: 'LinkedIn', placeholder: 'https://linkedin.com/company/your-company', icon: '💼' },
    { key: 'snapchat_url', label: 'Snapchat', placeholder: 'https://snapchat.com/add/your-username', icon: '👻' },
  ];

  // ─── Type-safe value getter ──────────────────────────────────────────────

  const getFieldValue = (key: SocialFieldKey): string => {
    const value = data[key];
    // Ensure we return a string for the input value
    if (typeof value === 'string') {
      return value;
    }
    return '';
  };

  // ─── Type-safe change handler ────────────────────────────────────────────

  const handleFieldChange = (key: SocialFieldKey, value: string) => {
    onChange(key, value);
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {socialFields.map((field) => {
          const fieldValue = getFieldValue(field.key);
          const hasError = !!errors[field.key];

          return (
            <div key={field.key}>
              <label 
                htmlFor={field.key}
                className="block text-sm font-medium mb-1.5"
                style={{ color: 'var(--color-text-secondary)' }}
              >
                <span className="mr-1">{field.icon}</span>
                {field.label}
              </label>
              <div className="relative">
                <input
                  id={field.key}
                  type="url"
                  value={fieldValue}
                  onChange={(e) => handleFieldChange(field.key, e.target.value)}
                  disabled={!canUpdate}
                  placeholder={field.placeholder}
                  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 ${hasError ? 'var(--color-danger)' : 'var(--color-border)'}`,
                    color: 'var(--color-text)',
                  }}
                />
                {fieldValue && (
                  <span className="absolute right-3 top-1/2 -translate-y-1/2 text-xs px-2 py-0.5 rounded-full" style={{
                    background: 'var(--color-success)',
                    color: 'white',
                  }}>
                    ✓
                  </span>
                )}
              </div>
              {hasError && (
                <p className="text-xs mt-1" style={{ color: 'var(--color-danger)' }}>
                  {errors[field.key]}
                </p>
              )}
              <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
                Enter full URL including https://
              </p>
            </div>
          );
        })}
      </div>

      <div className="p-4 rounded-lg" style={{ 
        background: 'var(--color-surface-alt)',
        border: '1px solid var(--color-border)'
      }}>
        <div className="flex items-start gap-2">
          <span className="text-lg">💡</span>
          <div>
            <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
              <strong>Pro Tip:</strong> Leave fields empty if you don`t want to display that social media link on your website.
              Icons will appear in the footer and contact page.
            </p>
          </div>
        </div>
      </div>

      {/* Preview Section */}
      <div className="p-4 rounded-lg border" style={{ 
        borderColor: 'var(--color-border)',
        background: 'var(--color-surface)'
      }}>
        <h4 className="text-sm font-medium mb-3" style={{ color: 'var(--color-text-secondary)' }}>
          👁️ Preview
        </h4>
        <div className="flex flex-wrap gap-3">
          {socialFields.map((field) => {
            const value = getFieldValue(field.key);
            if (!value) return null;
            
            return (
              <a
                key={field.key}
                href={value}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-1 px-3 py-1.5 rounded-full text-xs transition-all hover:scale-105"
                style={{
                  background: 'var(--color-surface-alt)',
                  border: '1px solid var(--color-border)',
                  color: 'var(--color-text)',
                }}
              >
                <span>{field.icon}</span>
                <span>{field.label}</span>
              </a>
            );
          })}
          {socialFields.every(f => !getFieldValue(f.key)) && (
            <span className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
              No social links added yet
            </span>
          )}
        </div>
      </div>
    </div>
  );
}