import { ChevronLeft, ChevronRight } from "lucide-react";
import { useCallback } from "react";
import { BeforeAfterSlider } from "@/components/common/before-after-slider";
import { ImageViewer } from "@/components/common/image-viewer";
import { ThumbnailStrip } from "@/components/common/thumbnail-strip";
import { useFileStore } from "@/stores/file-store";

export function MultiImageViewer() {
  const { entries, selectedIndex, setSelectedIndex, navigateNext, navigatePrev } = useFileStore();

  const handleKeyDown = useCallback(
    (e: React.KeyboardEvent) => {
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        navigatePrev();
      } else if (e.key === "ArrowRight") {
        e.preventDefault();
        navigateNext();
      }
    },
    [navigateNext, navigatePrev],
  );

  const currentEntry = entries[selectedIndex];
  if (!currentEntry) return null;

  const hasMultiple = entries.length > 1;
  const hasPrev = selectedIndex > 0;
  const hasNext = selectedIndex < entries.length - 1;

  const hasProcessed = !!currentEntry.processedUrl;

  return (
    <section
      aria-label="Image viewer"
      className="flex flex-col w-full h-full min-h-0"
      onKeyDown={hasMultiple ? handleKeyDown : undefined}
      tabIndex={hasMultiple ? 0 : undefined}
    >
      <div className="flex-1 relative flex items-center justify-center min-h-0">
        {hasMultiple && hasPrev && (
          <button
            type="button"
            onClick={navigatePrev}
            className="absolute left-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
            aria-label="Previous image"
          >
            <ChevronLeft className="h-4 w-4" />
          </button>
        )}
        <div className="w-full h-full min-h-0">
          {hasProcessed ? (
            <BeforeAfterSlider
              beforeSrc={currentEntry.blobUrl}
              afterSrc={currentEntry.processedUrl ?? ""}
              beforeSize={currentEntry.originalSize}
              afterSize={currentEntry.processedSize ?? undefined}
            />
          ) : (
            <ImageViewer
              src={currentEntry.blobUrl}
              filename={currentEntry.file.name}
              fileSize={currentEntry.file.size}
            />
          )}
        </div>
        {hasMultiple && hasNext && (
          <button
            type="button"
            onClick={navigateNext}
            className="absolute right-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors"
            aria-label="Next image"
          >
            <ChevronRight className="h-4 w-4" />
          </button>
        )}
        {hasMultiple && (
          <div className="absolute top-3 right-3 z-10 bg-background/80 border border-border px-2 py-0.5 rounded-full text-xs text-muted-foreground tabular-nums">
            {selectedIndex + 1} / {entries.length}
          </div>
        )}
      </div>
      <ThumbnailStrip entries={entries} selectedIndex={selectedIndex} onSelect={setSelectedIndex} />
    </section>
  );
}
