import { motion, Variants } from "framer-motion";
import FullPageImage from "../components/fullPageImage";
import ProjectCard, { Project } from "../components/ProjectCard";
import "../styles/pages/projects.css";

const FEATURED_PROJECTS: Project[] = [
    {
        id: 1,
        title: "Digital Resume",
        description: "A fully responsive, glassmorphic portfolio site built to showcase my skills and experience. Features animated page transitions, typing effects, and a dynamic map component.",
        techStack: ["React", "TypeScript", "Framer Motion", "@react-google-maps/api", "nginx", "docker"],
        image: "/images/projects/digitCode.jpg",
        links: {
            repo: "https://github.com/Bayda77/resume-site",
            demo: "https://portfolio.sashabayda.ca"
        }
    },
];

export const SIDEQUESTS: Project[] = [
    {
        id: 101,
        title: "Working with Gitea Workers",
        description: "Implementing a CI/CD pipeline using Gitea Actions to automate deployment to a Windows production server.",
        techStack: ["Gitea Actions", "Docker", "PowerShell", "YAML"],
        image: "/images/projects/giteaAction.png",
        links: {},
        hasDetails: true,
        sections: [
            {
                type: 'text',
                title: 'Overview',
                content: "Automating the deployment process using Gitea Actions. This workflow listens for pushes to the main branch, connects to a remote Windows server via SSH, updates the code, rebuilds the Docker container, and restarts the service."
            },
            {
                type: 'code',
                language: 'yaml',
                title: 'Gitea Runner Config',
                code: `# Gitea Actions Runner
  gitea-runner:
    container_name: gitea-runner
    image: gitea/act_runner:latest
    restart: unless-stopped
    networks:
      - web
    environment:
      - GITEA_INSTANCE_URL=http://gitea:3000
      - GITEA_RUNNER_REGISTRATION_TOKEN=\${GITEA_RUNNER_TOKEN}
      - GITEA_RUNNER_NAME=docker-runner
      # Using catthehacker/ubuntu:act-latest which includes Docker CLI for container operations
      - GITEA_RUNNER_LABELS=ubuntu-latest:docker://catthehacker/ubuntu:act-latest,ubuntu-22.04:docker://catthehacker/ubuntu:act-22.04,ubuntu-20.04:docker://catthehacker/ubuntu:act-20.04
      - CONFIG_FILE=/config.yaml
    volumes:
      - ./gitea/runner:/data
      - ./gitea/runner/config.yaml:/config.yaml:ro
      - /var/run/docker.sock:/var/run/docker.sock
    depends_on:
      - gitea`
            },
            {
                type: 'code',
                language: 'yaml',
                title: 'Deploy Workflow',
                code: `name: Deploy to Production

on:
  push:
    branches: [ "main" ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Deploy Application
        uses: appleboy/ssh-action@v1.0.3
        with:
          host: \${{ secrets.REMOTE_HOST }}
          username: \${{ secrets.REMOTE_USER }}
          key: \${{ secrets.SSH_PRIVATE_KEY }}
          passphrase: \${{ secrets.SSH_PASSPHRASE }}
          script: |
            powershell -ExecutionPolicy Bypass -Command "Write-Host '=== Starting deployment ==='; if (Test-Path 'C:\\projects\\digital-resume-FE') { Set-Location 'C:\\projects\\digital-resume-FE'; git pull origin main } else { New-Item -ItemType Directory -Path 'C:\\projects' -Force; Set-Location 'C:\\projects'; git clone https://gitea.sashabayda.ca/Bayda77/digital-resume-FE.git }; Write-Host '=== Stopping container ==='; docker stop resume-frontend; docker rm resume-frontend; Write-Host '=== Building image ==='; Set-Location 'C:\\projects\\digital-resume-FE'; docker build -t resume-frontend:latest .; Write-Host '=== Running container ==='; docker run -d --name resume-frontend --network nginx_web --restart unless-stopped -p 3001:80 resume-frontend:latest; Write-Host '=== Verifying ==='; docker ps -a --filter name=resume-frontend"`
            },
            {
                type: 'text',
                title: 'Reasoning',
                content: "I wanted to automate the deployment process using Gitea Actions. Gitea is a self-hosted Git server and I wanted to take advantage of its built-in CI/CD pipeline to automate the deployment process. With it being self hosted this ment that I needed to self host my own runners. Which I used as a learning opportunity to learn more about deployment containers"
            },
            {
                type: 'text',
                title: 'Challenges',
                content: "Some of the main challenges was ensuring security to the host system and ensuring the deployment process was reliable and consistent. This includes stuff such as not exposing port 22 to the internet and keeping 'secrets' secure"
            },
            {
                type: 'code',
                language: 'powershell',
                title: 'Deployment Script',
                code: `powershell -ExecutionPolicy Bypass -Command "Write-Host '=== Starting deployment ==='; if (Test-Path 'C:\\projects\\digital-resume-FE') { Set-Location 'C:\\projects\\digital-resume-FE'; git pull origin main } else { New-Item -ItemType Directory -Path 'C:\\projects' -Force; Set-Location 'C:\\projects'; git clone https://gitea.sashabayda.ca/Bayda77/digital-resume-FE.git }; Write-Host '=== Stopping container ==='; docker stop resume-frontend; docker rm resume-frontend; Write-Host '=== Building image ==='; Set-Location 'C:\\projects\\digital-resume-FE'; docker build -t resume-frontend:latest .; Write-Host '=== Running container ==='; docker run -d --name resume-frontend --network nginx_web --restart unless-stopped -p 3001:80 resume-frontend:latest; Write-Host '=== Verifying ==='; docker ps -a --filter name=resume-frontend"`
            },
            {
                type: 'text',
                title: 'Deployment Script Explanation',
                content: "The deployment script is a PowerShell script that is used to deploy the digital resume frontend to a Windows server. It first checks if the project directory exists, if it does it pulls the latest changes from the repository, if it doesn't it clones the repository. Then it stops the container, removes it, builds the image, and runs the container. Finally it verifies that the container is running and reports to gitea if it was successfull"
            },
        ]
    },
    {
        id: 102,
        title: "Home Lab Architecture",
        description: "A comprehensive self-hosted homelab running 20+ services. Orchestrated with Docker Compose for media automation, personal cloud storage, and secure remote access.",
        techStack: ["Docker", "Nginx", "Tailscale", "Authentik", "PostgreSQL"],
        image: "/images/projects/homelabber.png", // Placeholder
        links: {},
        hasDetails: true,
        sections: [
            {
                type: 'text',
                title: 'Overview',
                content: "My homelab acts as my personal cloud, giving me control over my data and providing a playground for learning system administration. It runs on a dedicated machine using Docker Compose to manage a suite of interconnected microservices. Access is secured via Tailscale VPN and Authentik SSO."
            },
            {
                type: 'text',
                title: 'Media & Automation',
                content: "The core of the lab is the media stack. **Jellyfin** serves as the streaming frontend. Behind the scenes, automation tools handle content acquisition and organization. **Jellyseerr** provides a clean interface for requesting new additions to the library."
            },
            {
                type: 'text',
                title: 'Personal Cloud & Productivity',
                content: "I've replaced several commercial services with self-hosted alternatives:\n\n*   **Immich**: A powerful photo and video backup solution, replacing Google Photos.\n*   **Gitea**: My self-hosted Git server for code management (including CI/CD runners).\n*   **Mealie**: A recipe manager to organize and plan meals."
            },
            {
                type: 'text',
                title: 'Infrastructure & Security',
                content: "Reliability and security are key. **Nginx** handles reverse proxying with **Certbot** managing SSL certificates. **Fail2ban** prevents intrusion attempts. **Authentik** provides a unified identity layer. **Portainer** offers a GUI for Docker management, and **Tailscale** creates a secure mesh network for remote access without exposing ports."
            },
            {
                type: 'text',
                title: 'Monitoring',
                content: "**Homepage** serves as the main dashboard. **Beszel** and **Uptime Kuma** monitor system resources and service availability, while **Speedtest Tracker** keeps a historic log of network performance."
            },
            {
                type: 'code',
                language: 'yaml',
                title: 'Docker Compose Configuration',
                code: `services:
  nginx:
    image: nginx:stable
    restart: unless-stopped
    ports: ["80:80", "443:443"]
    # ... configurations

  immich-server:
    image: ghcr.io/immich-app/immich-server:release
    environment:
      - DB_HOSTNAME=immich-postgres
      - REDIS_HOSTNAME=immich-redis
    depends_on: [immich-redis, immich-postgres]

  gitea:
    image: gitea/gitea:latest
    ports: ["3000:3000", "2222:22"]
    environment:
      - GITEA__actions__ENABLED=true

  jellyfin:
    image: jellyfin/jellyfin:latest
    ports: ["8096:8096"]
    volumes:
      - ./media:/media
  
  # Monitoring
  beszel:
    image: henrygd/beszel:latest
    ports: ["8090:8090"]
  
  uptime-kuma:
    image: louislam/uptime-kuma:latest
    ports: ["3002:3001"]

  # Security & Networking
  tailscale:
    image: tailscale/tailscale:latest
    network_mode: host
    
  authentik-server:
    image: ghcr.io/goauthentik/server:latest
    ports: ["9001:9000", "9444:9443"]

# ... full configuration includes 20+ services`
            }
        ]
    }
];

const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.15
        }
    }
};

const cardVariants: Variants = {
    hidden: { y: 50, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1,
        transition: {
            type: "spring",
            stiffness: 100,
            damping: 12
        }
    }
};

export default function Projects() {
    return (
        <div style={{ position: "relative", width: "100%", minHeight: "100vh" }}>
            <div className="mainContentBlock" style={{ width: "100%", minWidth: "100vw", maxWidth: "100vw", paddingTop: "20px", paddingBottom: "100px", boxSizing: "border-box", display: "flex", justifyContent: "center", position: "relative", zIndex: 1 }}>
                <div className="projects-container">
                    {/* Featured Projects Section */}
                    <motion.div
                        initial="hidden"
                        animate="visible"
                        variants={containerVariants}
                    >
                        <motion.h1
                            className="projects-title"
                            initial={{ y: -30, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ duration: 0.8, ease: "easeOut" }}
                        >
                            Featured Projects
                        </motion.h1>

                        <div className="projects-grid">
                            {FEATURED_PROJECTS.map((project) => (
                                <ProjectCard key={project.id} project={project} variants={cardVariants} />
                            ))}
                        </div>
                    </motion.div>


                    {/* Sidequests Section */}
                    <motion.div
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true, amount: 0.1 }}
                        variants={containerVariants}
                        style={{ marginTop: "80px" }}
                    >
                        <motion.h2
                            className="projects-title" // Reusing title style for consistency, maybe smaller?
                            style={{ fontSize: "clamp(24px, 4vw, 40px)", marginBottom: "30px" }}
                            variants={cardVariants}
                        >
                            Sidequests
                        </motion.h2>

                        <div className="projects-grid">
                            {SIDEQUESTS.map((project) => (
                                <ProjectCard key={project.id} project={project} variants={cardVariants} />
                            ))}
                        </div>
                    </motion.div>
                </div>
            </div>
            <FullPageImage
                src="/images/projects/20251111_224823.jpg"
                alt="projects background"
                credit="Sasha Bayda"
                isFixed={true}
            />
        </div>
    );
}
