'use client';

import { useState, useEffect, useCallback } from 'react';
import { MinimizedApiKey } from '@/components/demo/MinimizedApiKey';
import { ImageZoomModal } from '@/components/demo/ImageZoomModal';
import { ImageGrid } from '@/components/demo/gallery/ImageGrid';
import { EmptyGalleryState } from '@/components/demo/gallery/EmptyGalleryState';

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
const API_KEY_STORAGE_KEY = 'banatie_demo_api_key';
const IMAGES_PER_PAGE = 30;

type ImageItem = {
  name: string;
  url: string;
  size: number;
  contentType: string;
  lastModified: string;
};

type ImagesResponse = {
  success: boolean;
  data?: {
    images: ImageItem[];
    total: number;
    offset: number;
    limit: number;
    hasMore: boolean;
  };
  error?: string;
  message?: string;
};

type ApiKeyInfo = {
  organizationSlug?: string;
  projectSlug?: string;
};

type DownloadTimeMap = {
  [imageId: string]: number;
};

export default function GalleryPage() {
  const [apiKey, setApiKey] = useState('');
  const [apiKeyVisible, setApiKeyVisible] = useState(false);
  const [apiKeyValidated, setApiKeyValidated] = useState(false);
  const [apiKeyInfo, setApiKeyInfo] = useState<ApiKeyInfo | null>(null);
  const [apiKeyError, setApiKeyError] = useState('');
  const [validatingKey, setValidatingKey] = useState(false);

  const [images, setImages] = useState<ImageItem[]>([]);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(false);
  const [loading, setLoading] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState('');

  const [zoomedImageUrl, setZoomedImageUrl] = useState<string | null>(null);
  const [downloadTimes, setDownloadTimes] = useState<DownloadTimeMap>({});

  useEffect(() => {
    const storedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
    if (storedApiKey) {
      setApiKey(storedApiKey);
      validateStoredApiKey(storedApiKey);
    }
  }, []);

  const validateStoredApiKey = async (keyToValidate: string) => {
    setValidatingKey(true);
    setApiKeyError('');

    try {
      const response = await fetch(`${API_BASE_URL}/api/info`, {
        headers: {
          'X-API-Key': keyToValidate,
        },
      });

      if (response.ok) {
        const data = await response.json();
        setApiKeyValidated(true);
        if (data.keyInfo) {
          setApiKeyInfo({
            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
          });
        } else {
          setApiKeyInfo({
            organizationSlug: 'Unknown',
            projectSlug: 'Unknown',
          });
        }
        await fetchImages(keyToValidate, 0);
      } else {
        localStorage.removeItem(API_KEY_STORAGE_KEY);
        setApiKeyError('Stored API key is invalid or expired');
        setApiKeyValidated(false);
      }
    } catch (error) {
      setApiKeyError('Failed to validate stored API key');
      setApiKeyValidated(false);
    } finally {
      setValidatingKey(false);
    }
  };

  const validateApiKey = async () => {
    if (!apiKey.trim()) {
      setApiKeyError('Please enter an API key');
      return;
    }

    setValidatingKey(true);
    setApiKeyError('');

    try {
      const response = await fetch(`${API_BASE_URL}/api/info`, {
        headers: {
          'X-API-Key': apiKey,
        },
      });

      if (response.ok) {
        const data = await response.json();
        setApiKeyValidated(true);
        localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);

        if (data.keyInfo) {
          setApiKeyInfo({
            organizationSlug: data.keyInfo.organizationSlug || data.keyInfo.organizationId,
            projectSlug: data.keyInfo.projectSlug || data.keyInfo.projectId,
          });
        } else {
          setApiKeyInfo({
            organizationSlug: 'Unknown',
            projectSlug: 'Unknown',
          });
        }

        await fetchImages(apiKey, 0);
      } else {
        const error = await response.json();
        setApiKeyError(error.message || 'Invalid API key');
        setApiKeyValidated(false);
      }
    } catch (error) {
      setApiKeyError('Failed to validate API key. Please check your connection.');
      setApiKeyValidated(false);
    } finally {
      setValidatingKey(false);
    }
  };

  const revokeApiKey = () => {
    localStorage.removeItem(API_KEY_STORAGE_KEY);
    setApiKey('');
    setApiKeyValidated(false);
    setApiKeyInfo(null);
    setApiKeyError('');
    setImages([]);
    setOffset(0);
    setHasMore(false);
    setError('');
  };

  const fetchImages = async (keyToUse: string, fetchOffset: number) => {
    if (fetchOffset === 0) {
      setLoading(true);
    } else {
      setLoadingMore(true);
    }
    setError('');

    try {
      const response = await fetch(
        `${API_BASE_URL}/api/images/generated?limit=${IMAGES_PER_PAGE}&offset=${fetchOffset}`,
        {
          headers: {
            'X-API-Key': keyToUse,
          },
        }
      );

      if (!response.ok) {
        const errorData: ImagesResponse = await response.json();
        throw new Error(errorData.error || errorData.message || 'Failed to fetch images');
      }

      const result: ImagesResponse = await response.json();

      if (result.success && result.data) {
        const { images: newImages, offset: newOffset, hasMore: newHasMore } = result.data;

        if (fetchOffset === 0) {
          setImages(newImages);
        } else {
          setImages((prev) => [...prev, ...newImages]);
        }
        setOffset(newOffset);
        setHasMore(newHasMore);
      } else {
        throw new Error(result.error || 'Failed to fetch images');
      }
    } catch (error) {
      setError(error instanceof Error ? error.message : 'Failed to load images');
    } finally {
      setLoading(false);
      setLoadingMore(false);
    }
  };

  const handleLoadMore = () => {
    const newOffset = offset + IMAGES_PER_PAGE;
    fetchImages(apiKey, newOffset);
  };

  const handleDownloadMeasured = useCallback((imageId: string, downloadMs: number) => {
    setDownloadTimes((prev) => ({
      ...prev,
      [imageId]: downloadMs,
    }));
  }, []);

  return (
    <div className="relative z-10 max-w-7xl mx-auto px-6 py-12 md:py-16 min-h-screen">
      {apiKeyValidated && apiKeyInfo && (
        <MinimizedApiKey
          organizationSlug={apiKeyInfo.organizationSlug || 'Unknown'}
          projectSlug={apiKeyInfo.projectSlug || 'Unknown'}
          apiKey={apiKey}
          onRevoke={revokeApiKey}
        />
      )}

      <header className="mb-8 md:mb-12">
        <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-3">
          Image Gallery
        </h1>
        <p className="text-gray-400 text-base md:text-lg">
          Browse your AI-generated images
        </p>
      </header>

      {!apiKeyValidated && (
        <section
          className="mb-6 p-5 bg-slate-900/80 backdrop-blur-sm border border-slate-700 rounded-2xl"
          aria-label="API Key Validation"
        >
          <h2 className="text-lg font-semibold text-white mb-3">API Key</h2>
          <div className="flex gap-3">
            <div className="flex-1 relative">
              <input
                type={apiKeyVisible ? 'text' : 'password'}
                value={apiKey}
                onChange={(e) => setApiKey(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    validateApiKey();
                  }
                }}
                placeholder="Enter your API key"
                className="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent pr-12"
                aria-label="API key input"
              />
              <button
                type="button"
                onClick={() => setApiKeyVisible(!apiKeyVisible)}
                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500 rounded"
                aria-label={apiKeyVisible ? 'Hide API key' : 'Show API key'}
              >
                {apiKeyVisible ? (
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                    />
                  </svg>
                ) : (
                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                    />
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                    />
                  </svg>
                )}
              </button>
            </div>
            <button
              onClick={validateApiKey}
              disabled={validatingKey}
              className="px-6 py-3 rounded-lg bg-amber-600 text-white font-semibold hover:bg-amber-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
              aria-busy={validatingKey}
            >
              {validatingKey ? 'Validating...' : 'Validate'}
            </button>
          </div>

          {apiKeyError && (
            <div className="mt-3 p-3 bg-red-900/20 border border-red-700/50 rounded-lg" role="alert" aria-live="assertive">
              <p className="text-sm text-red-400 font-medium mb-1">{apiKeyError}</p>
              <p className="text-xs text-red-300/80">
                {apiKeyError.includes('Invalid')
                  ? 'Please check your API key and try again. You can create a new key in the admin dashboard.'
                  : 'Please check your internet connection and try again.'}
              </p>
            </div>
          )}
        </section>
      )}

      {apiKeyValidated && (
        <section aria-label="Image Gallery">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-16" role="status" aria-live="polite">
              <div className="animate-spin w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full mb-4" aria-hidden="true"></div>
              <p className="text-gray-400">Loading images...</p>
            </div>
          ) : error ? (
            <div className="p-6 bg-red-900/20 border border-red-700/50 rounded-2xl" role="alert" aria-live="assertive">
              <p className="text-red-400 font-medium mb-2">{error}</p>
              <p className="text-sm text-red-300/80">
                {error.includes('fetch') || error.includes('load')
                  ? 'Unable to load images. Please check your connection and try refreshing the page.'
                  : 'An error occurred while fetching your images. Please try again later.'}
              </p>
            </div>
          ) : images.length === 0 ? (
            <EmptyGalleryState />
          ) : (
            <>
              <ImageGrid
                images={images}
                onImageZoom={setZoomedImageUrl}
                onDownloadMeasured={handleDownloadMeasured}
              />

              {hasMore && (
                <div className="flex justify-center mt-8">
                  <button
                    onClick={handleLoadMore}
                    disabled={loadingMore}
                    className="px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
                    aria-busy={loadingMore}
                    aria-live="polite"
                  >
                    {loadingMore ? (
                      <span className="flex items-center gap-2">
                        <div className="animate-spin w-4 h-4 border-2 border-white border-t-transparent rounded-full" aria-hidden="true"></div>
                        Loading more images...
                      </span>
                    ) : (
                      'Load More Images'
                    )}
                  </button>
                </div>
              )}
            </>
          )}
        </section>
      )}

      <ImageZoomModal imageUrl={zoomedImageUrl} onClose={() => setZoomedImageUrl(null)} />
    </div>
  );
}