'use client';

import MarketplaceApplicationsList from './MarketplaceApplicationsList';
import MarketplaceChatView from './MarketplaceChatView';
import MarketplaceMediaView from './MarketplaceMediaView';
import { useMarketplaceProject } from './MarketplaceProjectProvider';

const MarketplaceWaveformChat = () => {
  const {
    project,
    viewMode,
    isCreator,
    isEditingDescription,
    editDescription,
    setEditDescription,
    isSavingProject,
    handleEditDescription,
    handleSaveDescription,
    handleCancelDescriptionEdit,
  } = useMarketplaceProject();

  if (!project) {
    return null;
  }

  return (
    <div
      className={
        viewMode === 'chat'
          ? 'flex h-full flex-col px-6 py-6'
          : 'flex-1 overflow-y-auto px-6 py-6'
      }
    >
      <div
        className={
          viewMode === 'chat'
            ? 'mx-auto flex h-full w-full max-w-3xl flex-col'
            : 'mx-auto max-w-3xl space-y-6'
        }
      >
        {/* Applications List for Creators - Only show when no fulfiller is assigned */}
        {!project.fulfiller_id && <MarketplaceApplicationsList />}

        {/* Project Description / Artistic Direction */}
        {(project.description || isCreator) && (
          <div className='mb-4'>
            <div className='mb-1.5 flex items-center justify-between'>
              <h3 className='text-xs font-medium text-foreground-secondary'>
                Artistic Direction
              </h3>
              {isCreator && (
                <button
                  onClick={
                    isEditingDescription
                      ? handleCancelDescriptionEdit
                      : handleEditDescription
                  }
                  className='text-foreground-secondary transition-colors hover:text-foreground-primary'
                >
                  <svg
                    className='h-4 w-4'
                    fill='none'
                    stroke='currentColor'
                    viewBox='0 0 24 24'
                  >
                    <path
                      strokeLinecap='round'
                      strokeLinejoin='round'
                      strokeWidth={2}
                      d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
                    />
                  </svg>
                </button>
              )}
            </div>
            <div className='rounded-lg border border-border-primary bg-background-primary p-4'>
              {isEditingDescription ? (
                <div className='mt-2 space-y-2'>
                  <textarea
                    value={editDescription}
                    onChange={(e) => setEditDescription(e.target.value)}
                    placeholder='Describe the artistic direction and vision for this project...'
                    className='w-full resize-none rounded-lg border border-border-primary bg-background-secondary p-2.5 text-sm text-foreground-primary placeholder-foreground-secondary focus:border-accent-brand focus:outline-none'
                    rows={3}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' && e.ctrlKey) {
                        handleSaveDescription(editDescription);
                      } else if (e.key === 'Escape') {
                        handleCancelDescriptionEdit();
                      }
                    }}
                  />
                  <div className='flex gap-2'>
                    <button
                      onClick={() => handleSaveDescription(editDescription)}
                      disabled={isSavingProject}
                      className='flex items-center gap-1 rounded bg-accent-brand px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-accent-brand/90 disabled:opacity-50'
                    >
                      {isSavingProject ? (
                        <>
                          <svg
                            className='h-3 w-3 animate-spin'
                            fill='none'
                            viewBox='0 0 24 24'
                            aria-hidden='true'
                          >
                            <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>
                          Saving...
                        </>
                      ) : (
                        <>
                          <svg
                            className='h-3 w-3'
                            fill='none'
                            stroke='currentColor'
                            viewBox='0 0 24 24'
                            aria-hidden='true'
                          >
                            <path
                              strokeLinecap='round'
                              strokeLinejoin='round'
                              strokeWidth={2}
                              d='M5 13l4 4L19 7'
                            />
                          </svg>
                          Save
                        </>
                      )}
                    </button>
                    <button
                      onClick={handleCancelDescriptionEdit}
                      className='rounded border border-border-primary bg-background-secondary px-3 py-1.5 text-xs font-medium text-foreground-secondary transition-colors hover:bg-background-primary'
                    >
                      Cancel
                    </button>
                  </div>
                  <p className='text-xs text-foreground-tertiary'>
                    Press Ctrl+Enter to save, Escape to cancel
                  </p>
                </div>
              ) : (
                <div className='mt-2'>
                  {project.description ? (
                    <p className='text-sm leading-relaxed text-foreground-primary'>
                      {project.description}
                    </p>
                  ) : (
                    <p className='text-sm text-foreground-tertiary italic'>
                      No artistic direction provided yet. Click the edit button
                      to add one.
                    </p>
                  )}
                </div>
              )}
            </div>
          </div>
        )}

        {/* Conditional rendering based on view mode */}
        {viewMode === 'chat' ? (
          <MarketplaceChatView />
        ) : (
          <MarketplaceMediaView />
        )}
      </div>
    </div>
  );
};

export default MarketplaceWaveformChat;