"use client";

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { ExternalLink, Github, Calendar, Layers, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { LiquidHeading } from '@/components/LiquidHeading';
import Image from 'next/image';

interface Project {
  id: number;
  title: string;
  description: string;
  content: string;
  tags: string[];
  featured: boolean;
  category: string;
  date: string;
  github?: string;
  live?: string;
  imageUrl?: string;
}

const Projects = () => {
  const [mounted, setMounted] = useState(false);
  const [projects, setProjects] = useState<Project[]>([]);

  useEffect(() => {
    setMounted(true);
    const loadProjects = async () => {
      try {
        const response = await fetch('/api/projects?featured=true&published=true&limit=6');
        if (response.ok) {
          const data = await response.json();
          setProjects(data.projects || []);
        }
      } catch (error) {
        console.error('Error loading projects:', error);
      }
    };
    loadProjects();
  }, []);

  if (!mounted) return null;

  return (
    <section id="projects" className="py-24 px-4 relative bg-stone-50/50">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-20">
          <LiquidHeading 
            text="Selected Works" 
            level={2} 
            className="text-4xl md:text-6xl font-bold mb-6 text-stone-900"
          />
          <p className="text-lg text-stone-500 max-w-2xl mx-auto mt-4 font-light">
            A collection of projects I&apos;ve worked on, ranging from web applications to experiments.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <motion.div
              key={project.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ y: -8 }}
              className="group relative flex flex-col bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-stone-100"
            >
              {/* Project Cover / Header */}
              <div className="relative aspect-[4/3] overflow-hidden bg-stone-100">
                {project.imageUrl ? (
                   <Image 
                     src={project.imageUrl} 
                     alt={project.title} 
                     fill 
                     className="object-cover transition-transform duration-500 group-hover:scale-105"
                   />
                ) : (
                  <div className="absolute inset-0 bg-gradient-to-br from-stone-100 to-stone-200 flex items-center justify-center p-8 group-hover:from-stone-50 group-hover:to-stone-100 transition-colors">
                     <div className="w-full h-full border-2 border-dashed border-stone-300 rounded-xl flex items-center justify-center">
                        <Layers className="text-stone-300 w-12 h-12" />
                     </div>
                     <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint/10 via-transparent to-liquid-rose/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  </div>
                )}
                
                {/* Overlay Links */}
                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4 backdrop-blur-[2px]">
                   {project.github && (
                     <a href={project.github} target="_blank" rel="noopener noreferrer" className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-transform" aria-label="GitHub">
                       <Github size={20} />
                     </a>
                   )}
                   {project.live && (
                     <a href={project.live} target="_blank" rel="noopener noreferrer" className="p-3 bg-white rounded-full text-stone-900 hover:scale-110 transition-transform" aria-label="Live Demo">
                       <ExternalLink size={20} />
                     </a>
                   )}
                </div>
              </div>

              {/* Content */}
              <div className="flex flex-col flex-1 p-6">
                <div className="flex justify-between items-start mb-3">
                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
                    {project.title}
                  </h3>
                  <span className="text-xs font-mono text-stone-400 bg-stone-100 px-2 py-1 rounded">
                    {new Date(project.date).getFullYear()}
                  </span>
                </div>

                <p className="text-stone-600 text-sm leading-relaxed mb-6 line-clamp-3 flex-1">
                  {project.description}
                </p>

                <div className="space-y-4 mt-auto">
                  <div className="flex flex-wrap gap-2">
                    {project.tags.slice(0, 3).map(tag => (
                      <span key={tag} className="text-xs px-2.5 py-1 bg-stone-50 border border-stone-100 rounded-md text-stone-500 font-medium">
                        {tag}
                      </span>
                    ))}
                    {project.tags.length > 3 && (
                      <span className="text-xs px-2 py-1 text-stone-400">+ {project.tags.length - 3}</span>
                    )}
                  </div>
                  
                  <Link 
                    href={`/projects/${project.title.toLowerCase().replace(/\s+/g, '-')}`}
                    className="inline-flex items-center text-sm font-semibold text-stone-900 hover:gap-2 transition-all group/link"
                  >
                    Read more <ArrowRight size={16} className="ml-1 transition-transform group-hover/link:translate-x-1" />
                  </Link>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        <div className="mt-16 text-center">
          <Link
            href="/projects"
            className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-stone-200 rounded-full text-stone-600 font-medium hover:bg-stone-50 hover:border-stone-300 transition-all shadow-sm"
          >
            Archive <ArrowRight size={16} />
          </Link>
        </div>
      </div>
    </section>
  );
};

export default Projects;