import React, { useState, useEffect, useRef } from 'react';
import { Upload, Play, Square, Download, Music, Brain, Loader2, Plus, Trash2, Library } from 'lucide-react';
import * as Tone from 'tone';

const App = () => {
  const [isLibraryLoading, setIsLibraryLoading] = useState(false);
  const [isGenerating, setIsGenerating] = useState(false);
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [generatedMidi, setGeneratedMidi] = useState(null);
  const [status, setStatus] = useState("Ready to analyze MIDI files.");
  const [isPlaying, setIsPlaying] = useState(false);
  const [creativity, setCreativity] = useState(0.5); // 0 = predictable, 1 = random
  const [length, setLength] = useState(32);

  // Markov Chain "Brain"
  const markovModel = useRef({
    pitchMap: {}, // key: currentPitch, value: [nextPitches]
    durationMap: {}, // key: currentDur, value: [nextDurs]
    starts: [] // potential starting notes
  });

  const synthRef = useRef(null);
  const partRef = useRef(null);

  useEffect(() => {
    // Initialize a simple PolySynth
    synthRef.current = new Tone.PolySynth(Tone.Synth).toDestination();
    
    // Cleanup
    return () => {
      if (partRef.current) partRef.current.dispose();
      if (synthRef.current) synthRef.current.dispose();
    };
  }, []);

  // Process MIDI files to build the Markov Chain
  const trainModel = (midiData) => {
    const model = markovModel.current;
    
    midiData.tracks.forEach(track => {
      const notes = track.notes;
      if (notes.length < 2) return;

      // Add the first note to potential starts
      model.starts.push({ midi: notes[0].midi, duration: notes[0].duration });

      for (let i = 0; i < notes.length - 1; i++) {
        const currentNote = notes[i];
        const nextNote = notes[i + 1];

        // Map Pitches
        if (!model.pitchMap[currentNote.midi]) model.pitchMap[currentNote.midi] = [];
        model.pitchMap[currentNote.midi].push(nextNote.midi);

        // Map Durations
        if (!model.durationMap[currentNote.duration]) model.durationMap[currentNote.duration] = [];
        model.durationMap[currentNote.duration].push(nextNote.duration);
      }
    });
  };

  const handleFileUpload = async (e) => {
    const files = Array.from(e.target.files);
    if (files.length === 0) return;

    // Check if library loaded via CDN
    if (!window.Midi) {
        setStatus("MIDI Parser library still loading. Please wait a second.");
        return;
    }

    setIsLibraryLoading(true);
    setStatus(`Processing ${files.length} file(s)...`);

    try {
      const newUploads = [];
      for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        // Accessing global Midi from window object
        const midi = new window.Midi(arrayBuffer);
        
        trainModel(midi);
        
        newUploads.push({
          id: Math.random().toString(36).substr(2, 9),
          name: file.name,
          noteCount: midi.tracks.reduce((acc, t) => acc + t.notes.length, 0)
        });
      }

      setUploadedFiles(prev => [...prev, ...newUploads]);
      setStatus(`Training complete. AI learned from ${files.length} new files.`);
    } catch (err) {
      console.error(err);
      setStatus("Error processing MIDI. Ensure they are valid .mid files.");
    } finally {
      setIsLibraryLoading(false);
    }
  };

  const generateMusic = () => {
    if (uploadedFiles.length === 0) {
      setStatus("Upload some MIDI files first so the AI has data to learn from!");
      return;
    }

    setIsGenerating(true);
    setStatus("AI is calculating probabilities...");

    const model = markovModel.current;
    const sequence = [];
    
    // Pick a starting note
    let current = model.starts.length > 0 
        ? model.starts[Math.floor(Math.random() * model.starts.length)]
        : { midi: 60, duration: 0.5 }; // Fallback to middle C

    let currentTime = 0;

    for (let i = 0; i < length; i++) {
      sequence.push({
        midi: current.midi,
        time: currentTime,
        duration: current.duration
      });

      currentTime += current.duration;

      // Decide next note
      const possiblePitches = model.pitchMap[current.midi] || [];
      const possibleDurs = model.durationMap[current.duration] || [];

      const useRandom = Math.random() < creativity || possiblePitches.length === 0;

      if (useRandom) {
        const allPitches = Object.keys(model.pitchMap);
        const randomPitch = allPitches.length > 0 ? allPitches[Math.floor(Math.random() * allPitches.length)] : 60;
        const allDurs = Object.keys(model.durationMap);
        const randomDur = allDurs.length > 0 ? allDurs[Math.floor(Math.random() * allDurs.length)] : 0.5;
        
        current = {
          midi: parseInt(randomPitch),
          duration: parseFloat(randomDur)
        };
      } else {
        current = {
          midi: possiblePitches[Math.floor(Math.random() * possiblePitches.length)],
          duration: possibleDurs[Math.floor(Math.random() * possibleDurs.length)]
        };
      }
    }

    setGeneratedMidi(sequence);
    setStatus("New sequence generated!");
    setIsGenerating(false);
  };

  const togglePlayback = async () => {
    if (isPlaying) {
      Tone.Transport.stop();
      Tone.Transport.cancel();
      if (partRef.current) partRef.current.stop();
      setIsPlaying(false);
      return;
    }

    if (!generatedMidi) return;

    await Tone.start();
    
    if (partRef.current) partRef.current.dispose();

    partRef.current = new Tone.Part((time, note) => {
      synthRef.current.triggerAttackRelease(
        Tone.Frequency(note.midi, "midi").toNote(),
        note.duration,
        time
      );
    }, generatedMidi.map(n => [n.time, n])).start(0);

    Tone.Transport.start();
    setIsPlaying(true);

    const totalTime = generatedMidi[generatedMidi.length - 1].time + generatedMidi[generatedMidi.length - 1].duration;
    setTimeout(() => {
        if (Tone.Transport.state === 'started') {
            setIsPlaying(false);
        }
    }, totalTime * 1000 + 100);
  };

  const clearLibrary = () => {
    setUploadedFiles([]);
    markovModel.current = { pitchMap: {}, durationMap: {}, starts: [] };
    setGeneratedMidi(null);
    setStatus("Library cleared.");
  };

  return (
    <div className="min-h-screen bg-neutral-950 text-neutral-100 p-4 md:p-8 font-sans">
      {/* External Library Loaders */}
      <script src="https://unpkg.com/@tonejs/midi"></script>

      <div className="max-w-5xl mx-auto">
        <header className="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-4">
          <div>
            <div className="flex items-center mb-2">
              <div className="p-2 bg-indigo-600 rounded-lg mr-3">
                <Brain className="w-8 h-8 text-white" />
              </div>
              <h1 className="text-3xl font-black tracking-tight uppercase italic text-white">Markov Synth AI</h1>
            </div>
            <p className="text-neutral-500 font-medium">Upload MIDI to train a local probabilistic model.</p>
          </div>
          <div className="flex gap-2">
             <button 
              onClick={clearLibrary}
              className="px-4 py-2 text-xs font-bold border border-neutral-800 hover:bg-red-950/30 hover:text-red-400 rounded-lg transition-all uppercase tracking-widest"
             >
              Clear Brain
             </button>
          </div>
        </header>

        <div className="grid lg:grid-cols-3 gap-6">
          {/* Upload Section */}
          <div className="lg:col-span-1 space-y-6">
            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-6 shadow-2xl">
              <h2 className="text-sm font-bold uppercase tracking-widest text-neutral-500 mb-4 flex items-center">
                <Library className="w-4 h-4 mr-2" /> Dataset Library
              </h2>
              
              <label className="group relative flex flex-col items-center justify-center w-full h-32 border-2 border-neutral-800 border-dashed rounded-xl cursor-pointer hover:border-indigo-500/50 hover:bg-indigo-500/5 transition-all mb-4">
                <div className="flex flex-col items-center justify-center py-5">
                  <Plus className="w-6 h-6 text-neutral-600 group-hover:text-indigo-400 mb-2 transition-colors" />
                  <p className="text-xs font-bold text-neutral-500 group-hover:text-neutral-300">DROP MIDI FILES</p>
                </div>
                <input type="file" className="hidden" accept=".mid,.midi" multiple onChange={handleFileUpload} />
              </label>

              <div className="space-y-2 max-h-64 overflow-y-auto pr-2 custom-scrollbar">
                {uploadedFiles.map((file) => (
                  <div key={file.id} className="flex items-center justify-between bg-neutral-800/50 border border-neutral-800 p-3 rounded-lg">
                    <div className="truncate">
                      <p className="text-xs font-bold truncate">{file.name}</p>
                      <p className="text-[10px] text-neutral-500 uppercase">{file.noteCount} notes parsed</p>
                    </div>
                    <Music className="w-3 h-3 text-neutral-600" />
                  </div>
                ))}
                {uploadedFiles.length === 0 && !isLibraryLoading && (
                  <div className="text-center py-8">
                    <p className="text-[10px] font-bold text-neutral-600 uppercase tracking-tighter">No data available</p>
                  </div>
                )}
                {isLibraryLoading && (
                  <div className="flex justify-center py-4">
                    <Loader2 className="w-5 h-5 animate-spin text-indigo-500" />
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Controls & Generation */}
          <div className="lg:col-span-2 space-y-6">
            <div className="bg-neutral-900 border border-neutral-800 rounded-2xl p-8 shadow-2xl text-white">
              <div className="grid md:grid-cols-2 gap-12">
                <div className="space-y-8">
                  <h2 className="text-sm font-bold uppercase tracking-widest text-neutral-500 mb-6">AI Parameters</h2>
                  
                  <div className="space-y-6">
                    <div>
                      <div className="flex justify-between mb-3">
                        <label className="text-xs font-black uppercase text-neutral-400">Creativity / Entropy</label>
                        <span className="text-xs font-mono text-indigo-400">{Math.round(creativity * 100)}%</span>
                      </div>
                      <input 
                        type="range" min="0" max="1" step="0.01" 
                        value={creativity} 
                        onChange={(e) => setCreativity(parseFloat(e.target.value))}
                        className="w-full h-1 bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
                      />
                    </div>

                    <div>
                      <div className="flex justify-between mb-3">
                        <label className="text-xs font-black uppercase text-neutral-400">Sequence Length</label>
                        <span className="text-xs font-mono text-indigo-400">{length}</span>
                      </div>
                      <input 
                        type="range" min="8" max="128" step="8" 
                        value={length} 
                        onChange={(e) => setLength(parseInt(e.target.value))}
                        className="w-full h-1 bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
                      />
                    </div>
                  </div>

                  <button
                    disabled={uploadedFiles.length === 0 || isGenerating}
                    onClick={generateMusic}
                    className="w-full py-4 bg-white text-black hover:bg-indigo-500 hover:text-white disabled:bg-neutral-800 disabled:text-neutral-600 rounded-xl font-black uppercase tracking-widest transition-all shadow-xl flex items-center justify-center space-x-3 active:scale-95"
                  >
                    {isGenerating ? <Loader2 className="w-5 h-5 animate-spin" /> : <Brain className="w-5 h-5" />}
                    <span>Generate Melody</span>
                  </button>
                </div>

                <div className="flex flex-col justify-between border-t md:border-t-0 md:border-l border-neutral-800 pt-8 md:pt-0 md:pl-12">
                   <h2 className="text-sm font-bold uppercase tracking-widest text-neutral-500 mb-6 text-center md:text-left">Output</h2>
                   
                   <div className="flex-grow flex flex-col items-center justify-center py-4">
                      {generatedMidi ? (
                        <div className="w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                           <div className="w-full h-32 bg-indigo-500/5 border border-indigo-500/20 rounded-xl flex items-center justify-center relative overflow-hidden group">
                              <div className="absolute inset-0 flex items-center justify-around opacity-20 group-hover:opacity-40 transition-opacity">
                                {[...Array(12)].map((_, i) => (
                                  <div key={i} className="w-1 bg-indigo-400 rounded-full animate-pulse" style={{ height: `${20 + Math.random() * 60}%`, animationDelay: `${i * 0.1}s` }}></div>
                                ))}
                              </div>
                              <Music className="w-12 h-12 text-indigo-400 relative z-10" />
                           </div>

                           <div className="flex flex-col gap-3">
                              <button 
                                onClick={togglePlayback}
                                className={`w-full py-3 rounded-xl flex items-center justify-center space-x-2 font-bold uppercase tracking-tighter transition-all ${
                                  isPlaying ? 'bg-amber-500/20 text-amber-500 border border-amber-500/40' : 'bg-emerald-500/20 text-emerald-500 border border-emerald-500/40'
                                }`}
                              >
                                {isPlaying ? <Square className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current" />}
                                <span>{isPlaying ? 'Stop' : 'Play AI Theme'}</span>
                              </button>
                           </div>
                        </div>
                      ) : (
                        <div className="text-center">
                          <div className="w-16 h-16 mx-auto bg-neutral-800/50 rounded-full flex items-center justify-center border border-neutral-800 mb-4">
                            <Music className="w-6 h-6 text-neutral-700" />
                          </div>
                          <p className="text-[10px] font-bold text-neutral-600 uppercase tracking-widest">Awaiting Generation</p>
                        </div>
                      )}
                   </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Footer Status */}
        <footer className="mt-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="px-4 py-2 bg-neutral-900 border border-neutral-800 rounded-full flex items-center space-x-3">
            <div className={`w-2 h-2 rounded-full ${uploadedFiles.length > 0 ? 'bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]' : 'bg-neutral-700'}`}></div>
            <span className="text-[10px] font-bold text-neutral-400 uppercase tracking-widest">{status}</span>
          </div>
          <p className="text-[10px] font-bold text-neutral-600 uppercase tracking-widest">Built with Tone.js + Markov Chains</p>
        </footer>
      </div>

      <style>{`
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #262626; border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #404040; }
        
        input[type=range]::-webkit-slider-thumb {
          -webkit-appearance: none;
          height: 12px;
          width: 12px;
          border-radius: 50%;
          background: #6366f1;
          cursor: pointer;
          box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
        }
      `}</style>
    </div>
  );
};

export default App;