'use client';

import { useState } from 'react';

import MarketplaceAlert from '../shared/MarketplaceAlert';

interface SubmissionReviewAlertProps {
  media: {
    id: string;
    reference_type: string;
    is_accepted?: boolean | null;
  };
  project: {
    is_creator?: boolean;
    status: string;
  };
  onAccept: (mediaId: string) => void;
  onReject: (mediaId: string, message?: string) => void;
}

const SubmissionReviewAlert: React.FC<SubmissionReviewAlertProps> = ({
  media,
  project,
  onAccept,
  onReject,
}) => {
  const [showRevisionForm, setShowRevisionForm] = useState(false);
  const [revisionMessage, setRevisionMessage] = useState('');

  // Don't show alert if not a submission or not a creator
  if (media.reference_type !== 'submission' || !project?.is_creator) {
    return null;
  }

  const isCompleted = project.status === 'COMPLETED';

  const handleRequestRevision = () => {
    setShowRevisionForm(true);
  };

  const handleSubmitRevision = () => {
    onReject(media.id, revisionMessage.trim() || undefined);
    setShowRevisionForm(false);
    setRevisionMessage('');
  };

  const handleCancelRevision = () => {
    setShowRevisionForm(false);
    setRevisionMessage('');
  };

  if (media.is_accepted === true) {
    return (
      <MarketplaceAlert
        title='Submission Accepted'
        text='This submission has been accepted.'
        buttons={[]}
        variant='success'
        aria-label='Submission accepted notification'
      />
    );
  }

  if (media.is_accepted === false) {
    // Submission has been rejected - just show the status, no action buttons
    // The fulfiller needs to submit a new version before the creator can review again
    return (
      <MarketplaceAlert
        title='Revision Requested'
        text='You requested revisions for this submission. Waiting for the fulfiller to resubmit.'
        buttons={[]}
        variant='error'
        aria-label='Revision requested notification'
      />
    );
  }

  // Default: unreviewed submission - don't show if completed
  if (isCompleted) {
    return null;
  }

  return (
    <>
      <MarketplaceAlert
        title='Review Submission'
        text='Review the fulfiller&#39;s submission and decide whether to accept or request revisions.'
        buttons={[
          {
            label: 'Accept & Complete',
            onClick: () => onAccept(media.id),
            variant: 'primary',
          },
          {
            label: 'Request Revision',
            onClick: handleRequestRevision,
            variant: 'secondary',
          },
        ]}
        variant='warning'
        aria-label='Submission review notification'
      />

      {/* Revision Request Modal */}
      {showRevisionForm && (
        <div
          className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm'
          onClick={(e) => {
            if (e.target === e.currentTarget) {
              handleCancelRevision();
            }
          }}
          onKeyDown={(e) => {
            if (e.key === 'Escape') {
              handleCancelRevision();
            }
          }}
          role='button'
          tabIndex={0}
          aria-label='Close dialog'
        >
          <div
            className='w-full max-w-md rounded-xl border border-border-primary bg-background-primary p-6 shadow-xl'
            role='dialog'
            aria-modal='true'
            aria-labelledby='revision-dialog-title'
          >
            <h3
              id='revision-dialog-title'
              className='mb-4 text-lg font-semibold text-foreground-primary'
            >
              Request Revision
            </h3>
            <p className='mb-4 text-sm text-foreground-secondary'>
              Explain what needs to be changed or improved in this submission.
            </p>

            <textarea
              value={revisionMessage}
              onChange={(e) => setRevisionMessage(e.target.value)}
              placeholder='Describe what needs to be revised...'
              rows={4}
              className='mb-4 w-full resize-none rounded-lg border border-border-primary bg-transparent px-3 py-2 text-sm text-foreground-primary placeholder-foreground-secondary focus:border-accent-brand focus:outline-none'
              autoFocus
            />

            <div className='flex justify-end gap-2'>
              <button
                onClick={handleCancelRevision}
                className='rounded-lg border border-border-primary bg-background-primary px-4 py-2 text-sm font-medium text-foreground-primary transition-colors hover:bg-background-secondary'
              >
                Cancel
              </button>
              <button
                onClick={handleSubmitRevision}
                className='rounded-lg border border-accent-brand bg-accent-brand px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-accent-brand/90'
              >
                Submit Request
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default SubmissionReviewAlert;