'use client';

import { useState, useCallback, useEffect } from 'react';
import { useDropzone } from 'react-dropzone';
import { X, Upload } from 'lucide-react';
import { cn } from '@/lib/utils';

interface ImageUploadProps {
  value?: File;
  onChange?: (file: File | undefined) => void;
  onError?: (error: string) => void;
  className?: string;
}

export function ImageUpload({ value, onChange, onError, className }: ImageUploadProps) {
  const [preview, setPreview] = useState<string>();

  useEffect(() => {
    if (value) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result as string);
      };
      reader.readAsDataURL(value);
    } else {
      setPreview(undefined);
    }
  }, [value]);

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      const file = acceptedFiles[0];
      if (!file) return;

      // Check file size (20MB)
      if (file.size > 20 * 1024 * 1024) {
        onError?.('File size must be less than 20MB');
        return;
      }

      // Check file type
      const allowedTypes = ['image/png'];
      if (!allowedTypes.includes(file.type)) {
        onError?.('只支持上传 PNG 格式的图片');
        return;
      }

      // Create preview
      const reader = new FileReader();
      reader.onloadend = () => {
        setPreview(reader.result as string);
      };
      reader.readAsDataURL(file);

      onChange?.(file);
    },
    [onChange, onError]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/png': ['.png'],
    },
    maxFiles: 1,
  });

  const removeImage = () => {
    setPreview(undefined);
    onChange?.(undefined);
  };

  return (
    <div className={cn('space-y-4', className)}>
      <div
        {...getRootProps()}
        className={cn(
          'border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors',
          isDragActive ? 'border-primary bg-primary/5' : 'border-muted-foreground/25',
          preview ? 'border-none p-0' : ''
        )}
      >
        {preview ? (
          <div className="relative">
            <img src={preview} alt="Preview" className="w-full h-48 object-contain rounded-lg" />
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                removeImage();
              }}
              className="absolute top-2 right-2 p-1 bg-background/80 rounded-full hover:bg-background"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
        ) : (
          <>
            <input {...getInputProps()} />
            <div className="flex  flex-col items-center justify-center gap-2">
              <div className="rounded-full bg-gray-100 p-2">
                <Upload className="h-6 w-6 text-gray-500" />
              </div>
              <p className="text-sm text-muted-foreground">
                {isDragActive ? '拖拽图片到此处上传' : '点击或拖拽图片到此处上传'}
              </p>
              <p className="text-xs text-muted-foreground">图片大小不超过 20MB</p>
            </div>
          </>
        )}
      </div>
    </div>
  );
}