'use client';

import React from 'react';
import Image from 'next/image';
import { ProfileSection } from '@/services/profile-sections.service';
import DynamicField from './DynamicField';

// Error boundary to catch rendering errors in individual sections
class SectionErrorBoundary extends React.Component<
  { sectionName: string; children: React.ReactNode },
  { hasError: boolean; error: Error | null }
> {
  constructor(props: { sectionName: string; children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    console.error(`Error rendering section "${this.props.sectionName}":`, error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="bg-white rounded-[20px] p-6 shadow-[0px_10px_20px_rgba(217,217,217,0.5)]">
          <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
            <p className="text-sm text-red-600">
              Failed to load section: {this.props.sectionName}
            </p>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

// Map section slugs to icon paths
const sectionIcons: Record<string, string> = {
  'basic-information': '/assets/icons/basic-information-icon.svg',
  'contact-information': '/assets/icons/email-orange-icon.svg',
  'location': '/assets/icons/location-orange-icon.svg',
  'professional-info': '/assets/icons/certification-icon.svg',
  'specialization': '/assets/icons/home-icon.svg',
  'experience': '/assets/icons/star-icon.svg',
  'availability': '/assets/icons/availability-clock-icon.svg',
  'biography': '/assets/icons/bio-icon.svg',
  'attached-documents': '/assets/icons/attachment-icon.svg',
  'hobbies': '/assets/icons/heart-icon.svg',
  'testimonials': '/assets/icons/quote-icon.svg',
  'certification': '/assets/icons/certification-icon.svg',
};

// Map icon names (from database) to icon paths
const iconNameToPath: Record<string, string> = {
  'star': '/assets/icons/star-icon.svg',
  'home': '/assets/icons/home-icon.svg',
  'location': '/assets/icons/location-orange-icon.svg',
  'heart': '/assets/icons/heart-icon.svg',
  'clock': '/assets/icons/availability-clock-icon.svg',
  'user': '/assets/icons/basic-information-icon.svg',
  'email': '/assets/icons/email-orange-icon.svg',
  'phone': '/assets/icons/phone-orange-icon.svg',
  'document': '/assets/icons/attachment-icon.svg',
  'certificate': '/assets/icons/certification-icon.svg',
  'certification': '/assets/icons/certification-icon.svg',
  'quote': '/assets/icons/quote-icon.svg',
  'bio': '/assets/icons/bio-icon.svg',
  'professional': '/assets/icons/professional-icon.svg',
  'wallet': '/assets/icons/wallet-icon.svg',
  'chart': '/assets/icons/chart-icon.svg',
  'dollar': '/assets/icons/dollar-icon.svg',
  'calendar': '/assets/icons/calendar-icon.svg',
};

// Default icon for sections without a specific icon
const defaultIcon = '/assets/icons/professional-icon.svg';

// Helper to check if a string is an emoji
const isEmojiString = (str: string): boolean => {
  // Emoji regex pattern - matches most common emojis
  const emojiRegex = /^[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]|[\u{1F600}-\u{1F64F}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]/u;
  return emojiRegex.test(str);
};

interface DynamicSectionProps {
  section: ProfileSection;
  formData: Record<string, unknown>;
  onChange: (fieldSlug: string, value: unknown) => void;
  errors?: Record<string, string>;
}

export default function DynamicSection({ section, formData, onChange, errors }: DynamicSectionProps) {
  // Determine icon source
  let iconPath: string = defaultIcon;
  let isEmoji = false;

  const sectionName = section.name || 'Section';
  const sectionSlug = section.slug || '';
  const sectionIcon = section.icon || '';

  if (sectionIcon) {
    if (sectionIcon.startsWith('/') || sectionIcon.startsWith('http')) {
      // It's a valid URL path
      iconPath = sectionIcon;
    } else if (isEmojiString(sectionIcon)) {
      // It's an emoji
      isEmoji = true;
    } else if (iconNameToPath[sectionIcon.toLowerCase()]) {
      // It's an icon name like "star", "home", etc.
      iconPath = iconNameToPath[sectionIcon.toLowerCase()];
    } else {
      // Fallback to slug mapping or default
      iconPath = sectionIcons[sectionSlug] || defaultIcon;
    }
  } else {
    // No icon set, use slug mapping or default
    iconPath = sectionIcons[sectionSlug] || defaultIcon;
  }

  // Sort fields by sortOrder - safely handle missing/null fields
  const fields = Array.isArray(section.fields) ? section.fields : [];
  const sortedFields = [...fields].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
  const activeFields = sortedFields.filter(f => f.isActive && !f.isSearchableOnly);

  if (activeFields.length === 0) {
    return null;
  }

  return (
    <SectionErrorBoundary sectionName={sectionName}>
      <div
        id={sectionSlug}
        className="bg-white rounded-[20px] p-6 shadow-[0px_10px_20px_rgba(217,217,217,0.5)] scroll-mt-[100px]"
      >
        {/* Section Header */}
        <div className="flex items-center gap-3 mb-6">
          <div className="w-[40px] h-[40px] flex items-center justify-center">
            {isEmoji ? (
              <span className="text-2xl">{sectionIcon}</span>
            ) : (
              <Image
                src={iconPath}
                alt={sectionName}
                width={24}
                height={24}
                className="object-contain"
              />
            )}
          </div>
          <div>
            <h2 className="text-[18px] font-bold font-serif text-[#00293D]">
              {sectionName}
              {section.isRequired && <span className="text-red-500 ml-1">*</span>}
            </h2>
            {section.description && (
              <p className="text-[12px] text-gray-500">{section.description}</p>
            )}
          </div>
        </div>

        {/* Section Fields */}
        <div className="space-y-4">
          {activeFields.map((field) => (
            <DynamicField
              key={field.id}
              field={field}
              value={formData[field.slug]}
              onChange={onChange}
              error={errors?.[field.slug]}
            />
          ))}
        </div>
      </div>
    </SectionErrorBoundary>
  );
}
