'use client';

import MarketplaceProjectRow from '@/components/marketplace/shared/MarketplaceProjectRow';
import { MusicIcon } from '@/icons';
import type { components } from '@/lib/gen';

type MarketplaceProject = components['schemas']['ProjectResponse'];

interface MarketplaceProjectGridProps {
  projects: MarketplaceProject[];
  isLoading: boolean;
  viewMode: 'browse' | 'my-projects';
}

const MarketplaceProjectGrid: React.FC<MarketplaceProjectGridProps> = ({
  projects,
  isLoading,
  viewMode,
}) => {
  if (isLoading) {
    return (
      <div className='flex items-center justify-center py-12'>
        <div className='flex items-center gap-3'>
          <svg className='h-6 w-6 animate-spin' fill='none' viewBox='0 0 24 24'>
            <circle
              className='opacity-25'
              cx='12'
              cy='12'
              r='10'
              stroke='currentColor'
              strokeWidth='4'
            />
            <path
              className='opacity-75'
              fill='currentColor'
              d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
            />
          </svg>
          <span className='text-foreground-secondary'>Loading projects...</span>
        </div>
      </div>
    );
  }

  if (projects.length === 0) {
    return (
      <div className='flex items-center justify-center py-16'>
        <div className='max-w-md text-center'>
          <div className='relative mb-6'>
            <div className='mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-accent-brand/10 to-accent-brand/5'>
              <MusicIcon className='h-10 w-10 text-accent-brand/60' />
            </div>
            <div className='absolute -top-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full bg-accent-brand/20'>
              <svg
                className='h-3 w-3 text-accent-brand'
                fill='currentColor'
                viewBox='0 0 24 24'
              >
                <path d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' />
              </svg>
            </div>
          </div>
          <h3 className='mb-3 text-xl font-semibold text-foreground-primary'>
            {viewMode === 'my-projects'
              ? 'No projects yet'
              : 'No open projects available'}
          </h3>
          <p className='mb-6 leading-relaxed text-foreground-secondary'>
            {viewMode === 'my-projects'
              ? 'Create your first project or apply to existing projects to get started'
              : 'No published projects are currently available for editing. Check back later!'}
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className='space-y-2'>
      {projects.map((project) => (
        <MarketplaceProjectRow
          key={project.id}
          project={project}
          viewMode={viewMode}
        />
      ))}
    </div>
  );
};

export default MarketplaceProjectGrid;