"use client";

import { useState } from "react";
import { Image as ImageIcon, ZoomIn, ZoomOut, RotateCcw, Download, AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { getFileRawUrl, getFileDownloadUrl } from "@/lib/api/workspace";

type ImageViewerProps = {
  workspaceId: string;
  path: string;
};

export function ImageViewer({ workspaceId, path }: ImageViewerProps) {
  const [zoom, setZoom] = useState(100);
  const [error, setError] = useState(false);

  const rawUrl = getFileRawUrl(workspaceId, path);
  const downloadUrl = getFileDownloadUrl(workspaceId, path);
  const filename = path.split("/").pop() ?? path;

  const handleZoomIn = () => setZoom((z) => Math.min(z + 25, 400));
  const handleZoomOut = () => setZoom((z) => Math.max(z - 25, 25));
  const handleReset = () => setZoom(100);

  if (error) {
    return (
      <div className="flex flex-col h-full">
        <div className="flex items-center justify-between px-4 py-2.5 border-b border-foreground/5 bg-foreground/[0.02] shrink-0">
          <div className="flex items-center gap-2">
            <ImageIcon className="w-3.5 h-3.5 text-primary/60" />
            <span className="text-xs font-mono font-bold text-foreground/70 truncate">{path}</span>
          </div>
        </div>
        <div className="flex-1 flex flex-col items-center justify-center gap-3">
          <AlertTriangle className="w-10 h-10 text-muted-foreground/20" />
          <p className="text-[10px] text-muted-foreground/40 font-mono uppercase tracking-widest">
            Failed to load image
          </p>
          <a href={downloadUrl} download={filename}>
            <Button variant="outline" size="sm" className="gap-2 rounded-full text-xs">
              <Download className="w-3.5 h-3.5" />
              Download
            </Button>
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-2.5 border-b border-foreground/5 bg-foreground/[0.02] shrink-0">
        <div className="flex items-center gap-2">
          <ImageIcon className="w-3.5 h-3.5 text-primary/60" />
          <span className="text-xs font-mono font-bold text-foreground/70 truncate">{path}</span>
        </div>
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full" onClick={handleZoomOut}>
            <ZoomOut className="w-3.5 h-3.5" />
          </Button>
          <button
            onClick={handleReset}
            className="px-2 py-0.5 text-[10px] font-mono text-muted-foreground/60 hover:text-foreground/80 transition-colors"
          >
            {zoom}%
          </button>
          <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full" onClick={handleZoomIn}>
            <ZoomIn className="w-3.5 h-3.5" />
          </Button>
          <div className="w-px h-4 bg-foreground/10 mx-1" />
          <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full" onClick={handleReset}>
            <RotateCcw className="w-3.5 h-3.5" />
          </Button>
          <a href={downloadUrl} download={filename}>
            <Button variant="ghost" size="icon" className="h-7 w-7 rounded-full">
              <Download className="w-3.5 h-3.5" />
            </Button>
          </a>
        </div>
      </div>

      {/* Image */}
      <div className="flex-1 overflow-auto flex items-center justify-center p-8 bg-foreground/[0.01]">
        <img
          src={rawUrl}
          alt={filename}
          className="max-w-none transition-transform duration-150"
          style={{ width: `${zoom}%` }}
          onError={() => setError(true)}
          draggable={false}
        />
      </div>
    </div>
  );
}
