'use client';

import * as React from 'react';
import { Upload, Plus } from 'lucide-react';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import { decodeAudioFile } from '@/lib/audio/decoder';

export interface ImportTrackDialogProps {
  open: boolean;
  onClose: () => void;
  onImportTrack: (buffer: AudioBuffer, name: string) => void;
}

export function ImportTrackDialog({
  open,
  onClose,
  onImportTrack,
}: ImportTrackDialogProps) {
  const [isDragging, setIsDragging] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const fileInputRef = React.useRef<HTMLInputElement>(null);

  const handleFiles = async (files: FileList) => {
    setIsLoading(true);

    try {
      // Process files sequentially
      for (let i = 0; i < files.length; i++) {
        const file = files[i];

        if (!file.type.startsWith('audio/')) {
          console.warn(`Skipping non-audio file: ${file.name}`);
          continue;
        }

        try {
          const buffer = await decodeAudioFile(file);
          const trackName = file.name.replace(/\.[^/.]+$/, ''); // Remove extension
          onImportTrack(buffer, trackName);
        } catch (error) {
          console.error(`Failed to import ${file.name}:`, error);
        }
      }

      onClose();
    } finally {
      setIsLoading(false);
    }
  };

  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      handleFiles(files);
    }
    // Reset input
    e.target.value = '';
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);

    const files = e.dataTransfer.files;
    if (files && files.length > 0) {
      handleFiles(files);
    }
  };

  return (
    <Modal
      open={open}
      onClose={onClose}
      title="Import Audio as Tracks"
      description="Import one or more audio files as new tracks"
    >
      <div className="space-y-4">
        {/* Drag and Drop Area */}
        <div
          onDragOver={handleDragOver}
          onDragLeave={handleDragLeave}
          onDrop={handleDrop}
          className={`
            border-2 border-dashed rounded-lg p-8 text-center transition-colors
            ${isDragging
              ? 'border-primary bg-primary/10'
              : 'border-border hover:border-primary/50'
            }
            ${isLoading ? 'opacity-50 pointer-events-none' : ''}
          `}
        >
          <Upload className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
          <p className="text-sm text-foreground mb-2">
            {isLoading ? 'Importing files...' : 'Drag and drop audio files here'}
          </p>
          <p className="text-xs text-muted-foreground mb-4">
            or
          </p>
          <Button
            onClick={() => fileInputRef.current?.click()}
            disabled={isLoading}
          >
            <Plus className="h-4 w-4 mr-2" />
            Choose Files
          </Button>
          <input
            ref={fileInputRef}
            type="file"
            accept="audio/*"
            multiple
            onChange={handleFileSelect}
            className="hidden"
          />
        </div>

        {/* Supported Formats */}
        <div className="text-xs text-muted-foreground">
          <p className="font-medium mb-1">Supported formats:</p>
          <p>MP3, WAV, OGG, FLAC, M4A, AAC, and more</p>
          <p className="mt-2">
            💡 Tip: Select multiple files at once or drag multiple files to import them all as separate tracks
          </p>
        </div>

        {/* Actions */}
        <div className="flex justify-end gap-2 pt-2 border-t border-border">
          <Button variant="outline" onClick={onClose} disabled={isLoading}>
            Cancel
          </Button>
        </div>
      </div>
    </Modal>
  );
}