App.tsx

import React, { useState, useEffect } from 'react';
import { Button } from './components/Button';
import { TabDisplay } from './components/TabDisplay';
import { GENRES, DIFFICULTIES, KEYS, DEFAULT_REQUEST, INSTRUMENTS } from './constants';
import { generateRiff } from './services/geminiService';
import { GeneratedRiff, RiffRequest, Genre, Difficulty, GuitarKey, Instrument } from './types';

function App() {
  const [screen, setScreen] = useState<'form' | 'result'>('form');
  const [loading, setLoading] = useState(false);
  const [request, setRequest] = useState<RiffRequest>(DEFAULT_REQUEST);
  const [result, setResult] = useState<GeneratedRiff | null>(null);
  const [history, setHistory] = useState<GeneratedRiff[]>([]);

  // Parse URL parameters on mount
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if ([...params.keys()].length === 0) return;

    const newRequest: RiffRequest = { ...DEFAULT_REQUEST };
    let hasChanges = false;

    const genre = params.get('genre');
    if (genre && Object.values(Genre).includes(genre as Genre)) {
        newRequest.genre = genre as Genre;
        hasChanges = true;
    }

    const difficulty = params.get('difficulty');
    if (difficulty && Object.values(Difficulty).includes(difficulty as Difficulty)) {
        newRequest.difficulty = difficulty as Difficulty;
        hasChanges = true;
    }

    const key = params.get('key');
    if (key && Object.values(GuitarKey).includes(key as GuitarKey)) {
        newRequest.key = key as GuitarKey;
        hasChanges = true;
    }

    const tempo = params.get('tempo');
    if (tempo && !isNaN(Number(tempo))) {
        newRequest.tempo = Number(tempo);
        hasChanges = true;
    }

    const type = params.get('type');
    if (type && (type === 'riff' || type === 'solo')) {
        newRequest.type = type as 'riff' | 'solo';
        hasChanges = true;
    }

    const instrument = params.get('instrument');
    if (instrument && Object.values(Instrument).includes(instrument as Instrument)) {
        newRequest.instrument = instrument as Instrument;
        hasChanges = true;
    }

    if (hasChanges) {
        setRequest(newRequest);
        // Clean URL after consuming params
        window.history.replaceState({}, '', window.location.pathname);
    }
  }, []);

  const handleGenerate = async () => {
    setLoading(true);
    try {
      const riff = await generateRiff(request);
      setResult(riff);
      setHistory(prev => {
        const newHistory = [riff, ...prev];
        return newHistory.slice(0, 5);
      });
      setScreen('result');
    } catch (error) {
      alert("Ошибка генерации. Попробуйте еще раз.");
    } finally {
      setLoading(false);
    }
  };

  const updateRequest = <K extends keyof RiffRequest>(key: K, value: RiffRequest[K]) => {
    setRequest(prev => ({ ...prev, [key]: value }));
  };

  const loadFromHistory = (riff: GeneratedRiff) => {
    setResult(riff);
    setScreen('result');
  };

  return (
    <div className="min-h-screen bg-slate-950 flex items-center justify-center p-0 sm:p-4 font-sans text-slate-100">
      {/* Mobile Frame Simulator for Desktop */}
      <div className="w-full max-w-md bg-slate-900 h-[100dvh] sm:h-[850px] sm:rounded-[2.5rem] shadow-2xl overflow-hidden relative flex flex-col border-4 border-slate-800 sm:border-slate-800">
        
        {/* Status Bar Simulation */}
        <div className="h-8 bg-slate-900 w-full flex justify-between items-center px-6 text-xs text-slate-400 select-none z-20">
            <span>12:42</span>
            <div className="flex gap-2">
                <span>5G</span>
                <span>100%</span>
            </div>
        </div>

        {/* Content Area */}
        <main className="flex-1 overflow-y-auto p-5 scrollbar-thin scrollbar-thumb-slate-700">
          
          {screen === 'form' && (
            <div className="flex flex-col min-h-full animate-fadeIn">
              <div className="mb-6 mt-4">
                <h1 className="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 mb-2">
                  RiffMaster AI
                </h1>
                <p className="text-slate-400 text-sm">Создай свой уникальный трек за секунды.</p>
              </div>

              <div className="space-y-6">
                
                {/* Instrument Selector */}
                <div className="space-y-2">
                    <label className="text-xs uppercase font-bold text-slate-500 tracking-wider">Инструмент</label>
                    <div className="grid grid-cols-1 gap-2">
                        {INSTRUMENTS.map((inst) => (
                            <button
                                key={inst}
                                onClick={() => updateRequest('instrument', inst)}
                                className={`flex items-center justify-between p-3 rounded-xl border text-sm font-bold transition-all ${
                                    request.instrument === inst
                                    ? 'border-orange-500 bg-orange-500/10 text-orange-400'
                                    : 'border-slate-700 bg-slate-800 text-slate-400 hover:bg-slate-700'
                                }`}
                            >
                                <span>{inst}</span>
                                {request.instrument === inst && <div className="w-2 h-2 rounded-full bg-orange-500"></div>}
                            </button>
                        ))}
                    </div>
                </div>

                {/* Type Selector */}
                <div className="grid grid-cols-2 gap-3 p-1 bg-slate-800 rounded-xl">
                    {(['riff', 'solo'] as const).map((type) => (
                        <button
                            key={type}
                            onClick={() => updateRequest('type', type)}
                            className={`py-2 rounded-lg text-sm font-bold capitalize transition-all ${request.type === type ? 'bg-slate-700 text-orange-400 shadow-sm' : 'text-slate-500'}`}
                        >
                            {type === 'riff' ? 'Рифф' : 'Соло'}
                        </button>
                    ))}
                </div>

                {/* Genre */}
                <div className="space-y-2">
                    <label className="text-xs uppercase font-bold text-slate-500 tracking-wider">Жанр</label>
                    <div className="grid grid-cols-2 gap-2">
                        {GENRES.map((g) => (
                             <button
                                key={g}
                                onClick={() => updateRequest('genre', g)}
                                className={`p-3 rounded-xl border text-sm font-medium transition-all text-left ${
                                    request.genre === g 
                                    ? 'border-orange-500 bg-orange-500/10 text-orange-400' 
                                    : 'border-slate-700 bg-slate-800/50 text-slate-400 hover:border-slate-600'
                                }`}
                             >
                                {g}
                             </button>
                        ))}
                    </div>
                </div>

                {/* Key & Tempo Row */}
                <div className="space-y-4">
                    <div className="space-y-2">
                        <label className="text-xs uppercase font-bold text-slate-500 tracking-wider">Тональность</label>
                        <select 
                            value={request.key}
                            onChange={(e) => updateRequest('key', e.target.value as GuitarKey)}
                            className="w-full bg-slate-800 border border-slate-700 text-white rounded-xl p-3 focus:outline-none focus:border-orange-500"
                        >
                            {KEYS.map(k => <option key={k} value={k}>{k}</option>)}
                        </select>
                    </div>

                    <div className="space-y-2">
                        <div className="flex justify-between items-center">
                            <label className="text-xs uppercase font-bold text-slate-500 tracking-wider">Темп (BPM)</label>
                            <span className="text-orange-400 font-mono text-sm">{request.tempo}</span>
                        </div>
                        <div className="flex items-center gap-3 bg-slate-800 p-3 rounded-xl border border-slate-700">
                            <button 
                                onClick={() => updateRequest('tempo', Math.max(60, request.tempo - 5))}
                                className="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-700 hover:bg-slate-600 text-slate-300 transition-colors"
                            >
                                -
                            </button>
                            <input 
                                type="range" 
                                min="60" 
                                max="240" 
                                step="5"
                                value={request.tempo}
                                onChange={(e) => updateRequest('tempo', Number(e.target.value))}
                                className="flex-1 accent-orange-500 h-2 bg-slate-900 rounded-lg appearance-none cursor-pointer"
                            />
                            <button 
                                onClick={() => updateRequest('tempo', Math.min(240, request.tempo + 5))}
                                className="w-8 h-8 flex items-center justify-center rounded-lg bg-slate-700 hover:bg-slate-600 text-slate-300 transition-colors"
                            >
                                +
                            </button>
                        </div>
                    </div>
                </div>

                {/* Difficulty */}
                 <div className="space-y-2">
                    <label className="text-xs uppercase font-bold text-slate-500 tracking-wider">Сложность</label>
                    <div className="grid grid-cols-4 gap-1 bg-slate-800 p-1 rounded-xl">
                        {DIFFICULTIES.map((d) => (
                            <button
                                key={d}
                                onClick={() => updateRequest('difficulty', d)}
                                className={`py-2 text-[10px] sm:text-xs font-bold rounded-lg transition-all ${
                                    request.difficulty === d 
                                    ? (d === Difficulty.GOD_MODE ? 'bg-gradient-to-r from-purple-600 to-indigo-600 text-white shadow-lg shadow-purple-500/30' : 'bg-slate-600 text-white shadow-md') 
                                    : 'text-slate-500 hover:text-slate-300'
                                }`}
                            >
                                {d}
                            </button>
                        ))}
                    </div>
                </div>

                <div className="pt-2">
                    <Button onClick={handleGenerate} isLoading={loading}>
                      {loading ? 'Создаем шедевр...' : 'Сгенерировать'}
                    </Button>
                </div>

                {/* History Section */}
                {history.length > 0 && (
                  <div className="border-t border-slate-800 pt-6 pb-4">
                     <h3 className="text-xs uppercase font-bold text-slate-500 tracking-wider mb-4 flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        Недавние
                     </h3>
                     <div className="space-y-3">
                       {history.map((riff, index) => (
                         <div 
                           key={index}
                           onClick={() => loadFromHistory(riff)}
                           className="bg-slate-800/40 hover:bg-slate-800 p-3 rounded-xl border border-slate-800 hover:border-slate-600 transition-all cursor-pointer group flex items-center justify-between"
                         >
                            <div className="flex-1 min-w-0 pr-2">
                              <div className="font-bold text-slate-300 group-hover:text-white text-sm truncate">{riff.title}</div>
                              <div className="text-xs text-slate-500 mt-0.5 flex items-center gap-2">
                                <span>{riff.bpm} BPM</span>
                                {riff.instrument && (
                                    <>
                                        <span>•</span>
                                        <span className="text-orange-400">{riff.instrument}</span>
                                    </>
                                )}
                              </div>
                            </div>
                            <div className="text-slate-600 group-hover:text-orange-500 transition-colors">
                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
                            </div>
                         </div>
                       ))}
                     </div>
                  </div>
                )}
              </div>
            </div>
          )}

          {screen === 'result' && result && (
            <TabDisplay riff={result} request={request} onBack={() => setScreen('form')} />
          )}

        </main>

        {/* Bottom Nav Simulation */}
        <div className="bg-slate-900 border-t border-slate-800 px-6 py-4 flex justify-between items-center text-slate-500">
            <div className={`flex flex-col items-center gap-1 cursor-pointer ${screen === 'form' ? 'text-orange-500' : 'hover:text-slate-300'}`} onClick={() => setScreen('form')}>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
                <span className="text-[10px] font-bold">Create</span>
            </div>
            <div className="flex flex-col items-center gap-1 hover:text-slate-300 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg>
                <span className="text-[10px] font-bold">Saved</span>
            </div>
            <div className="flex flex-col items-center gap-1 hover:text-slate-300 cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg>
                <span className="text-[10px] font-bold">Settings</span>
            </div>
        </div>

      </div>
    </div>
  );
}

export default App;