'use client';

import { calculateAspectRatio, formatFileSize, getFileTypeFromMimeType, formatDuration } from '@/utils/imageUtils';
import { getDownloadPerformance } from '@/utils/performanceColors';

interface ImageMetadataBarProps {
  width: number;
  height: number;
  fileSize: number;
  fileType: string;
  className?: string;
  showVisualIndicator?: boolean;
  downloadMs?: number | null;
}

const AspectRatioIcon = ({ width, height }: { width: number; height: number }) => {
  const ratio = width / height;
  const maxSize = 16;

  let rectWidth: number;
  let rectHeight: number;

  if (ratio > 1) {
    rectWidth = maxSize;
    rectHeight = maxSize / ratio;
  } else {
    rectHeight = maxSize;
    rectWidth = maxSize * ratio;
  }

  const x = (20 - rectWidth) / 2;
  const y = (20 - rectHeight) / 2;

  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 20 20"
      className="flex-shrink-0"
      aria-hidden="true"
    >
      <rect
        x={x}
        y={y}
        width={rectWidth}
        height={rectHeight}
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        className="text-slate-400"
        rx="1"
      />
    </svg>
  );
};

const DownloadIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    stroke="currentColor"
    strokeWidth="2.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="flex-shrink-0"
    aria-hidden="true"
  >
    <path d="M6 1 L6 8 M6 8 L3 5 M6 8 L9 5" />
    <path d="M1 11 L11 11" />
  </svg>
);

export const ImageMetadataBar = ({
  width,
  height,
  fileSize,
  fileType,
  className = '',
  showVisualIndicator = true,
  downloadMs,
}: ImageMetadataBarProps) => {
  const aspectRatio = calculateAspectRatio(width, height);
  const formattedSize = formatFileSize(fileSize);
  const formattedType = getFileTypeFromMimeType(fileType);

  const dimensionsTooltip = `Image dimensions: ${width} pixels wide by ${height} pixels tall`;
  const aspectRatioTooltip = `Aspect ratio: ${aspectRatio} (width to height proportion)`;
  const fileSizeTooltip = `File size: ${formattedSize} (${fileSize.toLocaleString()} bytes)`;
  const fileTypeTooltip = `File format: ${formattedType} image`;
  const visualIndicatorTooltip = 'Aspect ratio visual indicator';

  let downloadTooltip = '';
  let downloadTimeText = '';
  let downloadPerformance = null;

  if (downloadMs !== null && downloadMs !== undefined) {
    downloadPerformance = getDownloadPerformance(downloadMs);
    downloadTimeText = formatDuration(downloadMs);
    downloadTooltip = `Download time: ${downloadTimeText} (${downloadPerformance.label}). ${downloadPerformance.description}`;
  }

  const ariaLabel = `Image details: ${width} by ${height} pixels, ${aspectRatio} aspect ratio, ${formattedSize}, ${formattedType} format${downloadMs ? `, downloaded in ${downloadTimeText}` : ''}`;

  return (
    <div
      className={`flex items-center justify-between px-2.5 py-2 sm:px-3 bg-slate-800/50 border border-slate-700 rounded-lg text-xs ${className}`}
      role="status"
      aria-label={ariaLabel}
    >
      <div className="flex items-center gap-1.5 sm:gap-2 flex-wrap min-w-0">
        <span className="font-medium text-white cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={dimensionsTooltip}>
          {width} × {height}
        </span>

        <span className="text-gray-600 hidden xs:inline" aria-hidden="true">
          ·
        </span>

        <span className="flex items-center gap-1 text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={aspectRatioTooltip}>
          <span>{aspectRatio}</span>
          {showVisualIndicator && (
            <span className="hidden sm:inline" title={visualIndicatorTooltip}>
              <AspectRatioIcon width={width} height={height} />
            </span>
          )}
        </span>

        <span className="text-gray-600 hidden xs:inline" aria-hidden="true">
          ·
        </span>

        <span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs" title={fileSizeTooltip}>
          {formattedSize}
        </span>

        <span className="text-gray-600 hidden sm:inline" aria-hidden="true">
          ·
        </span>

        <span className="text-gray-400 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:inline" title={fileTypeTooltip}>
          {formattedType}
        </span>

        {downloadMs !== null && downloadMs !== undefined && downloadPerformance && (
          <>
            <span className="text-gray-600 hidden sm:inline" aria-hidden="true">
              ·
            </span>

            <span className="flex items-center gap-1.5 cursor-help whitespace-nowrap text-[11px] sm:text-xs hidden sm:flex" title={downloadTooltip}>
              <DownloadIcon />
              <span className={downloadPerformance.color}>{downloadTimeText}</span>
            </span>
          </>
        )}
      </div>
    </div>
  );
};
