'use client';

import * as React from 'react';
import { AlertCircle, FileQuestion, X } from 'lucide-react';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';

export interface UnsupportedFormatDialogProps {
  open: boolean;
  fileName: string;
  fileType: string;
  onClose: () => void;
}

const SUPPORTED_FORMATS = [
  { extension: 'WAV', mimeType: 'audio/wav', description: 'Lossless, widely supported' },
  { extension: 'MP3', mimeType: 'audio/mpeg', description: 'Compressed, universal support' },
  { extension: 'OGG', mimeType: 'audio/ogg', description: 'Free, open format' },
  { extension: 'FLAC', mimeType: 'audio/flac', description: 'Lossless compression' },
  { extension: 'M4A/AAC', mimeType: 'audio/aac', description: 'Apple audio format' },
  { extension: 'AIFF', mimeType: 'audio/aiff', description: 'Apple lossless format' },
  { extension: 'WebM', mimeType: 'audio/webm', description: 'Modern web format' },
];

export function UnsupportedFormatDialog({
  open,
  fileName,
  fileType,
  onClose,
}: UnsupportedFormatDialogProps) {
  if (!open) return null;

  return (
    <Modal open={open} onClose={onClose} title="">
      <div className="p-6 max-w-lg">
        {/* Header */}
        <div className="flex items-start justify-between mb-4">
          <div className="flex items-center gap-3">
            <FileQuestion className="h-6 w-6 text-yellow-500" />
            <h2 className="text-lg font-semibold">Unsupported File Format</h2>
          </div>
          <button onClick={onClose} className="text-muted-foreground hover:text-foreground">
            <X className="h-4 w-4" />
          </button>
        </div>

        {/* Error Message */}
        <div className="bg-yellow-500/10 border border-yellow-500/20 rounded-md p-4 mb-4">
          <div className="flex items-start gap-2">
            <AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-400 mt-0.5 flex-shrink-0" />
            <div className="flex-1">
              <p className="text-sm text-yellow-800 dark:text-yellow-200 font-medium mb-1">
                Cannot open this file
              </p>
              <p className="text-sm text-yellow-700 dark:text-yellow-300">
                <strong>{fileName}</strong>
                {fileType && (
                  <span className="text-muted-foreground"> ({fileType})</span>
                )}
              </p>
            </div>
          </div>
        </div>

        {/* Supported Formats */}
        <div className="mb-6">
          <h3 className="text-sm font-semibold mb-3">Supported Audio Formats:</h3>
          <div className="grid grid-cols-1 gap-2">
            {SUPPORTED_FORMATS.map((format) => (
              <div
                key={format.extension}
                className="flex items-center justify-between gap-4 p-2 rounded bg-muted/30 border border-border/50"
              >
                <div className="flex items-center gap-3">
                  <span className="text-sm font-mono font-semibold text-primary min-w-[80px]">
                    {format.extension}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {format.description}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Recommendations */}
        <div className="bg-muted/50 border border-border rounded-md p-4 mb-4">
          <h4 className="text-sm font-semibold mb-2">How to fix this:</h4>
          <ul className="text-sm text-muted-foreground space-y-2 list-disc list-inside">
            <li>Convert your audio file to a supported format (WAV or MP3 recommended)</li>
            <li>Use a free audio converter like Audacity, FFmpeg, or online converters</li>
            <li>Check that the file isn't corrupted or incomplete</li>
          </ul>
        </div>

        {/* Close Button */}
        <div className="flex justify-end">
          <Button onClick={onClose} variant="default">
            Got it
          </Button>
        </div>
      </div>
    </Modal>
  );
}