Ason Gautam

import React, {useState, useEffect, useMemo} from "react"
import Image from "next/image"
import Link from "next/link"
import {ExternalLink, Github, Code} from "lucide-react"

type ProjectCategory = "ai" | "web-dev" | "all"
type ProjectStatus = "live" | "development" | "archived"

interface Project {
  id: number
  title: string
  description: string
  image: string
  category: ProjectCategory
  status: ProjectStatus
  link?: string
  github?: string
  technologies: string[]
  year: number
}

const CATEGORIES: ProjectCategory[] = ["all", "ai", "web-dev"]

const projects: Project[] = [
  {
    id: 1,
    title: "Paperight.ai",
    description: "AI-powered final year project analysis",
    category: "ai",
    status: "development",
    technologies: ["Next.js", "LLMs", "RAG", "TypeScript"],
    year: 2025
  },
  {
    id: 2,
    title: "MyPusta",
    description: "Nepali family tree & vamsavali builder",
    category: "web-dev",
    status: "live",
    link: "https://mypusta.com",
    technologies: ["React", "Node.js", "PostgreSQL", "Express"],
    year: 2024
  },
  {
    id: 3,
    title: "CloudModel Nexus",
    description: "Cloud platform for LLM hosting",
    category: "ai",
    status: "live",
    technologies: ["Python", "Docker", "Kubernetes", "FastAPI"],
    year: 2024
  },
  {
    id: 4,
    title: "ARMS 360",
    description: "Deerwalk school ERP",
    category: "web-dev",
    status: "live",
    link: "https://arms360.deerwalk.edu.np/login",
    technologies: ["Next.js", "TypeScript", "Tailwind", "Framer Motion"],
    year: 2024
  },
  {
    id: 5,
    title: "Music Jam Space",
    description: "Rehearsal studio booking platform",
    category: "web-dev",
    status: "live",
    link: "https://musicjamspace.com",
    technologies: ["React", "Laravel", "MySQL"],
    year: 2023
  }
]

function filterProjects(
  projects: Project[],
  category?: ProjectCategory
) {
  if (!category || category === "all") {
    return projects
  }
  return projects.filter(
    (project) => project.category === category
  )
}

function sortProjectsByYear(
  projects: Project[]
) {
  return [...projects].sort((a, b) => b.year - a.year)
}

function getProjectStats(
  projects: Project[]
) {
  const live = projects.filter(p => p.status === "live").length
  const inDev = projects.filter(p => p.status === "development").length
  return { live, inDev, total: projects.length }
}

export default function Work() {
  const [selectedCategory, setCategory] = useState<ProjectCategory>("all")
  const [sortBy, setSortBy] = useState<"year" | "name">("year")

  const filteredProjects = useMemo(
    () => {
      let result = filterProjects(projects, selectedCategory)
      if (sortBy === "year") {
        result = sortProjectsByYear(result)
      }
      return result
    },
    [selectedCategory, sortBy]
  )

  const stats = useMemo(
    () => getProjectStats(filteredProjects),
    [filteredProjects]
  )

  useEffect(() => {
    console.log("Projects loaded:", filteredProjects.length)
  }, [filteredProjects])

  return (
    <section className="work-section">
      <div className="header">
        <h2>My Work</h2>
        <div className="stats">
          <span>{stats.live} Live</span>
          <span>{stats.inDev} In Dev</span>
        </div>
      </div>
      <div className="filters">
        {CATEGORIES.map(cat => (
          <button
            key={cat}
            onClick={() => setCategory(cat)}
            className={selectedCategory === cat ? "active" : ""}
          >
            {cat}
          </button>
        ))
      </div>
      <div className="projects-grid">
        {filteredProjects.map((project) => (
          <ProjectCard
            key={project.id}
            title={project.title}
            description={project.description}
            status={project.status}
            technologies={project.technologies}
            link={project.link}
          />
        ))
      </div>
    </section>
  )
}