import { useState, useEffect } from 'react'
import axios from 'axios'
import './Projects.css'

function ProjectCard({ project }) {
  return (
    <div className={`project-card ${project.featured ? 'featured' : ''}`}>
      {project.image && (
        <div className="project-image">
          <img src={`/projects/${project.image}`} alt={project.title} />
        </div>
      )}
      <div className="project-content">
        <h3>{project.title}</h3>
        <p>{project.description}</p>
        <div className="project-tech">
          {project.technologies.map(tech => (
            <span key={tech} className="tech-tag">{tech}</span>
          ))}
        </div>
        <div className="project-links">
          {project.githubUrl && (
            <a 
              href={project.githubUrl} 
              target="_blank" 
              rel="noopener noreferrer" 
              className="project-link github"
            >
              GitHub Repo
            </a>
          )}
          {project.liveUrl && (
            <a 
              href={project.liveUrl} 
              target="_blank" 
              rel="noopener noreferrer" 
              className="project-link live"
            >
              Live Demo
            </a>
          )}
        </div>
      </div>
    </div>
  )
}

function Projects() {
  const [projects, setProjects] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await axios.get('http://localhost:5000/api/projects')
        setProjects(response.data)
        setLoading(false)
      } catch (err) {
        console.error('Error fetching projects:', err)
        setError('Failed to load projects. Please try again later.')
        setLoading(false)
      }
    }

    fetchProjects()
  }, [])

  // Sort projects to show featured ones first
  const sortedProjects = [...projects].sort((a, b) => {
    if (a.featured && !b.featured) return -1
    if (!a.featured && b.featured) return 1
    return 0
  })

  if (loading) return <div className="loading">Loading projects...</div>
  if (error) return <div className="error">{error}</div>

  return (
    <div className="projects-page">
      <div className="container">
        <h1>Projects</h1>
        <p className="projects-intro">
          Here are some of the projects I've worked on. Check out my 
          <a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
            GitHub profile
          </a> for more.
        </p>
        
        <div className="projects-grid">
          {sortedProjects.length === 0 ? (
            <p>No projects found.</p>
          ) : (
            sortedProjects.map(project => (
              <ProjectCard key={project.id} project={project} />
            ))
          )}
        </div>
      </div>
    </div>
  )
}

export default Projects