App.tsx

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { KaraokeState, LrcLine, ExportStatus, ParticleType, WaveformStyle, AnimationType, KaraokeTemplate, BgAnimationType, LogoPosition, CustomTextLine } from './types';
import { parseLrc } from './utils/lrcParser';
import { generateBackgroundImage } from './services/geminiService';
import VideoPreview from './components/VideoPreview';

const FONT_OPTIONS = [
  { name: 'Inter (Modern)', value: 'Inter' },
  { name: 'Bebas Neue (Impact)', value: 'Bebas Neue' },
  { name: 'Montserrat (Clean)', value: 'Montserrat' },
  { name: 'Playfair (Elegant Serif)', value: 'Playfair Display' },
  { name: 'Lora (Classic Serif)', value: 'Lora' },
  { name: 'Dancing (Calligraphy)', value: 'Dancing Script' },
  { name: 'Satisfy (Smooth Script)', value: 'Satisfy' },
  { name: 'Caveat (Casual)', value: 'Caveat' },
  { name: 'Fira (Mono)', value: 'Fira Code' },
  { name: 'Ubuntu (Tech)', value: 'Ubuntu' },
];

const PARTICLE_OPTIONS: { name: string; value: ParticleType }[] = [
  { name: 'None', value: 'none' }, { name: 'Snow', value: 'snow' }, { name: 'Rain', value: 'rain' },
  { name: 'Stars', value: 'stars' }, { name: 'Bokeh', value: 'bokeh' }, { name: 'Mist', value: 'mist' }, { name: 'Fireflies', value: 'fireflies' },
];

const ANIMATION_OPTIONS: { name: string; value: AnimationType }[] = [
  { name: 'None', value: 'none' }, { name: 'Fade', value: 'fade' }, { name: 'Slide', value: 'slide' },
  { name: 'Scale', value: 'scale' }, { name: 'Zoom', value: 'zoom' }, { name: 'Blur', value: 'blur' },
];

const BG_ANIM_OPTIONS: { name: string; value: BgAnimationType }[] = [
  { name: 'Static', value: 'none' }, { name: 'Slow Zoom', value: 'zoom' }, { name: 'Shift Pan', value: 'pan' },
];

const WAVEFORM_STYLES: { name: string; value: WaveformStyle }[] = [
  { name: 'Bars', value: 'bars' }, { name: 'Reflected', value: 'reflected' }, { name: 'Pulse', value: 'pulse' }, { name: 'Circles', value: 'circles' },
];

const DEFAULT_LRC = `[00:28.00] Gặp em trong chiều mưa bay lất phất,
[00:33.97] Nhìn nhau thôi… mà tim anh sao bối rối ……
[00:41.86] Tình đầu đến nhẹ như một cánh lá rơi,
[00:47.29] Chạm vào anh — rồi làm anh biết yêu … lần đầu.
[00:55.45] Tình đầu này… là tình cuối trong anh,
[01:01.99] Thương em mãi… dẫu đời kia đổi thay.
[01:09.23] Ngỡ rằng đời… chỉ cần một phút giây này,
[01:14.84] Ôi tình yêu… sao mà da diết thế…
[01:23.16] Tình đầu… cũng là tình cuối…
[01:30.12] Yêu em… ngỡ rằng không rời… 
[01:36.62] Tình đầu… cũng là tình cuối… 
[01:43.84] Yêu em… ngỡ rằng không rời… 
[01:53.79] Những ngày bên em, gió heo may vẫn hát,
[01:59.66] Vai kề vai… thế giới nhẹ nhàng biết bao.
[02:06.12] Tình yêu đầu tiên — ngọt ngào pha chút nỗi đau,
[02:12.84] Cứ ngỡ mãi mãi… chẳng điều gì chia cắt được ta.
[02:20.18] Nhưng tình yêu… đôi khi mong manh quá,
[02:27.04] Sợ một mai… đánh mất em giữa đêm dài.  
[02:34.11] Anh yêu em… sâu tận đáy tim này,
[02:40.43] Biết làm sao… giữ trọn em mãi mãi.  ……
[02:48.70] Tình đầu… cũng là tình cuối… ( yêu em mãi…)
[02:55.81] Yêu em… ngỡ rằng không rời… ( mãi mãi thôi…)`;

const DEFAULT_CUSTOM_TEXT: CustomTextLine = {
  text: '',
  fontFamily: 'Inter',
  fontSize: 40,
  color: '#ffffff',
  x: 50,
  y: 80,
  opacity: 1.0,
  visible: false
};

const App: React.FC = () => {
  const [state, setState] = useState<KaraokeState>({
    audioUrl: 'https://rny.koc.mybluehost.me/tinhdau.mp3', 
    lrcLines: parseLrc(DEFAULT_LRC), 
    backgroundImageUrl: 'https://images.pexels.com/photos/35104178/pexels-photo-35104178.jpeg', 
    isPlaying: false, 
    currentTime: 0, 
    duration: 0,
    fontSize: 30, fontFamily: 'Playfair Display', textColor: '#ffffff', outlineColor: '#000000', outlineWidth: 2, 
    enableHighlight: false, karaokeHighlightColor: '#facc15', textShadowColor: 'rgba(0,0,0,0.8)', textShadowBlur: 12,
    overlayOpacity: 0.35, lyricPosition: 50, lyricX: 50,
    lyricAnimation: 'fade', animationSpeed: 1.2, lyricLinesCount: 1, 
    enablePan: true, bgAnimationType: 'zoom', bgAnimationSpeed: 0.1, particleEffect: 'snow',
    logoUrl: 'https://rny.koc.mybluehost.me/music.png', logoOpacity: 0.85, logoSize: 180, logoX: 85, logoY: 5,
    showWaveform: true, waveformStyle: 'circles', waveformColor: '#ffffff', waveformOpacity: 0.3, waveformSize: 0.8, waveformPosition: 85, waveformX: 50, waveformWidth: 100,
    customTexts: [
      { ...DEFAULT_CUSTOM_TEXT, text: 'Tình Đầu Tình Cuối', visible: true, y: 15, fontSize: 35, fontFamily: 'Satisfy' },
      { ...DEFAULT_CUSTOM_TEXT, text: 'KARAOKE STUDIO MASTER', visible: true, y: 95, fontSize: 20, opacity: 0.5, fontFamily: 'Montserrat' },
      { ...DEFAULT_CUSTOM_TEXT }
    ]
  });

  const [audioInputUrl, setAudioInputUrl] = useState(state.audioUrl || '');
  const [audioError, setAudioError] = useState<string | null>(null);
  const [prompt, setPrompt] = useState('');
  const [pastedLyrics, setPastedLyrics] = useState(DEFAULT_LRC);
  const [lyricInputMode, setLyricInputMode] = useState<'upload' | 'paste'>('paste');
  const [exportStatus, setExportStatus] = useState<ExportStatus>(ExportStatus.IDLE);
  const [exportProgress, setExportProgress] = useState(0);
  const [templates, setTemplates] = useState<KaraokeTemplate[]>([]);

  const audioRef = useRef<HTMLAudioElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (state.audioUrl) setAudioInputUrl(state.audioUrl);
  }, [state.audioUrl]);

  const commitAudioUrl = () => {
    if (audioInputUrl && audioInputUrl !== state.audioUrl) {
      console.log("Committing new audio URL:", audioInputUrl);
      setAudioError(null);
      setState(s => ({ ...s, audioUrl: audioInputUrl, isPlaying: false, currentTime: 0, duration: 0 }));
    }
  };

  const handleOpenKeySelector = async () => {
    if (window.aistudio && typeof window.aistudio.openSelectKey === 'function') {
      await window.aistudio.openSelectKey();
    }
  };

  const handleGenerateAIBackground = async () => {
    if (window.aistudio && typeof window.aistudio.hasSelectedApiKey === 'function') {
      const hasKey = await window.aistudio.hasSelectedApiKey();
      if (!hasKey) {
        await window.aistudio.openSelectKey();
      }
    }

    setExportStatus(ExportStatus.GENERATING_IMAGE);
    try {
      const url = await generateBackgroundImage(prompt || "cinematic landscape");
      setState(s => ({ ...s, backgroundImageUrl: url }));
    } catch (error: any) {
      console.error("AI Generation failed:", error);
      if (error?.message?.includes("Requested entity was not found.") && window.aistudio) {
        await window.aistudio.openSelectKey();
      }
    } finally {
      setExportStatus(ExportStatus.IDLE);
    }
  };

  const saveTemplate = () => {
    const name = window.prompt("Scene Preset Name:");
    if (!name) return;
    const { audioUrl, lrcLines, backgroundImageUrl, logoUrl, isPlaying, currentTime, duration, ...settings } = state;
    const newTemplate: KaraokeTemplate = { id: Date.now().toString(), name, settings };
    const updated = [...templates, newTemplate];
    setTemplates(updated);
    localStorage.setItem('karaoke_templates_v4', JSON.stringify(updated));
  };

  const handleAudioUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const url = URL.createObjectURL(file);
      setAudioInputUrl(url);
      setAudioError(null);
      setState(prev => ({ ...prev, audioUrl: url, isPlaying: false, currentTime: 0, duration: 0 }));
    }
  };

  const handleLrcUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const text = await file.text();
      setState(prev => ({ ...prev, lrcLines: parseLrc(text, prev.duration) }));
    }
  };

  const updateCustomText = (index: number, updates: Partial<CustomTextLine>) => {
    setState(s => {
      const next = [...s.customTexts];
      next[index] = { ...next[index], ...updates };
      return { ...s, customTexts: next };
    });
  };

  const togglePlay = async () => {
    const audio = audioRef.current;
    if (!audio) return;
    
    try {
      if (state.isPlaying) {
        audio.pause();
        setState(prev => ({ ...prev, isPlaying: false }));
      } else {
        if (!audio.src || audio.src.endsWith('undefined') || audio.src === "") {
          setAudioError("Please provide a valid audio source first.");
          return;
        }
        await audio.play();
        setState(prev => ({ ...prev, isPlaying: true }));
      }
    } catch (err: any) { 
      console.error("Playback failed:", err); 
      setAudioError(`Playback Error: ${err.message || "The browser blocked playback. Try clicking 'Play' again or checking the URL."}`);
      setState(prev => ({ ...prev, isPlaying: false }));
    }
  };

  const handleReplay = async () => {
    const audio = audioRef.current;
    if (!audio) return;
    try {
      audio.currentTime = 0;
      await audio.play();
      setState(prev => ({ ...prev, isPlaying: true, currentTime: 0 }));
    } catch (err: any) {
      console.error("Replay failed:", err);
    }
  };

  const handleExport = useCallback(async () => {
    if (!canvasRef.current || !audioRef.current || !state.audioUrl) return;
    
    setExportStatus(ExportStatus.RECORDING);
    setExportProgress(0);
    
    const audio = audioRef.current;
    audio.currentTime = 0;
    audio.pause();
    
    const canvasStream = (canvasRef.current as any).captureStream(60);
    const stream = (audio as any).captureStream ? (audio as any).captureStream() : null;
    
    let finalStream;
    if (stream) {
      finalStream = new MediaStream([...canvasStream.getVideoTracks(), ...stream.getAudioTracks()]);
    } else {
      finalStream = canvasStream;
    }

    const recorder = new MediaRecorder(finalStream, { 
      mimeType: 'video/webm;codecs=vp9', 
      videoBitsPerSecond: 15000000 
    });

    const chunks: Blob[] = [];
    recorder.ondataavailable = (e) => { if (e.data.size > 0) chunks.push(e.data); };
    
    recorder.onstop = () => {
      const blob = new Blob(chunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); 
      a.href = url; 
      a.download = `karaoke_studio_${Date.now()}.webm`; 
      a.click();
      setExportStatus(ExportStatus.FINISHED);
    };

    try {
      await audio.play();
      recorder.start();

      const checkProgress = () => {
        if (recorder.state === 'recording') {
          const progress = (audio.currentTime / (audio.duration || 1)) * 100;
          setExportProgress(progress);
          
          if (audio.ended || audio.currentTime >= audio.duration) {
            recorder.stop();
            audio.pause();
          } else {
            requestAnimationFrame(checkProgress);
          }
        }
      };
      checkProgress();
    } catch (e) {
      console.error("Export playback failed", e);
      setExportStatus(ExportStatus.IDLE);
    }
  }, [state]);

  // Handle audio lifecycle and events
  useEffect(() => {
    const audio = audioRef.current; 
    if (!audio) return;

    console.log("Setting up audio element for:", state.audioUrl);

    const onTimeUpdate = () => {
      // Direct state update from audio element to avoid stale closures
      setState(prev => ({ ...prev, currentTime: audio.currentTime }));
    };

    const onLoadedMetadata = () => {
      console.log("Audio metadata loaded successfully. Duration:", audio.duration);
      setAudioError(null);
      setState(prev => ({ ...prev, duration: audio.duration }));
    };

    const onEnded = () => {
      setState(prev => ({ ...prev, isPlaying: false, currentTime: 0 }));
    };

    const onError = () => {
      const err = audio.error;
      console.error("HTMLAudioElement Error:", err);
      let msg = "Error loading audio. ";
      if (err) {
        switch (err.code) {
          case 1: msg += "Aborted by user."; break;
          case 2: msg += "Network error (check connection)."; break;
          case 3: msg += "Decoding failed (check file format)."; break;
          case 4: msg += "Not supported or access denied (CORS). Tải bài nhạc với link trên về, sau đó để upload lên test"; break;
          default: msg += "Unknown error occurred.";
        }
      } else {
        msg += "Verify the link is a direct MP3 file and allows remote access (CORS).";
      }
      setAudioError(msg);
      setState(prev => ({ ...prev, isPlaying: false }));
    };

    audio.addEventListener('timeupdate', onTimeUpdate); 
    audio.addEventListener('loadedmetadata', onLoadedMetadata); 
    audio.addEventListener('ended', onEnded);
    audio.addEventListener('error', onError);

    // If source exists, try to load it
    if (audio.src && audio.src !== window.location.href) {
      audio.load();
    }

    return () => { 
      audio.removeEventListener('timeupdate', onTimeUpdate); 
      audio.removeEventListener('loadedmetadata', onLoadedMetadata); 
      audio.removeEventListener('ended', onEnded);
      audio.removeEventListener('error', onError);
    };
  }, [state.audioUrl]); // Re-attach when the source changes

  const isReady = state.audioUrl && state.lrcLines.length > 0;

  return (
    <div className="min-h-screen bg-slate-950 text-slate-200 p-4 md:p-8 flex flex-col items-center select-none font-inter">
      <header className="w-full max-w-7xl mb-12 flex flex-col items-center">
        <h1 className="text-5xl md:text-8xl font-black bg-gradient-to-tr from-cyan-400 via-indigo-500 to-fuchsia-500 bg-clip-text text-transparent mb-3 tracking-tighter italic drop-shadow-2xl text-center">KARAOKE STUDIO V4</h1>
        <div className="flex flex-col md:flex-row gap-6 items-center">
           <p className="text-slate-600 font-bold uppercase tracking-[0.4em] text-[10px]">Production Master visual Engine</p>
           <div className="hidden md:block h-0.5 w-16 bg-slate-800"></div>
           <div className="flex gap-4 items-center">
              <button 
                onClick={handleOpenKeySelector}
                className="text-[10px] font-black bg-slate-900/50 text-slate-400 border border-slate-800 px-6 py-2 rounded-full hover:bg-slate-800 transition-all shadow-xl"
              >
                SELECT API KEY
              </button>
              <button onClick={saveTemplate} className="text-[10px] font-black bg-indigo-600/30 text-indigo-300 border border-indigo-500/30 px-5 py-2 rounded-full hover:bg-indigo-600 hover:text-white transition-all shadow-xl">STORE SCENE PRESET</button>
           </div>
        </div>
      </header>

      <main className="w-full max-w-7xl grid grid-cols-1 lg:grid-cols-[1.6fr_1fr] gap-12 items-start">
        <div className="space-y-8 bg-slate-900/30 p-8 rounded-[3rem] border border-slate-800/60 shadow-3xl overflow-y-auto max-h-[85vh] custom-scrollbar backdrop-blur-xl">
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <section className="space-y-4">
              <label className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-500">Core Assets</label>
              <div className="space-y-3">
                <input type="file" accept="audio/*" onChange={handleAudioUpload} className="hidden" id="au-v4" />
                <label htmlFor="au-v4" className={`flex items-center justify-between p-4 rounded-2xl border-2 border-dashed cursor-pointer transition-all text-sm font-bold ${state.audioUrl && state.audioUrl.startsWith('blob:') ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' : 'border-slate-700 bg-slate-800/50 text-slate-500 hover:border-slate-500'}`}>
                  <span>{state.audioUrl && state.audioUrl.startsWith('blob:') ? 'Custom Track Linked' : 'Upload MP3 Track'}</span> <i className="fa-solid fa-music"></i>
                </label>
                <div className="space-y-1">
                  <div className="relative">
                    <input 
                      type="text" 
                      placeholder="Paste Direct Audio URL (.mp3)..." 
                      value={audioInputUrl} 
                      onChange={(e) => setAudioInputUrl(e.target.value)} 
                      onBlur={commitAudioUrl}
                      onKeyDown={(e) => e.key === 'Enter' && commitAudioUrl()}
                      className="w-full bg-slate-950/40 border border-slate-800 rounded-xl p-3 pr-12 text-[10px] outline-none focus:ring-1 focus:ring-cyan-500/50" 
                    />
                    <button onClick={commitAudioUrl} className="absolute right-3 top-1/2 -translate-y-1/2 text-cyan-500 hover:text-cyan-400 transition-colors">
                      <i className="fa-solid fa-arrow-right"></i>
                    </button>
                  </div>
                  {audioError && <p className="text-[9px] text-red-400 font-bold px-2 py-1 bg-red-950/30 rounded-lg animate-pulse"><i className="fa-solid fa-circle-exclamation mr-1"></i> {audioError}</p>}
                </div>
                <div className="space-y-2">
                  <div className="grid grid-cols-2 gap-3">
                    <input type="file" accept="image/*" onChange={(e) => { const f = e.target.files?.[0]; if(f) setState(s => ({...s, backgroundImageUrl: URL.createObjectURL(f)})) }} className="hidden" id="bg-v4" />
                    <label htmlFor="bg-v4" className="flex items-center justify-center p-3 bg-slate-800 border border-slate-700 rounded-xl cursor-pointer text-[9px] font-black uppercase text-slate-400 hover:bg-slate-700">Photo BG</label>
                    <button onClick={handleGenerateAIBackground} className="flex items-center justify-center p-3 bg-cyan-600 text-white rounded-xl text-[9px] font-black uppercase hover:bg-cyan-500 shadow-lg">AI Visuals</button>
                  </div>
                  <input type="text" placeholder="Paste Background Image URL..." value={state.backgroundImageUrl && state.backgroundImageUrl.startsWith('http') ? state.backgroundImageUrl : ''} onChange={(e) => setState(s => ({...s, backgroundImageUrl: e.target.value}))} className="w-full bg-slate-950/40 border border-slate-800 rounded-xl p-3 text-[10px] outline-none focus:ring-1 focus:ring-cyan-500/50" />
                </div>
                <input type="text" placeholder="Visual style prompt (Optional)..." value={prompt} onChange={(e) => setPrompt(e.target.value)} className="w-full bg-slate-950/40 border border-slate-800 rounded-2xl p-4 text-xs outline-none focus:ring-1 focus:ring-cyan-500/50" />
              </div>
            </section>

            <section className="space-y-4">
              <div className="flex justify-between items-center">
                <label className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-500">Lyrics Sync</label>
                <div className="flex gap-1 bg-slate-950 p-1 rounded-xl border border-slate-800">
                  <button onClick={() => setLyricInputMode('upload')} className={`px-4 py-1.5 text-[10px] font-black rounded-lg transition-all ${lyricInputMode === 'upload' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-500'}`}>FILE</button>
                  <button onClick={() => setLyricInputMode('paste')} className={`px-4 py-1.5 text-[10px] font-black rounded-lg transition-all ${lyricInputMode === 'paste' ? 'bg-indigo-600 text-white shadow-lg' : 'text-slate-500'}`}>PASTE</button>
                </div>
              </div>
              {lyricInputMode === 'upload' ? (
                <><input type="file" accept=".lrc" onChange={handleLrcUpload} className="hidden" id="lrc-v4" /><label htmlFor="lrc-v4" className="flex flex-col items-center justify-center h-[160px] w-full p-4 rounded-2xl border-2 border-dashed border-slate-700 bg-slate-800/30 cursor-pointer text-xs font-bold text-slate-500 hover:text-indigo-400 transition-all"><i className="fa-solid fa-file-waveform text-3xl mb-3"></i><span>Upload .LRC File</span></label></>
              ) : (
                <textarea placeholder="Paste lyrics..." value={pastedLyrics} onChange={(e) => { setPastedLyrics(e.target.value); setState(s => ({...s, lrcLines: parseLrc(e.target.value, s.duration)})) }} className="w-full h-[160px] bg-slate-950/40 border border-slate-800 rounded-2xl p-4 text-xs outline-none focus:ring-1 focus:ring-indigo-500/50 resize-none font-mono" />
              )}
            </section>
          </div>

          <section className="bg-slate-950/40 p-10 rounded-[2.5rem] border border-slate-800 space-y-6 shadow-2xl">
            <label className="text-[11px] font-black uppercase tracking-[0.3em] text-fuchsia-400">Custom Annotations</label>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {state.customTexts.map((ct, idx) => (
                <div key={idx} className="space-y-4 p-4 bg-slate-900/60 rounded-2xl border border-slate-800">
                  <div className="flex items-center justify-between">
                    <span className="text-[9px] font-black text-slate-500 uppercase">Text Line {idx + 1}</span>
                    <button onClick={() => updateCustomText(idx, { visible: !ct.visible })} className={`px-2 py-1 text-[8px] font-black rounded ${ct.visible ? 'bg-fuchsia-600 text-white' : 'bg-slate-800 text-slate-500'}`}>
                      {ct.visible ? 'VISIBLE' : 'HIDDEN'}
                    </button>
                  </div>
                  <input type="text" placeholder="Enter text..." value={ct.text} onChange={e => updateCustomText(idx, { text: e.target.value, visible: true })} className="w-full bg-slate-950 border border-slate-800 rounded-lg p-2 text-[10px] outline-none focus:border-fuchsia-500" />
                  <div className="grid grid-cols-2 gap-2">
                    <select value={ct.fontFamily} onChange={e => updateCustomText(idx, { fontFamily: e.target.value })} className="bg-slate-950 border border-slate-800 rounded-lg p-2 text-[8px] outline-none">
                      {FONT_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.name}</option>)}
                    </select>
                    <input type="color" value={ct.color} onChange={e => updateCustomText(idx, { color: e.target.value })} className="w-full h-8 bg-transparent p-1 border border-slate-800 rounded-lg cursor-pointer" />
                  </div>
                  <div className="space-y-1">
                    <div className="flex justify-between text-[8px] font-black text-slate-500 uppercase"><span>Size</span><span>{ct.fontSize}px</span></div>
                    <input type="range" min="10" max="150" value={ct.fontSize} onChange={e => updateCustomText(idx, { fontSize: parseInt(e.target.value) })} className="w-full h-1 bg-slate-800 rounded-full accent-fuchsia-500 appearance-none cursor-pointer" />
                  </div>
                  <div className="space-y-1">
                    <div className="flex justify-between text-[8px] font-black text-slate-500 uppercase"><span>Horizontal Pos (X)</span><span>{ct.x}%</span></div>
                    <input type="range" min="0" max="100" value={ct.x} onChange={e => updateCustomText(idx, { x: parseInt(e.target.value) })} className="w-full h-1 bg-slate-800 rounded-full accent-fuchsia-500 appearance-none cursor-pointer" />
                  </div>
                  <div className="space-y-1">
                    <div className="flex justify-between text-[8px] font-black text-slate-500 uppercase"><span>Vertical Pos (Y)</span><span>{ct.y}%</span></div>
                    <input type="range" min="0" max="100" value={ct.y} onChange={e => updateCustomText(idx, { y: parseInt(e.target.value) })} className="w-full h-1 bg-slate-800 rounded-full accent-fuchsia-500 appearance-none cursor-pointer" />
                  </div>
                </div>
              ))}
            </div>
          </section>

          <section id="waveform-studio" className="bg-indigo-950/30 p-10 rounded-[2.5rem] border border-indigo-900/40 space-y-8 shadow-2xl">
            <div className="flex items-center justify-between">
              <label className="text-[11px] font-black uppercase tracking-[0.3em] text-indigo-400">Waveform Master Studio</label>
              <button onClick={() => setState(s => ({ ...s, showWaveform: !s.showWaveform }))} className={`text-[10px] font-black px-6 py-2 rounded-full border transition-all ${state.showWaveform ? 'bg-indigo-600 border-indigo-400 shadow-lg' : 'bg-slate-800 border-slate-700 text-slate-500'}`}>
                {state.showWaveform ? 'WAVEFORM ACTIVE' : 'WAVEFORM HIDDEN'}
              </button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
               <div className="space-y-6">
                 <div>
                    <span className="text-[9px] font-black text-slate-600 uppercase mb-4 block">Visualizer Engine</span>
                    <div className="grid grid-cols-2 gap-3">
                       {WAVEFORM_STYLES.map(o => <button key={o.value} onClick={() => setState(s => ({ ...s, waveformStyle: o.value, showWaveform: true }))} className={`py-4 text-[10px] font-black rounded-2xl border transition-all ${state.waveformStyle === o.value ? 'bg-indigo-600 border-indigo-400 text-white shadow-xl' : 'bg-slate-900 border-slate-800 text-slate-500 hover:text-slate-300'}`}>{o.name}</button>)}
                    </div>
                 </div>
                 <div className="grid grid-cols-2 gap-6">
                    <div className="space-y-2"><span className="text-[9px] font-black text-slate-600 uppercase block">Color</span><input type="color" value={state.waveformColor} onChange={(e) => setState(s => ({ ...s, waveformColor: e.target.value }))} className="w-full h-12 bg-transparent p-1 border border-slate-800 rounded-2xl cursor-pointer" /></div>
                    <div className="space-y-2"><span className="text-[9px] font-black text-slate-600 uppercase block">Opacity ({Math.round(state.waveformOpacity * 100)}%)</span><input type="range" min="0" max="1" step="0.05" value={state.waveformOpacity} onChange={(e) => setState(s => ({ ...s, waveformOpacity: parseFloat(e.target.value) }))} className="w-full h-12 bg-slate-800 accent-indigo-500 rounded-2xl px-2" /></div>
                 </div>
               </div>

               <div className="space-y-6 pt-2">
                  <div className="space-y-3"><div className="flex justify-between text-[10px] font-black uppercase text-slate-500"><span>Vertical Pos (Y)</span><span>{state.waveformPosition}%</span></div><input type="range" min="0" max="100" value={state.waveformPosition} onChange={(e) => setState(s => ({ ...s, waveformPosition: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer" /></div>
                  <div className="space-y-3"><div className="flex justify-between text-[10px] font-black uppercase text-slate-500"><span>Horizontal Pos (X)</span><span>{state.waveformX}%</span></div><input type="range" min="0" max="100" value={state.waveformX} onChange={(e) => setState(s => ({ ...s, waveformX: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer" /></div>
                  <div className="space-y-3"><div className="flex justify-between text-[10px] font-black uppercase text-slate-500"><span>Visual Width</span><span>{state.waveformWidth}%</span></div><input type="range" min="10" max="100" value={state.waveformWidth} onChange={(e) => setState(s => ({ ...s, waveformWidth: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer" /></div>
                  <div className="space-y-3"><div className="flex justify-between text-[10px] font-black uppercase text-slate-500"><span>Amplitude Scale</span><span>{state.waveformSize.toFixed(1)}x</span></div><input type="range" min="0.5" max="4.0" step="0.1" value={state.waveformSize} onChange={(e) => setState(s => ({ ...s, waveformSize: parseFloat(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer" /></div>
                  
                  <div className="space-y-4 pt-4 border-t border-indigo-900/20">
                    <span className="text-[9px] font-black text-slate-600 uppercase block">Ambient Atmosphere</span>
                    <div className="flex flex-wrap gap-2">
                       {PARTICLE_OPTIONS.map(o => <button key={o.value} onClick={() => setState(s => ({ ...s, particleEffect: o.value }))} className={`px-4 py-2 text-[9px] font-black rounded-xl border transition-all ${state.particleEffect === o.value ? 'bg-cyan-600 border-cyan-400 text-white shadow-lg' : 'bg-slate-800 border-slate-700 text-slate-500 hover:text-slate-300'}`}>{o.name}</button>)}
                    </div>
                  </div>
               </div>
            </div>
          </section>

          <section className="bg-slate-950/40 p-8 rounded-3xl border border-slate-800/60 grid grid-cols-1 md:grid-cols-2 gap-10">
             <div className="space-y-4">
               <label className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-500">Branding Overlay</label>
               <div className="space-y-3">
                 <input type="file" accept="image/*" onChange={(e) => { const f = e.target.files?.[0]; if(f) setState(s => ({...s, logoUrl: URL.createObjectURL(f)})) }} className="hidden" id="logo-v4" />
                 <label htmlFor="logo-v4" className={`flex items-center justify-between p-3 rounded-xl border border-slate-700 cursor-pointer transition-all text-xs font-bold bg-slate-800 hover:bg-slate-700 ${state.logoUrl && !state.logoUrl.includes('./') && !state.logoUrl.startsWith('http') ? 'border-fuchsia-500 text-fuchsia-400' : 'text-slate-400'}`}>
                    <span>{state.logoUrl && !state.logoUrl.includes('./') && !state.logoUrl.startsWith('http') ? 'Custom Logo Linked' : 'Channel Logo Upload'}</span> <i className="fa-solid fa-upload"></i>
                 </label>
                 <input type="text" placeholder="Paste Logo URL..." value={state.logoUrl && state.logoUrl.startsWith('http') ? state.logoUrl : ''} onChange={(e) => setState(s => ({...s, logoUrl: e.target.value}))} className="w-full bg-slate-950/40 border border-slate-800 rounded-xl p-3 text-[10px] outline-none focus:ring-1 focus:ring-fuchsia-500/50" />
               </div>
               
               {state.logoUrl && (
                 <div className="space-y-4 mt-4 pt-4 border-t border-slate-800">
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-1">
                       <span className="text-[9px] font-black text-slate-600 uppercase">Logo Size</span>
                       <input type="range" min="50" max="500" value={state.logoSize} onChange={(e) => setState(s => ({ ...s, logoSize: parseInt(e.target.value) }))} className="w-full h-8 bg-slate-900 rounded-lg accent-fuchsia-500" />
                     </div>
                     <div className="space-y-1">
                       <span className="text-[9px] font-black text-slate-600 uppercase">Logo Opacity</span>
                       <input type="range" min="0" max="1" step="0.1" value={state.logoOpacity} onChange={(e) => setState(s => ({ ...s, logoOpacity: parseFloat(e.target.value) }))} className="w-full h-8 bg-slate-900 rounded-lg accent-fuchsia-500" />
                     </div>
                   </div>
                   <div className="grid grid-cols-2 gap-4">
                     <div className="space-y-1">
                        <span className="text-[9px] font-black text-slate-600 uppercase">Pos X ({state.logoX}%)</span>
                        <input type="range" min="0" max="100" value={state.logoX} onChange={(e) => setState(s => ({ ...s, logoX: parseInt(e.target.value) }))} className="w-full h-1 bg-slate-800 rounded-full accent-fuchsia-500 appearance-none cursor-pointer" />
                     </div>
                     <div className="space-y-1">
                        <span className="text-[9px] font-black text-slate-600 uppercase">Pos Y ({state.logoY}%)</span>
                        <input type="range" min="0" max="100" value={state.logoY} onChange={(e) => setState(s => ({ ...s, logoY: parseInt(e.target.value) }))} className="w-full h-1 bg-slate-800 rounded-full accent-fuchsia-500 appearance-none cursor-pointer" />
                     </div>
                   </div>
                 </div>
               )}
             </div>

             <div className="space-y-4">
               <label className="text-[11px] font-black uppercase tracking-[0.2em] text-slate-500">Cinematic Motion</label>
               <div className="flex gap-2">
                 {BG_ANIM_OPTIONS.map(o => (
                   <button key={o.value} onClick={() => setState(s => ({ ...s, bgAnimationType: o.value }))} className={`flex-1 py-3 text-[10px] font-black rounded-xl border transition-all ${state.bgAnimationType === o.value ? 'bg-cyan-600 border-cyan-400 text-white' : 'bg-slate-800 border-slate-700 text-slate-500'}`}>{o.name}</button>
                 ))}
               </div>
               <div className="space-y-1 pt-2">
                 <div className="flex justify-between text-[10px] text-slate-600 font-black uppercase"><span>Motion Power</span><span>{state.bgAnimationSpeed.toFixed(1)}x</span></div>
                 <input type="range" min="0.05" max="2" step="0.05" value={state.bgAnimationSpeed} onChange={(e) => setState(s => ({ ...s, bgAnimationSpeed: parseFloat(e.target.value) }))} className="w-full h-1.5 bg-slate-800 rounded-full accent-cyan-400 appearance-none cursor-pointer" />
               </div>
             </div>
          </section>

          <section className="bg-slate-950/60 p-10 rounded-[2.5rem] border border-slate-800 space-y-10 shadow-inner">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
              <div className="space-y-6">
                <label className="text-[11px] font-black uppercase tracking-[0.3em] text-cyan-400">Typography Studio</label>
                <div className="grid grid-cols-2 gap-6">
                   <div className="col-span-2">
                     <span className="text-[9px] font-black text-slate-600 uppercase block mb-2">Font Family</span>
                     <select value={state.fontFamily} onChange={(e) => setState(s => ({ ...s, fontFamily: e.target.value }))} className="w-full bg-slate-900 border border-slate-700 rounded-2xl p-4 text-xs outline-none focus:border-cyan-500">
                        {FONT_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.name}</option>)}
                      </select>
                   </div>
                   <div className="space-y-2"><span className="text-[9px] font-black text-slate-600 uppercase block">Fill</span><input type="color" value={state.textColor} onChange={(e) => setState(s => ({ ...s, textColor: e.target.value }))} className="w-full h-12 bg-transparent p-1 border border-slate-800 rounded-2xl cursor-pointer" /></div>
                   <div className="space-y-2">
                    <div className="flex justify-between items-center mb-1">
                      <span className="text-[9px] font-black text-slate-600 uppercase">Focus Highlight</span>
                      <button onClick={() => setState(s => ({ ...s, enableHighlight: !s.enableHighlight }))} className={`text-[8px] px-2 py-0.5 rounded ${state.enableHighlight ? 'bg-cyan-600 text-white' : 'bg-slate-800 text-slate-500'}`}>
                        {state.enableHighlight ? 'ON' : 'OFF'}
                      </button>
                    </div>
                    <input type="color" value={state.karaokeHighlightColor} onChange={(e) => setState(s => ({ ...s, karaokeHighlightColor: e.target.value }))} className="w-full h-12 bg-transparent p-1 border border-slate-800 rounded-2xl cursor-pointer" />
                  </div>
                </div>
                <div className="space-y-4 pt-4">
                  <div className="space-y-2"><div className="flex justify-between text-[10px] text-slate-500 font-black"><span>FONT SIZE</span><span>{state.fontSize}px</span></div><input type="range" min="10" max="180" value={state.fontSize} onChange={(e) => setState(s => ({ ...s, fontSize: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-cyan-500 appearance-none cursor-pointer" /></div>
                  <div className="space-y-2"><div className="flex justify-between text-[10px] text-slate-500 font-black"><span>HORIZ POS (X)</span><span>{state.lyricX}%</span></div><input type="range" min="0" max="100" value={state.lyricX} onChange={(e) => setState(s => ({ ...s, lyricX: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-cyan-500 appearance-none cursor-pointer" /></div>
                  <div className="space-y-2"><div className="flex justify-between text-[10px] text-slate-500 font-black"><span>VERT POS (Y)</span><span>{state.lyricPosition}%</span></div><input type="range" min="10" max="90" value={state.lyricPosition} onChange={(e) => setState(s => ({ ...s, lyricPosition: parseInt(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-cyan-500 appearance-none cursor-pointer" /></div>
                </div>
              </div>

              <div className="space-y-6">
                <label className="text-[11px] font-black uppercase tracking-[0.3em] text-indigo-400">Reactive Engine</label>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <span className="text-[9px] font-black text-slate-600 uppercase mb-3 block">View Lines</span>
                    <div className="flex bg-slate-900 rounded-2xl p-1.5 border border-slate-800">
                       {[1, 3, 5].map(v => <button key={v} onClick={() => setState(s => ({ ...s, lyricLinesCount: v }))} className={`flex-1 py-2 text-[10px] font-black rounded-xl transition-all ${state.lyricLinesCount === v ? 'bg-indigo-600 text-white shadow-xl' : 'text-slate-500 hover:text-slate-300'}`}>{v}L</button>)}
                    </div>
                  </div>
                  <div>
                    <span className="text-[9px] font-black text-slate-600 uppercase mb-3 block">Anim Style</span>
                    <select value={state.lyricAnimation} onChange={(e) => setState(s => ({ ...s, lyricAnimation: e.target.value as AnimationType }))} className="w-full bg-slate-900 border border-slate-700 rounded-2xl p-3 text-xs outline-none">
                      {/* Fix: Corrected Animation selection to use opt.value instead of opt.name to match expected AnimationType strings */}
                      {ANIMATION_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.name}</option>)}
                    </select>
                  </div>
                </div>
                <div className="space-y-4 pt-4">
                   <div className="space-y-2"><div className="flex justify-between text-[10px] text-slate-500 font-black"><span>TRANSITION FADE SPEED</span><span>{state.animationSpeed}s</span></div><input type="range" min="0.1" max="5.0" step="0.1" value={state.animationSpeed} onChange={(e) => setState(s => ({ ...s, animationSpeed: parseFloat(e.target.value) }))} className="w-full h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer" /></div>
                   <div className="space-y-2"><div className="flex justify-between text-[10px] text-slate-500 font-black"><span>TEXT GLOW BLUR</span><span>{state.textShadowBlur}px</span></div><div className="flex gap-3"><input type="color" value={state.textShadowColor} onChange={(e) => setState(s => ({ ...s, textShadowColor: e.target.value }))} className="w-14 h-10 bg-transparent p-1 border border-slate-800 rounded-xl" /><input type="range" min="0" max="60" value={state.textShadowBlur} onChange={(e) => setState(s => ({ ...s, textShadowBlur: parseInt(e.target.value) }))} className="flex-1 h-2 bg-slate-800 rounded-full accent-indigo-500 appearance-none cursor-pointer mt-4" /></div></div>
                </div>
              </div>
            </div>
          </section>

          {templates.length > 0 && (
            <section className="p-8 bg-slate-950/40 rounded-[2.5rem] border border-slate-800 shadow-inner">
              <label className="text-[11px] font-black uppercase tracking-[0.3em] text-slate-600 mb-6 block">Production Library Presets</label>
              <div className="flex flex-wrap gap-4">
                {templates.map(t => (
                  <div key={t.id} className="group relative">
                    <button onClick={() => setState(prev => ({ ...prev, ...t.settings }))} className="bg-slate-900/80 hover:bg-slate-800 text-[11px] font-black px-6 py-4 rounded-3xl border border-slate-800 transition-all hover:border-cyan-500/50 shadow-xl">{t.name}</button>
                    <button onClick={() => { const u = templates.filter(x => x.id !== t.id); setTemplates(u); localStorage.setItem('karaoke_templates_v4', JSON.stringify(u)); }} className="absolute -top-3 -right-3 w-8 h-8 bg-red-600 hover:bg-red-500 text-white rounded-full flex items-center justify-center text-xs shadow-2xl opacity-0 group-hover:opacity-100 transition-all transform scale-75 group-hover:scale-100"><i className="fa-solid fa-trash-can"></i></button>
                  </div>
                ))}
              </div>
            </section>
          )}

          <button onClick={handleExport} disabled={!isReady || exportStatus === ExportStatus.RECORDING} className={`w-full py-10 rounded-[2.5rem] font-black text-3xl flex items-center justify-center gap-6 transition-all shadow-[0_30px_70px_rgba(0,0,0,0.6)] ${isReady ? 'bg-gradient-to-br from-cyan-500 via-indigo-600 to-fuchsia-600 hover:scale-[1.01] active:scale-[0.98] hover:shadow-cyan-500/30' : 'bg-slate-800 text-slate-600 cursor-not-allowed opacity-40'}`}>
            {exportStatus === ExportStatus.RECORDING ? <><i className="fa-solid fa-spinner fa-spin"></i><span>Encoding Studio Master... {Math.round(exportProgress)}%</span></> : <><i className="fa-solid fa-wand-magic-sparkles"></i><span>BUILD FINAL EXPORT</span></>}
          </button>
        </div>

        <div className="flex flex-col items-center lg:sticky lg:top-8">
          <div className="w-full max-w-[380px] relative drop-shadow-[0_0_50px_rgba(0,0,0,0.8)]">
            <VideoPreview
              ref={canvasRef} audioRef={audioRef} backgroundImageUrl={state.backgroundImageUrl} lrcLines={state.lrcLines}
              currentTime={state.currentTime} fontSize={state.fontSize} overlayOpacity={state.overlayOpacity} fontFamily={state.fontFamily}
              // Fix: Corrected missing state. prefix for outlineWidth to fix 'Cannot find name outlineWidth'
              textColor={state.textColor} outlineColor={state.outlineColor} outlineWidth={state.outlineWidth}
              enableHighlight={state.enableHighlight} karaokeHighlightColor={state.karaokeHighlightColor} 
              textShadowColor={state.textShadowColor} textShadowBlur={state.textShadowBlur}
              lyricPosition={state.lyricPosition} lyricX={state.lyricX}
              lyricAnimation={state.lyricAnimation} animationSpeed={state.animationSpeed} lyricLinesCount={state.lyricLinesCount}
              bgAnimationType={state.bgAnimationType} bgAnimationSpeed={state.bgAnimationSpeed}
              enablePan={state.enablePan} particleEffect={state.particleEffect}
              logoUrl={state.logoUrl} logoOpacity={state.logoOpacity} logoSize={state.logoSize} logoX={state.logoX} logoY={state.logoY}
              showWaveform={state.showWaveform} waveformStyle={state.waveformStyle} waveformColor={state.waveformColor} waveformOpacity={state.waveformOpacity}
              waveformSize={state.waveformSize} waveformPosition={state.waveformPosition} waveformX={state.waveformX} waveformWidth={state.waveformWidth}
              customTexts={state.customTexts}
            />
            {!isReady && (
              <div className="absolute inset-0 bg-slate-950/80 flex flex-col items-center justify-center p-14 text-center rounded-[3rem] backdrop-blur-xl">
                <div className="w-24 h-24 bg-slate-900 rounded-full flex items-center justify-center mb-10 shadow-3xl border border-slate-800 animate-pulse">
                  <i className="fa-solid fa-microchip text-cyan-400 text-4xl"></i>
                </div>
                <h3 className="text-white font-black text-3xl mb-4 tracking-tighter italic">MASTER IDLE</h3>
                <p className="text-slate-500 text-xs font-bold uppercase tracking-[0.2em] leading-relaxed opacity-60">Connect media source and lyrics to initialize production.</p>
              </div>
            )}
          </div>

          <div className="w-full max-w-[380px] mt-10 bg-slate-900/95 backdrop-blur-3xl rounded-[2.5rem] p-10 border border-slate-800/80 shadow-[0_40px_80px_rgba(0,0,0,0.7)]">
             <div className="flex flex-col gap-6">
                <div className="flex items-center gap-6">
                   <button onClick={togglePlay} disabled={!state.audioUrl} className={`w-20 h-20 flex items-center justify-center rounded-[1.5rem] transition-all shadow-3xl active:scale-90 ${state.audioUrl ? 'bg-white text-slate-950 hover:bg-cyan-50 shadow-white/10' : 'bg-slate-800 text-slate-700 cursor-not-allowed'}`}>
                      <i className={`fa-solid ${state.isPlaying ? 'fa-pause' : 'fa-play'} text-3xl`}></i>
                   </button>
                   <button onClick={handleReplay} disabled={!state.audioUrl} className={`w-14 h-14 flex items-center justify-center rounded-[1rem] transition-all bg-slate-800 text-slate-400 hover:bg-slate-700 active:scale-90 ${!state.audioUrl && 'opacity-50 cursor-not-allowed'}`}>
                      <i className="fa-solid fa-rotate-left text-xl"></i>
                   </button>
                   <div className="flex-1 space-y-4">
                      <div className="h-2 w-full bg-slate-800 rounded-full overflow-hidden shadow-inner">
                         <div className="h-full bg-gradient-to-r from-cyan-400 via-emerald-400 to-indigo-500 shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all duration-100" style={{ width: `${state.duration > 0 ? (state.currentTime / state.duration) * 100 : 0}%` }}></div>
                      </div>
                      <div className="flex justify-between text-[12px] text-slate-400 font-mono font-black tracking-widest uppercase">
                         <span className="text-cyan-400">{formatTime(state.currentTime)}</span>
                         <span className="opacity-40">{formatTime(state.duration)}</span>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          {/* Audio element is rendered with a key based on URL to force a fresh instance on change */}
          <audio 
            key={state.audioUrl || 'empty-audio'}
            ref={audioRef} 
            src={state.audioUrl || undefined} 
            preload="auto"
            crossOrigin={state.audioUrl?.startsWith('http') ? 'anonymous' : undefined} 
          />
        </div>
      </main>

      <footer className="mt-auto py-12 flex flex-col items-center gap-6 select-none border-t border-slate-900/50 w-full max-w-7xl">
        <div className="flex flex-wrap justify-center gap-8 md:gap-12">
          <a href="https://fcalgobot.com" target="_blank" rel="noopener noreferrer" className="text-[10px] font-black tracking-[0.3em] text-slate-600 uppercase hover:text-cyan-400 transition-colors duration-300">FCALGOBOT.COM</a>
          <a href="https://8a5.com" target="_blank" rel="noopener noreferrer" className="text-[10px] font-black tracking-[0.3em] text-slate-600 uppercase hover:text-indigo-400 transition-colors duration-300">8A5.COM</a>
          <a href="https://www.tiktok.com/@pulsevibe95" target="_blank" rel="noopener noreferrer" className="text-[10px] font-black tracking-[0.3em] text-slate-600 uppercase hover:text-fuchsia-400 transition-colors duration-300 flex items-center gap-2">
            <i className="fa-brands fa-tiktok"></i> @PULSEVIBE95
          </a>
        </div>
        <div className="text-slate-800 text-[10px] font-black tracking-[0.8em] text-center opacity-30">
          KARAOKE STUDIO MASTER MASTER &bull; VERSION 5.4 &bull; 2024
        </div>
      </footer>
    </div>
  );
};

const formatTime = (seconds: number) => {
  if (!seconds || isNaN(seconds) || seconds === Infinity || seconds < 0) return "0:00";
  const m = Math.floor(seconds / 60); 
  const s = Math.floor(seconds % 60);
  return `${m}:${s.toString().padStart(2, '0')}`;
};

export default App;