'use client';

import { useState } from 'react';

interface ExpandedImageViewProps {
  imageUrl: string;
  alt?: string;
  metadata?: {
    filename?: string;
    size?: string;
    dimensions?: string;
  };
  showMetadata?: boolean;
}

export const ExpandedImageView = ({
  imageUrl,
  alt = 'Full size view',
  metadata,
  showMetadata = false
}: ExpandedImageViewProps) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);

  const handleLoad = () => setLoading(false);
  const handleError = () => {
    setLoading(false);
    setError(true);
  };

  const handleRetry = () => {
    setError(false);
    setLoading(true);
  };

  return (
    <div className="flex flex-col items-center justify-center h-full p-4 sm:p-6 md:p-8">
      {loading && !error && (
        <div
          className="absolute inset-0 flex items-center justify-center"
          role="status"
          aria-live="polite"
        >
          <div className="flex flex-col items-center gap-4">
            <div
              className="w-16 h-16 border-4 border-purple-600 border-t-transparent rounded-full animate-spin"
              aria-hidden="true"
            ></div>
            <p className="text-gray-400 text-sm">Loading image...</p>
          </div>
        </div>
      )}

      {error && (
        <div
          className="flex flex-col items-center gap-4 max-w-md text-center"
          role="alert"
          aria-live="assertive"
        >
          <div className="w-16 h-16 rounded-full bg-red-900/20 border border-red-700/50 flex items-center justify-center">
            <svg
              className="w-8 h-8 text-red-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>

          <div>
            <h3 className="text-lg font-semibold text-white mb-2">Failed to Load Image</h3>
            <p className="text-gray-400 text-sm mb-4">
              The image could not be loaded. Please check your connection and try again.
            </p>
            <button
              onClick={handleRetry}
              className="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors"
            >
              Retry
            </button>
          </div>
        </div>
      )}

      {!error && (
        <div className="relative max-w-full max-h-full flex items-center justify-center">
          <img
            src={imageUrl}
            alt={alt}
            onLoad={handleLoad}
            onError={handleError}
            className={`max-w-full max-h-[calc(100vh-12rem)] object-contain rounded-lg shadow-2xl transition-opacity duration-300 ${
              loading ? 'opacity-0' : 'opacity-100'
            }`}
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}

      {showMetadata && metadata && !loading && !error && (
        <div className="mt-4 px-4 py-3 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-lg">
          <div className="flex flex-wrap items-center gap-4 text-xs text-gray-400">
            {metadata.filename && (
              <span className="font-medium text-gray-300">{metadata.filename}</span>
            )}
            {metadata.dimensions && (
              <span>{metadata.dimensions}</span>
            )}
            {metadata.size && (
              <span>{metadata.size}</span>
            )}
          </div>
        </div>
      )}
    </div>
  );
};
