{#if mode === 'local'}

To run locally:

pip install hfstudio and run hfstudio from your terminal

{/if}

{#if text}
        <button 
          on:click={clearText}
          class="absolute top-4 right-6 text-sm text-gray-400 hover:text-gray-600"
        >
          Clear
        </button>
        {/if}
      </div>
      
      
      <div class="fixed bottom-0 left-56 right-80 p-4 bg-white border-t border-gray-200">
        <div class="flex items-center justify-between mb-3">
          <span class="text-sm text-gray-500">{text.length} / 5,000 characters</span>
        </div>
        <button
          on:click={generateSpeech}
          disabled={isGenerating || !text.trim()}
          class="w-full px-6 py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg font-medium hover:from-amber-500 hover:to-orange-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-sm"
        >
          {#if isGenerating}
            <Loader2 size={20} class="animate-spin" />
            Generating...
          {:else}
            <Play size={20} />
            Generate speech
          {/if}
        </button>
      </div>
      
      
      {#if audioUrl}
      <div class="p-4 border border-gray-200 rounded-lg bg-white">
        
        <div class="flex items-center gap-3 mb-4">
          <div class="w-2 h-2 bg-green-500 rounded-full"></div>
          <div class="flex-1">
            <h3 class="font-medium text-gray-900 text-sm">{audioTitle}</h3>
            <p class="text-xs text-gray-500">{selectedVoice} • Created 1 second ago</p>
          </div>
          
          <div class="flex items-center gap-2">
            <button 
              on:click={shareAudio}
              class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
            >
              <Share size={14} class="text-gray-600" />
              <span class="text-gray-700">Share</span>
            </button>
            <button 
              on:click={downloadAudio}
              class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
            >
              <span class="text-gray-700">Download</span>
              <Download size={14} class="text-gray-600" />
            </button>
          </div>
        </div>
        
        
        <div class="flex items-center gap-3 mb-4">
          
          <button 
            on:click={togglePlayPause}
            class="w-8 h-8 bg-black rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"
          >
            {#if isPlaying}
              <div class="pause-filled text-white"></div>
            {:else}
              <Play size={14} class="text-white ml-0.5" />
            {/if}
          </button>
          
          
          <div class="flex-1 flex items-center gap-2">
            <span class="text-xs text-gray-500 font-mono">{formatTime(currentTime)}</span>
            <div class="flex-1 h-1 bg-gray-200 rounded-full cursor-pointer">
              <div 
                class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all"
                style="width: {(currentTime / duration) * 100}%"
              ></div>
            </div>
            <span class="text-xs text-gray-500 font-mono">{formatTime(duration)}</span>
          </div>
        </div>
        
        
        <div class="flex items-center gap-4 mb-4">
          
          <button class="p-2 hover:bg-gray-100 rounded-full" title="Skip back">
            <SkipBack size={20} class="text-gray-600" />
          </button>
          
          
          <button 
            on:click={togglePlayPause}
            class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"
          >
            {#if isPlaying}
              <div class="pause-filled text-white scale-150"></div>
            {:else}
              <Play size={20} class="text-white ml-0.5" />
            {/if}
          </button>
          
          
          <button class="p-2 hover:bg-gray-100 rounded-full" title="Skip forward">
            <SkipForward size={20} class="text-gray-600" />
          </button>
          
          
          <div class="flex-1 flex items-center gap-3">
            <span class="text-xs text-gray-500 font-mono">{formatTime(currentTime)}</span>
            <div class="flex-1 h-1 bg-gray-200 rounded-full">
              <div 
                class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all"
                style="width: {(currentTime / duration) * 100}%"
              ></div>
            </div>
            <span class="text-xs text-gray-500 font-mono">{formatTime(duration)}</span>
          </div>
          
          
          <div class="flex items-center gap-2">
            <button 
              on:click={shareAudio}
              class="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50"
            >
              <Share size={14} />
              Share
            </button>
            <button 
              on:click={downloadAudio}
              class="p-2 hover:bg-gray-100 rounded-md" 
              title="Download"
            >
              <Download size={16} class="text-gray-600" />
            </button>
            <button class="p-2 hover:bg-gray-100 rounded-md" title="More options">
              <MoreHorizontal size={16} class="text-gray-600" />
            </button>
          </div>
        </div>
        
        
        {#if audioUrl}
        <audio 
          bind:this={audioElement}
          src={audioUrl}
          on:loadedmetadata={handleAudioLoad}
          on:timeupdate={handleTimeUpdate}
          on:play={handlePlay}
          on:pause={handlePause}
          style="display: none;"
        />
        {/if}
      </div>
      {/if}
    </div>
    
    
    <div class="w-80 border-l border-gray-200 bg-white p-4 overflow-y-auto">
      
      <div class="mb-6 relative model-dropdown">
        <h3 class="font-medium text-gray-900 mb-3">Model</h3>
        <button
          on:click={() => modelDropdownOpen = !modelDropdownOpen}
          class="w-full p-3 border border-gray-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent appearance-none bg-no-repeat bg-right pr-10 shadow-sm text-left flex items-center justify-between"
        >
          <span>
            {#each models as model}
              {#if model.name === selectedModel}
                {model.name}{#if model.badge} <span class="text-xs text-gray-500">({model.badge})</span>{/if}
              {/if}
            {/each}
          </span>
          <ChevronDown size={16} class="text-gray-500" />
        </button>
        
        {#if modelDropdownOpen}
        <div class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
          {#each models as model}
          <button
            class="w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors text-sm {model.name === selectedModel ? 'bg-gray-100' : ''}"
            on:click={() => {
              selectedModel = model.name;
              modelDropdownOpen = false;
            }}
          >
            {model.name}{#if model.badge} <span class="text-xs text-gray-500">({model.badge})</span>{/if}
          </button>
          {/each}
        </div>
        {/if}
      </div>
      
      <div class="mb-6">
        <div class="mb-3">
          <h3 class="font-medium text-gray-900">Voice</h3>
        </div>
        
        <div class="space-y-1">
          {#each voices as voice}
          <button
            class="w-full flex items-center justify-between p-2 rounded-md hover:bg-gray-50 transition-colors text-left
                   {voice.name === selectedVoice ? 'bg-gray-100' : ''}"
            on:click={() => selectedVoice = voice.name}
          >
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center text-white text-xs font-medium">
                {voice.name[0]}
              </div>
              <span class="text-sm font-medium">{voice.name}</span>
            </div>
            <div class="text-xs text-gray-500">
              {voice.description}
            </div>
          </button>
          {/each}
          
          
          <button
            class="w-full flex items-center justify-between p-2 rounded-md opacity-50 cursor-not-allowed text-left"
            disabled
          >
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white text-xs font-medium">
                +
              </div>
              <span class="text-sm font-medium text-gray-600">Clone your voice</span>
            </div>
            <div class="text-xs text-gray-400">
              (coming soon)
            </div>
          </button>
        </div>
      </div>
      
      <div class="space-y-4 pt-4 border-t border-gray-200">
        
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Speed</label>
            <span class="text-sm text-gray-500">{speed.toFixed(1)}x</span>
          </div>
          <input
            type="range"
            bind:value={speed}
            min="0.5"
            max="2"
            step="0.1"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
          <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0.5x</span>
            <span>2.0x</span>
          </div>
        </div>
        
        
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Stability</label>
            <span class="text-sm text-gray-500">{(stability * 100).toFixed(0)}%</span>
          </div>
          <input
            type="range"
            bind:value={stability}
            min="0"
            max="1"
            step="0.01"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
        
        
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Similarity</label>
            <span class="text-sm text-gray-500">{(similarity * 100).toFixed(0)}%</span>
          </div>
          <input
            type="range"
            bind:value={similarity}
            min="0"
            max="1"
            step="0.01"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
        
        
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Style</label>
            <span class="text-sm text-gray-500">
              {styleExaggeration === 0 ? 'None' : 'Exaggerated'}
            </span>
          </div>
          <input
            type="range"
            bind:value={styleExaggeration}
            min="0"
            max="1"
            step="1"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
      </div>
    </div>
  </div>
</div>