import { useRef, useState, useEffect } from 'react';
import { Code, Palette, ShieldCheck, Eye } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
import FeatureCardsGrid from '../FeatureCardsGrid';
import type { Service } from '../../data/Service';
import saschaImage from '../../assets/sascha.png';
import saschaPixel from '../../assets/sascha_pixel.svg';

// Define feature card icon and color mappings as constants
const FEATURE_CARD_ICONS = [Code, Palette, ShieldCheck, Eye] as const;
const FEATURE_CARD_COLORS = ['primary', 'secondary', 'tertiary', 'quaternary'] as const;

interface AboutSectionProps {
  name?: string;
  title?: string;
  subtitle?: string;
  greeting?: string;
  bio?: string[];
  profileImage?: string;
  featureCards?: Service[];
}

export default function AboutSection(props: AboutSectionProps = {}) {
  const { texts: allTexts } = useLanguage();
  const texts = allTexts.about;
  const accessibilityTexts = allTexts.accessibility;

  // Use centralized texts as defaults, allow props to override
  const {
    name = texts.name,
    title = texts.title,
    subtitle = texts.subtitle,
    greeting,
    bio = texts.bio,
    profileImage = saschaImage,
    featureCards = texts.featureCards.map((card, index) => ({
      icon: FEATURE_CARD_ICONS[index] || Code,
      title: card.title,
      description: card.description,
      colorClass: (FEATURE_CARD_COLORS[index])
    }))
  } = props;

  const wrapperRef = useRef<HTMLDivElement>(null);
  const [fading, setFading] = useState(false);

  useEffect(() => {
    const el = wrapperRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          const timer = setTimeout(() => setFading(true), 2000);
          observer.disconnect();
          return () => clearTimeout(timer);
        }
      },
      { threshold: 0.4 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <section id="about" className="about-section" aria-labelledby="about-title">
      <div className="about-section__container">
        {/* Section Header */}
        <header className="about-section__header">
          <h2 id="about-title" className="about-section__title">
            {title}
          </h2>
          {subtitle && (
            <p className="about-section__subtitle">
              {subtitle}
            </p>
          )}
        </header>

        {/* Skip link for keyboard navigation */}
        <div className="about-section__skip">
          <a href="#services" className="sr-only sr-only-focusable">
            {accessibilityTexts.skipLinks.skipToServices}
          </a>
        </div>

        {/* Personal Photo and Bio */}
        <main className="about-section__content">
          <div className="about-section__image-wrapper" ref={wrapperRef}>
            <img
              src={profileImage}
              alt={`Professional headshot of ${name}, Web Developer and Software Engineer`}
              className="about-section__image"
              loading="lazy"
            />
            <div className="about-section__image-overlay" aria-hidden="true"></div>
            <div
              aria-hidden="true"
              className={`about-section__pixel-bg${fading ? ' about-section__pixel-bg--fade' : ''}`}
            />
            <img
              src={saschaPixel}
              alt=""
              aria-hidden="true"
              className={`about-section__pixel-overlay${fading ? ' about-section__pixel-overlay--fade' : ''}`}
            />
          </div>

          <div className="about-section__bio-section">
            <div className="about-section__bio-content">
              <h3 className="about-section__greeting">
                {greeting ?? `Hi, I'm ${name}!`}
              </h3>
              <div className="about-section__bio-text">
                {bio.map((paragraph) => (
                  <p key={paragraph}>{paragraph}</p>
                ))}
              </div>
            </div>
          </div>
        </main>

        {/* Feature Cards Grid */}
        <FeatureCardsGrid featureCards={featureCards} />
      </div>
    </section >
  );
}