import type { Project } from '../types/project';
import ProjectCard from './ProjectCard';
import { useMemo } from 'react';

interface ProjectGridProps {
  projects: Project[];
  loading: boolean;
}

export default function ProjectGrid({ projects, loading }: ProjectGridProps) {
  const projectsByType = useMemo(() => {
    const grouped: Record<string, Project[]> = {
      platform: [],
      client: [],
      'dev tool': [],
      other: []
    };

    projects.forEach(project => {
      const type = project.type.toLowerCase();
      if (type === 'platform' || type === 'semi-platform') {
        grouped.platform.push(project);
      } else if (type === 'client') {
        grouped.client.push(project);
      } else if (type === 'dev tool') {
        grouped['dev tool'].push(project);
      } else {
        grouped.other.push(project);
      }
    });

    return grouped;
  }, [projects]);

  if (loading) {
    return (
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {[...Array(12)].map((_, i) => (
          <div key={i} className="bg-gray-800 rounded-lg h-64 animate-pulse">
            <div className="p-4 space-y-3">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gray-700 rounded-lg" />
                <div className="space-y-2">
                  <div className="h-4 w-24 bg-gray-700 rounded" />
                  <div className="h-3 w-32 bg-gray-700 rounded" />
                </div>
              </div>
              <div className="h-20 bg-gray-700 rounded" />
              <div className="flex gap-2">
                <div className="h-6 w-16 bg-gray-700 rounded-full" />
                <div className="h-6 w-20 bg-gray-700 rounded-full" />
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (projects.length === 0) {
    return (
      <div className="text-center py-12">
        <svg className="w-16 h-16 mx-auto text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <h3 className="text-xl font-medium text-gray-300 mb-2">No projects found</h3>
        <p className="text-gray-500">Try adjusting your filters or search query</p>
      </div>
    );
  }

  const sections = [
    { title: 'Platforms', key: 'platform' },
    { title: 'Clients', key: 'client' },
    { title: 'Dev Tools', key: 'dev tool' }
  ];

  return (
    <div className="space-y-12">
      {sections.map(section => {
        const sectionProjects = projectsByType[section.key];
        if (!sectionProjects || sectionProjects.length === 0) return null;

        return (
          <section key={section.key}>
            <div className="flex items-center gap-3 mb-6">
              <h2 className="text-2xl font-bold text-gray-100">{section.title}</h2>
              <span className="text-sm text-gray-400 bg-gray-800 px-2 py-1 rounded-full">
                {sectionProjects.length}
              </span>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {sectionProjects.map(project => (
                <ProjectCard key={project.id} project={project} />
              ))}
            </div>
          </section>
        );
      })}

      {projectsByType.other.length > 0 && (
        <section>
          <div className="flex items-center gap-3 mb-6">
            <h2 className="text-2xl font-bold text-gray-100">Other</h2>
            <span className="text-sm text-gray-400 bg-gray-800 px-2 py-1 rounded-full">
              {projectsByType.other.length}
            </span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
            {projectsByType.other.map(project => (
              <ProjectCard key={project.id} project={project} />
            ))}
          </div>
        </section>
      )}
    </div>
  );
}