import { useState, useEffect } from 'react';
import { Download } from 'lucide-react';
import { useLocation, useNavigate } from 'react-router-dom';
import type { StatItem } from '../../data/StatItem';
import { scrollToProjects, scrollToSection } from '../../utils/scrollUtils';
import { useLanguage } from '../../contexts/LanguageContext';
import { useScreenReaderAnnouncements } from '../../hooks/useScreenReaderAnnouncements';
import resumePDF from '../../assets/CV_Sascha_Bach.pdf';

interface HeroSectionProps {
  title?: string;
  description?: string;
  primaryButtonText?: string;
  secondaryButtonText?: string;
  tertiaryButtonText?: string;
  statItems?: StatItem[];
  hideStats?: boolean;
  showPrimaryButton?: boolean;
  showSecondaryButton?: boolean;
  showTertiaryButton?: boolean;
}

export default function HeroSection(props: HeroSectionProps = {}) {
  const { texts: allTexts } = useLanguage();
  const texts = allTexts.hero;
  const accessibilityTexts = allTexts.accessibility;

  // Use centralized texts as defaults, allow props to override
  const {
    title = texts.title,
    description = texts.description,
    primaryButtonText = texts.primaryButtonText,
    secondaryButtonText = texts.secondaryButtonText,
    tertiaryButtonText = texts.tertiaryButtonText,
    statItems = texts.statItems,
    hideStats = false,
    showPrimaryButton = true,
    showSecondaryButton = true,
    showTertiaryButton = true,
  } = props;
  const location = useLocation();
  const navigate = useNavigate();
  const { announce } = useScreenReaderAnnouncements();

  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    if (document.readyState === 'complete') {
      setLoaded(true);
    } else {
      const onLoad = () => setLoaded(true);
      window.addEventListener('load', onLoad);
      return () => window.removeEventListener('load', onLoad);
    }
  }, []);

  const handleViewWork = () => {
    announce('Navigating to projects section');
    scrollToProjects(location.pathname, navigate);
  };

  const handleDownloadResume = () => {
    try {
      announce('Starting resume download');

      const link = document.createElement('a');
      link.href = resumePDF;
      link.download = 'CV_Sascha_Bach.pdf';
      link.target = '_blank';

      document.body.appendChild(link);
      link.click();
      link.remove();

      announce('Resume download started successfully');
    } catch {
      announce('Resume download failed, opening in new tab');
      window.open(resumePDF, '_blank');
    }
  };

  const handleGetInTouch = () => {
    announce('Navigating to contact section');
    scrollToSection('contact', location.pathname, navigate);
  };

  return (
    <main className={`hero-section${loaded ? ' hero-section--loaded' : ''}`} aria-labelledby="hero-title">
      <div className="hero-section__container">
        {/* Skip link for keyboard navigation */}
        <div className="hero-section__skip">
          <a href="#about" className="sr-only sr-only-focusable">
            {accessibilityTexts.skipLinks.skipToAbout}
          </a>
        </div>

        <header className="hero-section__header">
          <h1 id="hero-title" className="hero-section__title">{title}</h1>
          <p className="hero-section__description">
            {description}
          </p>
        </header>

        <nav className="hero-section__buttons" role="navigation" aria-label="Main actions">
          {showPrimaryButton && (
            <button
              className="hero-section__button hero-section__button--primary"
              onClick={handleViewWork}
              aria-label="View my work and projects"
              type="button"
            >
              {primaryButtonText}
            </button>
          )}
          {showSecondaryButton && (
            <button
              className="hero-section__button hero-section__button--secondary"
              onClick={handleDownloadResume}
              aria-label="Download my resume as PDF file"
              type="button"
              aria-describedby="resume-description"
            >
              <Download className="hero-section__button-icon" aria-hidden="true" />
              {secondaryButtonText}
            </button>
          )}
          {showTertiaryButton && (
            <button
              className="hero-section__button hero-section__button--tertiary"
              onClick={handleGetInTouch}
              aria-label="Navigate to contact section to get in touch"
              type="button"
            >
              {tertiaryButtonText}
            </button>
          )}
        </nav>

        {/* Hidden descriptions for screen readers */}
        <div id="resume-description" className="sr-only">
          {accessibilityTexts.screenReader.downloadResumeDescription}
        </div>

        {!hideStats && (
          <aside className="hero-section__stats" aria-labelledby="stats-heading">
            <h2 id="stats-heading" className="sr-only">{accessibilityTexts.screenReader.professionalStatistics}</h2>
            {statItems.map((item, index) => (
              <div
                key={item.label}
                className={`hero-section__stat-item hero-section__stat-item--${index + 1}`}
                aria-labelledby={`stat-${index}-label`}
              >
                <span
                  className="hero-section__stat-value"
                  aria-describedby={`stat-${index}-label`}
                >
                  {item.value}
                </span>
                <span
                  id={`stat-${index}-label`}
                  className="hero-section__stat-label"
                >
                  {item.label}
                </span>
              </div>
            ))}
          </aside>
        )}
      </div>
    </main>
  );
}