'use client';

import React from 'react';

import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { useModalContext } from '@/context/ModalContext';
import type { components } from '@/lib/gen';

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

interface UploadPlaceholderProps {
  project: MarketplaceProject;
  onUploadComplete: () => void;
  existingSubmissionCount?: number;
}

const UploadPlaceholder: React.FC<UploadPlaceholderProps> = ({
  project,
  onUploadComplete,
  existingSubmissionCount = 0,
}) => {
  const { openModalWithData } = useModalContext();

  // Don't show upload placeholder if project is completed
  if (project.status === 'COMPLETED') {
    return null;
  }

  const handleUpload = () => {
    // Pass different modal data based on user role
    const modalData = project?.is_creator
      ? {
          projectId: project.id,
          mode: 'audio-only' as const,
          title: 'Upload Audio Reference',
          isCreator: true,
          onUploadComplete,
        }
      : {
          projectId: project.id,
          mode: 'full' as const,
          title: 'Upload Reference or Submission',
          isCreator: false,
          existingSubmissionCount,
          onUploadComplete,
        };
    openModalWithData(ModalTypes.MARKETPLACE_UPLOAD_MEDIA, modalData);
  };

  return (
    <div className='mb-8'>
      <button
        onClick={handleUpload}
        className='group w-full cursor-pointer rounded-xl border-2 border-dashed border-border-primary bg-background-primary p-8 transition-colors focus:ring-2 focus:ring-accent-brand focus:ring-offset-2 focus:outline-none'
        style={
          {
            '--hover-border-color': '#6b7280',
            '--hover-bg-color': '#6b7280' + '05',
          } as React.CSSProperties
        }
        onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = '#6b7280';
          e.currentTarget.style.backgroundColor = '#6b7280' + '05';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = '';
          e.currentTarget.style.backgroundColor = '';
        }}
        onKeyDown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleUpload();
          }
        }}
      >
        <div className='flex flex-col items-center justify-center text-center'>
          <div
            className='mb-4 flex h-16 w-16 items-center justify-center rounded-full transition-colors'
            style={{
              backgroundColor: '#6b7280' + '10',
              color: '#6b7280',
            }}
          >
            <svg
              className='h-8 w-8'
              fill='none'
              stroke='currentColor'
              viewBox='0 0 24 24'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M12 6v6m0 0v6m0-6h6m-6 0H6'
              />
            </svg>
          </div>
          <h3 className='mb-2 text-lg font-semibold text-foreground-primary'>
            Upload
          </h3>
          <p className='text-sm text-foreground-tertiary'>
            {project?.is_creator
              ? 'Click to upload audio references'
              : 'Click to upload references or submissions'}
          </p>
        </div>
      </button>
    </div>
  );
};

export default UploadPlaceholder;