import { FaExternalLinkAlt, FaGithub } from 'react-icons/fa';
import { StyledCursor } from '../components/styles/Cursor.styled';
import { StyledProjects } from '../components/styles/Projects.styled';
import { StyledSectionHeader } from '../components/styles/SectionHeader.styled';
import { useTranslation } from 'react-i18next';
import { useGSAP } from '@gsap/react';
import gsap from 'gsap';

const badges = {
  HTML: 'https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white',
  CSS: 'https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white',
  JS: 'https://img.shields.io/badge/JavaScript-323330?style=for-the-badge&logo=javascript&logoColor=F7DF1E',
  SASS: 'https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white',
  TS: 'https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white',
  Node: 'https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white',
  Vue: 'https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D',
  Express: 'https://img.shields.io/badge/Express.js-404D59?style=for-the-badge',
  Mongo: 'https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white',
  React: 'https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB',
  Flutter: 'https://img.shields.io/badge/Flutter-02569B?style=for-the-badge&logo=flutter&logoColor=white',
  NET: 'https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
  Python: 'https://img.shields.io/badge/Python-3776AB?style=for-the-badge&logo=python&logoColor=white',
  Java: 'https://img.shields.io/badge/Java-ED8B00?style=for-the-badge&logo=java&logoColor=white',
  AWS: 'https://img.shields.io/badge/Amazon_AWS-232F3E?style=for-the-badge&logo=amazon-aws&logoColor=white',
  Heroku: 'https://img.shields.io/badge/Heroku-430098?style=for-the-badge&logo=heroku&logoColor=white',
  NestJS: 'https://img.shields.io/badge/nestjs-red?style=for-the-badge&logo=nestjs&logoColor=white',
  Discord: 'https://img.shields.io/badge/discord.js-white?style=for-the-badge&logo=discord&logoColor=blue',
  Postgresql: 'https://img.shields.io/badge/postgresql-blue?style=for-the-badge&logo=postgresql&logoColor=white',
  CSharp: 'https://img.shields.io/badge/C%20SHARP-orange?style=for-the-badge&logo=csharp&logoColor=white',
  Dotnet: 'https://img.shields.io/badge/.NET-5C2D91?style=for-the-badge&logo=.net&logoColor=white',
  Tailwind: 'https://img.shields.io/badge/TAILWIND-blue?style=for-the-badge&logo=tailwindcss&logoColor=white',
  Electron: 'https://img.shields.io/badge/Electron%20JS-white?style=for-the-badge&logo=electron&logoColor=blue'
};

const projects = {
  showcase: [
    {
      id: 'stacjownik',
      thumbnailSrc: 'stacjownik-1.png',
      iconSrc: 'stacjownik-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/stacjownik',
      siteLink: 'https://stacjownik-td2.spythere.eu/'
    },
    {
      id: 'pojazdownik',
      thumbnailSrc: 'pojazdownik-1.png',
      iconSrc: 'pojazdownik-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/pojazdownik',
      siteLink: 'https://pojazdownik-td2.spythere.eu/'
    },
    {
      id: 'generator',
      thumbnailSrc: 'generator-1.png',
      iconSrc: 'generator-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/genera-tor',
      siteLink: 'https://generator-td2.spythere.eu/'
    },
    {
      id: 'srjp',
      thumbnailSrc: 'srjp-1.png',
      iconSrc: 'srjp-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.Tailwind],
      repoLink: 'https://github.com/Spythere/srjp-td2',
      siteLink: 'https://srjp-td2.spythere.eu/'
    },
    {
      id: 'td2-discord-presence-ui',
      thumbnailSrc: 'td2-discord-presence-1.png',
      iconSrc: 'td2-discord-presence-logo.png',
      subtitle: '',
      technologies: [badges.Node, badges.TS, badges.Electron],
      repoLink: 'https://github.com/Spythere/td2-discord-presence-ui'
    },
    {
      id: 'stacjownik-manager',
      thumbnailSrc: 'stacjownik-manager-1.png',
      iconSrc: 'stacjownik-dev-logo.svg',
      subtitle: '',
      technologies: [badges.Vue, badges.TS, badges.SASS],
      repoLink: 'https://github.com/Spythere/station-manager-2.0',
      siteLink: 'https://stacjownik-manager.spythere.eu/'
    }
  ],
  other: [
    {
      id: 'stacjownik-api',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.NestJS, badges.TS, badges.Postgresql],
      docsLink: 'https://stacjownik.spythere.eu/docs'
    },
    {
      id: 'stacjobot',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.NestJS, badges.Discord, badges.TS]
    },
    {
      id: 'td2-discord-presence',
      iconSrc: null,
      subtitle: '',
      technologies: [badges.CSharp, badges.Dotnet],
      repoLink: 'https://github.com/Spythere/TD2-Discord-Presence'
    }
  ]
};

function ProjectsSection() {
  const { t } = useTranslation();

  useGSAP(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#projects',
      },
    });

    tl.from('.projects-header', { opacity: 0 });
    tl.from('.sub-header', { opacity: 0 });
    tl.from('.project-card', {
      duration: 0.5,
      ease: 'power1.in',
      opacity: 0,
      stagger: {
        each: 0.25,
      },
    });
  });

  return (
    <StyledProjects id="projects">
      <StyledSectionHeader className='projects-header'>
        {t('projects.title-1') + ' '}
        <span className="text--accent" style={{ position: 'relative' }}>
          {t('projects.title-2')}
          <StyledCursor />
        </span>
      </StyledSectionHeader>

      <h3 className="sub-header">{t('projects.showcase-title')}</h3>

      <div className="showcase-container">
        {projects.showcase.map((p) => (
          <div className="project-card showcase" key={p.id}>
            <div className="project-thumbnail">
              <img src={p.thumbnailSrc} alt="" />
            </div>

            <div className="project-content">
              <a className="project-title" href={p.siteLink ?? p.repoLink} target="_blank">
                {p.iconSrc && <img className="project-title-icon" src={p.iconSrc} alt="" />}
                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
              </a>
              <h3 className="project-subtitle">{p.subtitle}</h3>

              <div className="project-badges">
                {p.technologies.map((tech) => (
                  <img key={tech} src={tech} alt="technology badge"></img>
                ))}
              </div>

              <hr />

              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>

              <div className="project-actions">
                {p.repoLink && (
                  <a href={p.repoLink} target="_blank">
                    <FaGithub />
                    {t('projects.source-link')}
                  </a>
                )}
                {p.siteLink && (
                  <a href={p.siteLink} target="_blank">
                    <FaExternalLinkAlt />
                    {t('projects.live-app-link')}
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      <h3 className="sub-header">{t('projects.other-projects-title')}</h3>

      <div className="other-projects-container">
        {projects.other.map((p) => (
          <div className="project-card" key={p.id}>
            <div className="project-content">
              <div className="project-title">
                {p.iconSrc && <img className="project-title-icon" src={p.iconSrc} alt="" />}
                <h2 className="project-title-content">{t(`projects.${p.id}.title`)}</h2>
              </div>
              <h3 className="project-subtitle">{p.subtitle}</h3>

              <div className="project-badges">
                {p.technologies.map((tech) => (
                  <img key={tech} src={tech} alt="technology badge"></img>
                ))}
              </div>

              <hr />

              <p className="project-desc">{t(`projects.${p.id}.description`)}</p>

              <div className="project-actions">
                {p.repoLink && (
                  <a href={p.repoLink} target="_blank">
                    <FaGithub />
                    {t('projects.source-link')}
                  </a>
                )}

                {p.docsLink && (
                  <a href={p.docsLink} target="_blank">
                    <FaExternalLinkAlt />
                    {t('projects.docs-link')}
                  </a>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>
    </StyledProjects>
  );
}

export default ProjectsSection;
