import { GitBranch, ExternalLink } from 'lucide-react';
import { useLanguage } from '../../contexts/LanguageContext';
import type { Project } from '../../data/Project';
import { useScreenReaderAnnouncements } from '../../hooks/useScreenReaderAnnouncements';
import { useProjectKeyboardNavigation } from '../../hooks/useProjectKeyboardNavigation';


interface ProjectsSectionProps {
  title?: string;
  subtitle?: string;
  projects?: Project[];
}

export default function ProjectsSection(props: ProjectsSectionProps = {}) {
  const { texts: allTexts } = useLanguage();
  const texts = allTexts.projects;
  const accessibilityTexts = allTexts.accessibility;
  const localizedProjectsData: Project[] = texts.projectItems.map((item) => ({
    id: item.id,
    title: item.title,
    description: item.description,
    image: item.image || '',
    technologies: item.technologies || [],
    year: item.year,
    github: item.github,
    live: item.live,
  }));

  // Use centralized texts as defaults, allow props to override
  const {
    title = texts.title,
    subtitle = texts.subtitle,
    projects = [...localizedProjectsData].sort((a, b) => {
      const yearA = Number.parseInt(a.year || '0');
      const yearB = Number.parseInt(b.year || '0');
      return yearB - yearA; // Descending order (newest first)
    })
  } = props;

  // Custom hooks for accessibility and keyboard navigation
  const { announce } = useScreenReaderAnnouncements();
  const {
    activeCardIndex,
    cardRefs,
    actionRefs,
    handleCardSelect,
    handleCardKeyDown,
    handleActionKeyDown,
    getProjectActions,
  } = useProjectKeyboardNavigation({
    projects,
    announce,
    useTabToNavigateText: accessibilityTexts.navigation.useTabToNavigate,
  });

  return (
    <section id="projects" className="projects-section">
      <div className="projects-section__container">
        {/* Section Header */}
        <div className="projects-section__header">
          <h2 className="projects-section__title">
            {title}
          </h2>
          <p className="projects-section__subtitle">
            {subtitle}
          </p>
        </div>

        {/* Keyboard navigation instructions */}
        <div className="projects-section__instructions sr-only" aria-live="polite">
          <p>{accessibilityTexts.navigation.useTabToNavigateCards}</p>
        </div>

        {/* Global keyboard shortcuts info - MOVED BEFORE CARDS */}
        <div className="projects-section__help" id="keyboard-help">
          <details className="projects-section__help-details">
            <summary className="projects-section__help-summary">Keyboard Navigation Help</summary>
            <div className="projects-section__help-content">
              <ul>
                <li><kbd>Tab</kbd> - Navigate between cards and actions</li>
                <li><kbd>Enter</kbd> or <kbd>Space</kbd> - Select/activate a card</li>
                <li><kbd>Escape</kbd> - Close selected card</li>
                <li><kbd>↑</kbd><kbd>↓</kbd> - Move between cards when one is selected</li>
              </ul>
            </div>
          </details>
        </div>

        {/* Skip link for keyboard navigation help */}
        <div className="projects-section__skip">
          <a href="#contact" className="sr-only sr-only-focusable">
            {accessibilityTexts.skipLinks.skipToContact}
          </a>
        </div>

        {/* Projects Grid */}
        <div className="projects-section__grid" role="grid" aria-label="Projects grid">
          {projects.map((project, cardIndex) => {
            const actions = getProjectActions(project);
            const isActive = activeCardIndex === cardIndex;

            return (
              <article
                key={project.id}
                className={`projects-section__card ${isActive ? 'projects-section__card--active' : ''}`}
                ref={(el) => { cardRefs.current[cardIndex] = el; }}
                aria-describedby={`project-${project.id}-description project-${project.id}-metadata`}
                aria-label={`${accessibilityTexts.screenReader.projectCard}: ${project.title}. ${cardIndex + 1} of ${projects.length}`}
                onKeyDown={(e) => handleCardKeyDown(e, cardIndex)}
                onClick={() => handleCardSelect(cardIndex)}
              >
                <div className="projects-section__image-container">
                  <img
                    src={project.image || "/api/placeholder/400/200"}
                    alt={`${project.title} project screenshot`}
                    className="projects-section__image"
                  />

                  {/* Add this overlay div */}
                  <div className="projects-section__overlay" aria-hidden="true"></div>

                  {/* Conditionally visible action buttons */}
                  <fieldset
                    className={`projects-section__actions ${isActive ? 'projects-section__actions--visible' : ''}`}
                    aria-hidden={!isActive}
                  >
                    <legend className="sr-only">{`Actions for ${project.title}`}</legend>
                    {project.github && (
                      <a
                        ref={(el) => { actionRefs.current[cardIndex * 2] = el; }}
                        href={project.github}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="projects-section__action-button projects-section__action-button--secondary"
                        aria-label={`${accessibilityTexts.screenReader.viewSourceCode} ${project.title} source code on GitHub (opens in new tab)`}
                        tabIndex={isActive ? 0 : -1}
                        onKeyDown={(e) => handleActionKeyDown(e, cardIndex, 0)}
                      >
                        <GitBranch className="projects-section__action-icon" aria-hidden="true" />
                        <span className="projects-section__action-text">{texts.codeButtonText}</span>
                      </a>
                    )}
                    {project.live && (
                      <a
                        ref={(el) => { actionRefs.current[cardIndex * 2 + 1] = el; }}
                        href={project.live}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="projects-section__action-button projects-section__action-button--primary"
                        aria-label={`${accessibilityTexts.screenReader.viewLiveDemo} ${project.title} live demo (opens in new tab)`}
                        tabIndex={isActive ? 0 : -1}
                        onKeyDown={(e) => handleActionKeyDown(e, cardIndex, project.github ? 1 : 0)}
                      >
                        <ExternalLink className="projects-section__action-icon" aria-hidden="true" />
                        <span className="projects-section__action-text">{texts.liveButtonText}</span>
                      </a>

                    )}
                  </fieldset>
                </div>

                <div className="projects-section__content">
                  <div className="projects-section__header-content">
                    <h3 className="projects-section__card-title">{project.title}</h3>
                    <p
                      id={`project-${project.id}-description`}
                      className="projects-section__card-description"
                    >
                      {project.description}
                    </p>

                    {/* Add project metadata for screen readers */}
                    <div id={`project-${project.id}-metadata`} className="projects-section__metadata sr-only">
                      Project {cardIndex + 1} of {projects.length}.
                      {actions.length > 0 ? `${actions.length} actions available.` : 'No actions available.'}
                      {project.year && `Created in ${project.year}.`}
                    </div>
                  </div>

                  <ul className="projects-section__technologies" aria-label="Technologies used">
                    {project.technologies.map((tech, index) => (
                      <li
                        key={tech}
                        className="projects-section__tech-badge"
                        aria-label={`Technology ${index + 1}: ${tech}`}
                      >
                        {tech}
                      </li>
                    ))}
                  </ul>

                  {/* Enhanced status indicator for active card */}
                  {isActive && (
                    <div className="projects-section__status sr-only" aria-live="polite" aria-atomic="true">
                      {project.title} card selected. {actions.length} actions available.
                      {accessibilityTexts.navigation.useTabToNavigate}, Escape to close, Arrow keys to move between cards.
                    </div>
                  )}
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}
