'use client';

import React from 'react';

interface MarketplaceListingPreviewProps {
  title: string;
  summary: string;
  creditBounty: number;
  timelineDays?: number;
  deadline?: string | null;
  originalClipImageUrl?: string | null;
  status?: string;
}

const MarketplaceListingPreview: React.FC<MarketplaceListingPreviewProps> = ({
  title,
  summary,
  creditBounty,
  timelineDays,
  deadline,
  originalClipImageUrl,
  status = 'OPEN',
}) => {
  // Calculate days from deadline if provided
  const getDaysFromDeadline = (
    deadline: string | null | undefined
  ): number | null => {
    if (!deadline) return null;
    const deadlineDate = new Date(deadline);
    const now = new Date();
    const deadlineStart = new Date(
      deadlineDate.getFullYear(),
      deadlineDate.getMonth(),
      deadlineDate.getDate()
    );
    const nowStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const diffTime = deadlineStart.getTime() - nowStart.getTime();
    const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
  };

  const daysDisplay = deadline ? getDaysFromDeadline(deadline) : timelineDays;

  return (
    <div className='space-y-4'>
      <div>
        <h4 className='mb-2 text-sm font-medium text-foreground-primary'>
          Marketplace Listing Preview
        </h4>
        <p className='mb-4 text-xs text-foreground-secondary'>
          This is how your project will appear to editors
        </p>
      </div>

      {/* Preview Card */}
      <div className='rounded-xl border border-border-primary bg-background-secondary p-4'>
        <div className='flex gap-3'>
          {/* Placeholder Image */}
          <div className='flex h-[86px] w-[67px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-accent-brand/20 to-accent-brand/5'>
            {originalClipImageUrl ? (
              <img
                src={originalClipImageUrl}
                alt={title}
                className='h-full w-full object-cover'
              />
            ) : (
              <svg
                className='h-8 w-8 text-accent-brand/50'
                fill='currentColor'
                viewBox='0 0 24 24'
              >
                <path d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z' />
              </svg>
            )}
          </div>

          {/* Content */}
          <div className='min-w-0 flex-1 space-y-2'>
            {/* Title */}
            <h3 className='line-clamp-1 text-base font-semibold text-foreground-primary'>
              {title.trim() || 'Untitled Project'}
            </h3>

            {/* Summary */}
            <p className='line-clamp-2 text-sm text-foreground-secondary'>
              {summary.trim() || 'No summary provided'}
            </p>

            {/* Meta Info */}
            <div className='flex items-center gap-3 text-xs text-foreground-tertiary'>
              {daysDisplay !== null && daysDisplay !== undefined && (
                <>
                  <div className='flex items-center gap-1'>
                    <svg
                      className='h-3 w-3'
                      fill='none'
                      stroke='currentColor'
                      viewBox='0 0 24 24'
                    >
                      <path
                        strokeLinecap='round'
                        strokeLinejoin='round'
                        strokeWidth={2}
                        d='M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'
                      />
                    </svg>
                    <span>
                      {daysDisplay} {daysDisplay === 1 ? 'day' : 'days'}
                    </span>
                  </div>
                  <span>•</span>
                </>
              )}
              <div className='flex items-center gap-1'>
                <svg
                  className='h-3 w-3 text-yellow-500'
                  fill='currentColor'
                  viewBox='0 0 20 20'
                >
                  <path d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' />
                </svg>
                <span className='font-medium text-accent-brand'>
                  {creditBounty} credits
                </span>
              </div>
            </div>

            {/* Status Badge */}
            <div>
              <span className='inline-flex items-center rounded-full border border-green-400/30 bg-green-400/10 px-2.5 py-0.5 text-xs font-medium text-green-400'>
                {status === 'DRAFT'
                  ? 'Draft'
                  : status === 'OPEN'
                    ? 'Open'
                    : status}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MarketplaceListingPreview;