'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { Code, BarChart2, Wand2 } from 'lucide-react';
import {
  skillsByDiscipline,
  filterTabs,
  FilterTab,
} from '@/data/skills';
import styles from './SkillsSection.module.css';

export const SkillsSection: React.FC = () => {
  const [activeFilter, setActiveFilter] = useState<FilterTab['id']>('software-engineering');
  const activeDiscipline = skillsByDiscipline[activeFilter];

  const getFilterIcon = (id: FilterTab['id']) => {
    switch (id) {
      case 'software-engineering':
        return <Code size={18} />;
      case 'product-management':
        return <BarChart2 size={18} />;
      case 'design-ux':
        return <Wand2 size={18} />;
    }
  };

  return (
    <section id="skills" className={styles.skillsSection}>
      <div className="content-container">
        {/* Section Header */}
        <div className="section-header" data-reveal="soft">
          <span className="section-eyebrow">SKILLS & TOOLS</span>
          <div className="section-title-wrap">
            <h2 className="section-title">The Stack Behind the Work...</h2>
            <div className="section-underline" />
          </div>
        </div>

        {/* Main Card Container */}
        <div className={styles.mainCard} aria-live="polite" data-reveal="scale">
          {/* Section: Skills */}
          <div className={styles.skillsBlock}>
            <span className={styles.cardEyebrow}>SKILLS</span>

            {/* Discipline-specific skill meters */}
            <div className={styles.skillsGrid}>
              {activeDiscipline.skills.map((skill) => (
                <div key={skill.name} className={styles.skillItem}>
                  <div className={styles.skillName}>{skill.name}</div>
                  <div className={styles.meterSegments}>
                    {[1, 2, 3, 4, 5].map((seg) => (
                      <div
                        key={seg}
                        className={`${styles.segment} ${
                          seg <= skill.level ? styles.segmentFilled : ''
                        }`}
                      />
                    ))}
                  </div>
                </div>
              ))}
            </div>

            {/* Keyword Badges */}
            <div className={styles.badgeCloud}>
              {activeDiscipline.keywords.map((badge, index) => (
                <span key={`${badge}-${index}`} className={styles.badgePill}>
                  {badge}
                </span>
              ))}
            </div>
          </div>

          {/* Section: Tools */}
          <div className={styles.toolsBlock}>
            <span className={styles.cardEyebrow}>TOOLS</span>

            {/* 8-Column Grid */}
            <div className={styles.toolsGrid}>
              {activeDiscipline.tools.map((tool) => (
                <div key={tool.id} className={styles.toolTile}>
                  <div className={styles.toolIconContainer}>
                    <Image
                      src={tool.icon}
                      alt=""
                      width={64}
                      height={64}
                      className={styles.toolIcon}
                    />
                  </div>
                  <span className={styles.toolLabel}>{tool.name}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Filter Tabs Under Card */}
        <div
          className={styles.filterTabsRow}
          aria-label="Choose skill discipline"
          data-reveal="soft"
        >
          {filterTabs.map((tab) => {
            const isActive = activeFilter === tab.id;
            return (
              <button
                key={tab.id}
                type="button"
                aria-pressed={isActive}
                onClick={() => setActiveFilter(tab.id)}
                className={`pill-btn ${
                  isActive ? 'pill-btn-primary' : 'pill-btn-outline'
                } ${styles.filterButton}`}
              >
                {getFilterIcon(tab.id)}
                <span>{tab.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
};