'use client';

import { useState, useCallback, useMemo } from 'react';
import Image from 'next/image';
import { Star, X } from 'lucide-react';
import ImageUpload from '@/components/ui/ImageUpload';
import type {
  Language,
  ProductData,
  ProductImage,
  ImageAlt,
  FormErrors,
} from '@/types/product.types';

const LABEL_STYLE = { color: 'var(--color-text-secondary)' } as const;
const INPUT_STYLE = {
  background: 'var(--color-surface-alt)',
  border: '1px solid var(--color-border)',
  color: 'var(--color-text)',
} as const;

interface ImagesStepProps {
  formData: ProductData;
  updateFormData: <K extends keyof ProductData>(key: K, value: ProductData[K]) => void;
  languages: Language[];
  defaultLanguage: Language;
  errors: FormErrors;
}

export default function ImagesStep({
  formData,
  updateFormData,
  languages,
  defaultLanguage,
}: ImagesStepProps) {
  const [activeLang, setActiveLang] = useState<string>(
    defaultLanguage?.code ?? languages[0]?.code ?? 'en',
  );

  const images = useMemo<ProductImage[]>(() => formData.images ?? [], [formData.images]);

  // ─── Handlers ──────────────────────────────────────────────────────────────

  const addImage = useCallback(
    (publicId: string, imageUrl: string) => {
      const newImage: ProductImage = {
        cloudinary_public_id: publicId,
        image_url: imageUrl,
        position: images.length,
        is_primary: images.length === 0,
        alt_translations: languages.map((lang) => ({
          language_code: lang.code,
          alt_text: '',
        })),
      };
      updateFormData('images', [...images, newImage]);
    },
    [images, languages, updateFormData],
  );

  const removeImage = useCallback(
    (index: number) => {
      const updated = images.filter((_, i) => i !== index);
      if (images[index]?.is_primary && updated.length > 0) {
        updated[0] = { ...updated[0], is_primary: true };
      }
      updateFormData('images', updated);
    },
    [images, updateFormData],
  );

  const setPrimary = useCallback(
    (index: number) => {
      const updated = images.map((img, i) => ({ ...img, is_primary: i === index }));
      updateFormData('images', updated);
    },
    [images, updateFormData],
  );

  const updateAltText = useCallback(
    (imageIndex: number, languageCode: string, altText: string) => {
      const updated = [...images];
      const img = { ...updated[imageIndex] };

      if (!img.alt_translations) {
        img.alt_translations = languages.map((lang) => ({
          language_code: lang.code,
          alt_text: '',
        }));
      } else {
        img.alt_translations = [...img.alt_translations];
      }

      const altIdx = img.alt_translations.findIndex(
        (a: ImageAlt) => a.language_code === languageCode,
      );
      if (altIdx >= 0) {
        img.alt_translations[altIdx] = { ...img.alt_translations[altIdx], alt_text: altText };
      } else {
        img.alt_translations.push({ language_code: languageCode, alt_text: altText });
      }

      updated[imageIndex] = img;
      updateFormData('images', updated);
    },
    [images, languages, updateFormData],
  );

  const getImageAlt = useCallback(
    (image: ProductImage, languageCode: string): string =>
      image.alt_translations?.find((a) => a.language_code === languageCode)?.alt_text ?? '',
    [],
  );

  // ─── Render ─────────────────────────────────────────────────────────────────

  return (
    <div className="space-y-6">
      <h2 className="text-lg font-semibold" style={{ color: 'var(--color-text)' }}>
        Product Images
      </h2>
      <p className="text-sm" style={{ color: 'var(--color-text-secondary)' }}>
        Upload product images, set a primary image, and add alt text for SEO
      </p>

      {/* Upload zone — value=[] so ImageUpload never renders its own preview grid */}
      <div>
        <label className="block text-sm font-medium mb-1.5" style={LABEL_STYLE}>
          Upload Images
        </label>
        <ImageUpload
          value={[]}
          onUpload={addImage}
          onRemove={() => {}}
          label=""
          folder="products"
          maxSize={5}
          multiple
          aspectRatio={1}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Recommended: 800×800 px, JPG/PNG/WebP, max 5 MB each
        </p>
      </div>

      {/* ── Our own image grid ───────────────────────────────────────────────── */}
      {images.length > 0 && (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium" style={LABEL_STYLE}>
              Uploaded Images ({images.length})
            </label>
            <p className="text-xs" style={{ color: 'var(--color-text-tertiary)' }}>
              Hover over image → ⭐ to set as primary
            </p>
          </div>

          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
            {images.map((image, index) => (
              <div
                key={image.cloudinary_public_id || index}
                className="relative group rounded-lg overflow-hidden"
                style={{
                  aspectRatio: '1/1',
                  border: image.is_primary
                    ? '2px solid var(--color-cta)'
                    : '2px solid var(--color-border)',
                  transition: 'border-color 0.2s',
                }}
              >
                <Image
                  src={image.image_url}
                  alt={getImageAlt(image, activeLang) || `Product image ${index + 1}`}
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 50vw, 25vw"
                />

                {/* Primary badge */}
                {image.is_primary ? (
                  <div
                    className="absolute top-2 left-2 px-2 py-0.5 rounded-full text-xs font-medium flex items-center gap-1"
                    style={{ background: 'var(--color-cta)', color: 'white' }}
                  >
                    <Star size={10} fill="white" />
                    Primary
                  </div>
                ) : (
                  <div className="absolute top-2 left-2 px-2 py-0.5 rounded-full text-xs font-medium bg-black/50 text-white">
                    {index + 1}
                  </div>
                )}

                {/* Hover overlay */}
                <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
                  {!image.is_primary && (
                    <button
                      type="button"
                      onClick={() => setPrimary(index)}
                      title="Set as primary"
                      className="p-1.5 rounded-full transition-all hover:scale-110"
                      style={{ background: 'var(--color-cta)', color: 'white' }}
                    >
                      <Star size={14} />
                    </button>
                  )}
                  <button
                    type="button"
                    onClick={() => removeImage(index)}
                    title="Remove image"
                    className="p-1.5 rounded-full bg-red-500/90 text-white transition-all hover:scale-110 hover:bg-red-500"
                  >
                    <X size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── Alt Text ─────────────────────────────────────────────────────────── */}
      {images.length > 0 && (
        <div className="pt-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
          <label className="block text-sm font-medium mb-3" style={LABEL_STYLE}>
            Alt Text (SEO)
          </label>

          {/* Language tabs — only shown when multiple languages */}
          {languages.length > 1 && (
            <div
              className="flex flex-wrap gap-1 border-b mb-3"
              style={{ borderColor: 'var(--color-border)' }}
            >
              {languages.map((lang: Language) => {
                const isActive = activeLang === lang.code;
                return (
                  <button
                    key={lang.code}
                    type="button"
                    onClick={() => setActiveLang(lang.code)}
                    className="px-3 py-1.5 text-xs font-medium transition-all border-b-2"
                    style={{
                      color: isActive ? 'var(--color-cta)' : 'var(--color-text-secondary)',
                      borderColor: isActive ? 'var(--color-cta)' : 'transparent',
                    }}
                  >
                    {lang.name_native} ({lang.code})
                  </button>
                );
              })}
            </div>
          )}

          <div className="space-y-2">
            {images.map((image, index) => (
              <div
                key={image.cloudinary_public_id || index}
                className="flex items-center gap-3"
              >
                {/* Thumbnail */}
                <div
                  className="relative w-10 h-10 rounded overflow-hidden shrink-0"
                  style={{ border: '1px solid var(--color-border)' }}
                >
                  <Image
                    src={image.image_url}
                    alt=""
                    fill
                    className="object-cover"
                    sizes="40px"
                  />
                </div>

                {/* Star indicator for primary */}
                <div className="w-5 shrink-0 flex justify-center">
                  {image.is_primary && (
                    <Star
                      size={14}
                      fill="var(--color-cta)"
                      style={{ color: 'var(--color-cta)' }}
                    />
                  )}
                </div>

                {/* Alt input */}
                <input
                  type="text"
                  value={getImageAlt(image, activeLang)}
                  onChange={(e) => updateAltText(index, activeLang, e.target.value)}
                  placeholder={`Alt text for image ${index + 1} (${activeLang})`}
                  className="flex-1 px-3 py-2 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
                  style={INPUT_STYLE}
                />
              </div>
            ))}
          </div>

          <p className="text-xs mt-2" style={{ color: 'var(--color-text-tertiary)' }}>
            Alt text helps search engines understand your images and improves accessibility
          </p>
        </div>
      )}
    </div>
  );
}