import React, { useState } from 'react';
import { Button } from '../../ui/button';
import { X, Mic2, Upload, Clock } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface LyricsEditorModalProps {
  onClose: () => void;
  onSave: (lyrics: string) => void;
  initialLyrics?: string;
}

export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
  onClose,
  onSave,
  initialLyrics = '',
}) => {
  const { addToast } = useToast();
  const [lyrics, setLyrics] = useState(initialLyrics);
  const [isSynced, setIsSynced] = useState(false);

  const handleImport = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (ev) => {
        const text = ev.target?.result;
        if (typeof text === 'string') {
          setLyrics(text);
          addToast('Lyrics imported successfully', 'success');
        }
      };
      reader.readAsText(file);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-2xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-[85vh]">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Mic2 className="w-4 h-4 text-kodo-cyan" /> Lyrics Editor
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-gray-400 hover:text-white" />
          </button>
        </div>

        <div className="flex-1 p-6 flex flex-col min-h-0">
          <div className="flex justify-between items-center mb-4">
            <div className="flex items-center gap-4">
              <label className="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
                <input
                  type="checkbox"
                  className="rounded border-gray-600 bg-transparent text-kodo-cyan focus:ring-0"
                  checked={isSynced}
                  onChange={(e) => setIsSynced(e.target.checked)}
                />
                Sync with Audio
              </label>
              <span className="text-xs text-gray-500 flex items-center gap-1">
                <Clock className="w-3 h-3" /> Timecoded (.lrc)
              </span>
            </div>
            <div className="relative">
              <Button
                variant="ghost"
                size="sm"
                icon={<Upload className="w-3 h-3" />}
              >
                Import File
              </Button>
              <input
                type="file"
                accept=".txt,.lrc"
                className="absolute inset-0 opacity-0 cursor-pointer"
                onChange={handleImport}
              />
            </div>
          </div>

          <textarea
            className="flex-1 w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-kodo-cyan outline-none custom-scrollbar"
            placeholder="Enter lyrics here...&#10;[00:12.00] First line of the verse&#10;[00:15.50] Second line..."
            value={lyrics}
            onChange={(e) => setLyrics(e.target.value)}
          />

          <p className="text-right text-xs text-gray-500 mt-2">
            {lyrics.length} chars
          </p>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-3">
          <Button variant="ghost" onClick={onClose}>
            Cancel
          </Button>
          <Button
            variant="primary"
            onClick={() => {
              onSave(lyrics);
              onClose();
            }}
          >
            Save Lyrics
          </Button>
        </div>
      </div>
    </div>
  );
};
