'use client';

/**
 * ImageToolbar - Floating toolbar for image controls
 */

import { useMemo } from 'react';
import { ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
import { useControls } from 'react-zoom-pan-pinch';
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@djangocfg/ui-core/components';
import { useAppT } from '@djangocfg/i18n';
import { cn } from '@djangocfg/ui-core/lib';
import { ZOOM_PRESETS } from '../utils';
import type { ImageToolbarProps } from '../types';

// =============================================================================
// COMPONENT
// =============================================================================

export function ImageToolbar({
  scale,
  transform,
  onRotate,
  onFlipH,
  onFlipV,
  onZoomPreset,
  onExpand,
}: ImageToolbarProps) {
  const t = useAppT();
  const { zoomIn, zoomOut, resetTransform } = useControls();

  const labels = useMemo(() => ({
    zoomIn: t('tools.image.zoomIn'),
    zoomOut: t('tools.image.zoomOut'),
    fitToView: t('tools.image.fitToView'),
    flipHorizontal: t('tools.image.flipHorizontal'),
    flipVertical: t('tools.image.flipVertical'),
    rotate: t('tools.image.rotate'),
    fullscreen: t('tools.image.fullscreen'),
  }), [t]);

  const zoomLabel = useMemo(() => {
    const percent = Math.round(scale * 100);
    return `${percent}%`;
  }, [scale]);

  return (
    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-background/90 backdrop-blur-sm border rounded-lg p-1 shadow-lg">
      {/* Zoom controls */}
      <Button
        variant="ghost"
        size="icon"
        className="h-7 w-7"
        onClick={() => zoomOut()}
        title={labels.zoomOut}
      >
        <ZoomOut className="h-3.5 w-3.5" />
      </Button>

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="h-7 px-2 min-w-[52px] font-mono text-xs">
            {zoomLabel}
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="center" className="min-w-[80px]">
          {ZOOM_PRESETS.map((preset) => (
            <DropdownMenuItem
              key={preset.label}
              onClick={() => onZoomPreset(preset.value)}
              className="text-xs justify-center"
            >
              {preset.label}
            </DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>

      <Button
        variant="ghost"
        size="icon"
        className="h-7 w-7"
        onClick={() => zoomIn()}
        title={labels.zoomIn}
      >
        <ZoomIn className="h-3.5 w-3.5" />
      </Button>

      <div className="w-px h-4 bg-border mx-1" />

      {/* Fit to view */}
      <Button
        variant="ghost"
        size="icon"
        className="h-7 w-7"
        onClick={() => resetTransform()}
        title={labels.fitToView}
      >
        <Maximize2 className="h-3.5 w-3.5" />
      </Button>

      <div className="w-px h-4 bg-border mx-1" />

      {/* Transform controls */}
      <Button
        variant="ghost"
        size="icon"
        className={cn('h-7 w-7', transform.flipH && 'bg-accent')}
        onClick={onFlipH}
        title={labels.flipHorizontal}
      >
        <FlipHorizontal className="h-3.5 w-3.5" />
      </Button>

      <Button
        variant="ghost"
        size="icon"
        className={cn('h-7 w-7', transform.flipV && 'bg-accent')}
        onClick={onFlipV}
        title={labels.flipVertical}
      >
        <FlipVertical className="h-3.5 w-3.5" />
      </Button>

      <Button
        variant="ghost"
        size="icon"
        className="h-7 w-7"
        onClick={onRotate}
        title={labels.rotate}
      >
        <RotateCw className="h-3.5 w-3.5" />
      </Button>

      {transform.rotation !== 0 && (
        <span className="text-[10px] text-muted-foreground font-mono pl-1">
          {transform.rotation}°
        </span>
      )}

      {onExpand && (
        <>
          <div className="w-px h-4 bg-border mx-1" />
          <Button
            variant="ghost"
            size="icon"
            className="h-7 w-7"
            onClick={onExpand}
            title={labels.fullscreen}
          >
            <Expand className="h-3.5 w-3.5" />
          </Button>
        </>
      )}
    </div>
  );
}
