import { useState, useCallback } from 'react';
import Cropper, { Area, Point } from 'react-easy-crop';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Crop, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
import { useLang } from '../../../../core/infrastructure/i18n';

interface AvatarCropModalProps {
  image: string;
  onCrop: (cropData: Area, pixelCropData: Area) => void;
  onClose: () => void;
}

export default function AvatarCropModal({ image, onCrop, onClose }: AvatarCropModalProps) {
  const { t } = useLang();
  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedArea, setCroppedArea] = useState<Area | null>(null);
  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);


  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {
    setCroppedArea(croppedArea);
    setCroppedAreaPixels(croppedAreaPixels);
  }, []);

  const handleSave = () => {
    if (croppedArea && croppedAreaPixels) {
      onCrop(croppedArea, croppedAreaPixels);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-[10001] flex items-center justify-center p-4"
    >
      <div className="absolute inset-0 bg-black/90 backdrop-blur-xl" onClick={onClose} />
      
      <motion.div
        initial={{ opacity: 0, scale: 0.9, y: 20 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        exit={{ opacity: 0, scale: 0.9, y: 20 }}
        className="relative w-full max-w-[500px] aspect-square rounded-[2.5rem] bg-surface-container overflow-hidden border border-white/10 shadow-2xl flex flex-col"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="absolute top-0 inset-x-0 h-16 flex items-center justify-between px-6 z-50 bg-linear-to-b from-black/60 to-transparent pointer-events-none">
          <span className="text-xs font-black uppercase tracking-[0.2em] text-white/70 pointer-events-auto">
            {t('cropPhoto') || 'ОБРЕЗКА ФОТО'}
          </span>
          <button 
            onClick={onClose} 
            className="p-2 rounded-xl bg-black/40 hover:bg-black/60 text-white/50 hover:text-white transition-all pointer-events-auto"
          >
            <X size={20} />
          </button>
        </div>

        {/* Cropper Area */}
        <div className="flex-1 relative bg-[#0a0a0a]">
          <Cropper
            image={image}
            crop={crop}
            zoom={zoom}
            aspect={1}
            cropShape="rect"
            showGrid={false}
            onCropChange={setCrop}
            onCropComplete={onCropComplete}
            onZoomChange={setZoom}
            classes={{
              containerClassName: 'bg-[#0a0a0a]',
              cropAreaClassName: 'rounded-[3rem] border-2 border-white/50 shadow-[0_0_0_9999px_rgba(0,0,0,0.6)]'
            }}
          />
        </div>

        {/* Controls */}
        <div className="p-8 pb-10 bg-surface-container relative z-50">
          <div className="flex items-center gap-4 mb-8">
            <ZoomOut size={16} className="text-zinc-500" />
            <input
              type="range"
              min={1}
              max={3}
              step={0.1}
              value={zoom}
              onChange={(e) => setZoom(Number(e.target.value))}
              className="flex-1 h-1.5 bg-white/10 rounded-full appearance-none cursor-pointer accent-primary"
            />
            <ZoomIn size={16} className="text-zinc-500" />
          </div>

          <div className="flex items-center gap-4">
            <button
              onClick={() => { setCrop({ x: 0, y: 0 }); setZoom(1); }}
              className="p-4 rounded-2xl bg-white/5 text-zinc-400 hover:text-white hover:bg-white/10 transition-all"
              title="Сбросить"
            >
              <RotateCcw size={20} />
            </button>
            <button
              onClick={handleSave}
              className="flex-1 py-4 rounded-2xl bg-primary text-on-primary font-bold shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3"
            >
              <Crop size={20} />
              {t('saveChanges') || 'Применить'}
            </button>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}
