import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { Card } from '@/components/ui/card';
import { Music, X } from 'lucide-react';

interface CreateProductViewFilesCardProps {
  previewFile: File | null;
  onPreviewFileChange: (file: File | null) => void;
}

export function CreateProductViewFilesCard({
  previewFile,
  onPreviewFileChange,
}: CreateProductViewFilesCardProps) {
  const onDrop = useCallback(
    (accepted: File[]) => {
      onPreviewFileChange(accepted[0] ?? null);
    },
    [onPreviewFileChange]
  );
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: { 'audio/*': ['.mp3', '.wav', '.m4a', '.ogg'] },
    maxFiles: 1,
    disabled: false,
  });

  return (
    <Card variant="default">
      <h3 className="font-bold text-foreground mb-4 flex items-center gap-2 text-sm uppercase tracking-wider">
        <Music className="w-4 h-4 text-primary" /> Product Files
      </h3>
      <div className="space-y-4">
        <div>
          <label className="text-xs text-muted-foreground mb-1 block">
            Main File (ZIP/RAR)
          </label>
          <div className="h-20 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer hover:border-primary transition-colors duration-[var(--sumi-duration-normal)]">
            <span className="text-xs text-muted-foreground">
              Drop full product here
            </span>
          </div>
        </div>
        <div>
          <label className="text-xs text-muted-foreground mb-1 block">
            Audio Preview (MP3)
          </label>
          <div
            {...getRootProps()}
            className={`h-12 bg-card border border-border rounded-xl flex items-center justify-center cursor-pointer transition-colors duration-[var(--sumi-duration-normal)] ${
              isDragActive ? 'border-primary bg-primary/5' : 'hover:border-primary'
            }`}
          >
            <input {...getInputProps()} />
            {previewFile ? (
              <span className="text-xs text-foreground flex items-center gap-2">
                {previewFile.name}
                <button
                  type="button"
                  onClick={(e) => {
                    e.stopPropagation();
                    onPreviewFileChange(null);
                  }}
                  className="p-1 rounded hover:bg-muted"
                  aria-label="Remove preview"
                >
                  <X className="w-3 h-3" />
                </button>
              </span>
            ) : (
              <span className="text-xs text-muted-foreground">
                Drop preview audio
              </span>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}