'use client';

import React from 'react';
import type { PhotoAttachment } from '../../types/api/photos';
import { useImageCycle, CROSSFADE_DURATION_MS } from '../../lib/hooks/use-image-cycle';

const CROSSFADE_STYLE = { transitionDuration: `${CROSSFADE_DURATION_MS}ms` };

interface RowThumbnailProps {
  photoAttachments?: PhotoAttachment[];
  seed: string;
  alt: string;
  /** Tailwind size classes. Defaults to w-14 h-14. */
  sizeClassName?: string;
}

export function RowThumbnail({
  photoAttachments,
  seed,
  alt,
  sizeClassName = 'w-14 h-14',
}: RowThumbnailProps) {
  const { list, currentIndex, nextIndex, transitioning } = useImageCycle(photoAttachments, seed);

  const displayAlt = list[currentIndex]?.alt || alt;

  if (list.length === 0) {
    return (
      <div className={`${sizeClassName} shrink-0 rounded-component bg-secondary border border-tertiary flex items-center justify-center`}>
        <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
        </svg>
      </div>
    );
  }

  if (list.length === 1) {
    return (
      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden`}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={list[0]!.url}
          alt={list[0]!.alt || alt}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
    );
  }

  return (
      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden relative`}>
      <div
        className={`absolute inset-0 ${transitioning ? 'transition-opacity ease-in-out' : 'transition-none'}`}
        style={{ opacity: transitioning ? 0 : 1, ...(transitioning ? CROSSFADE_STYLE : {}) }}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={list[currentIndex]!.url}
          alt={list[currentIndex]?.alt ?? displayAlt}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
      <div
        className={`absolute inset-0 ${transitioning ? 'transition-opacity ease-in-out' : 'transition-none'}`}
        style={{ opacity: transitioning ? 1 : 0, ...(transitioning ? CROSSFADE_STYLE : {}) }}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={list[nextIndex]!.url}
          alt={list[nextIndex]?.alt ?? displayAlt}
          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
        />
      </div>
    </div>
  );
}
