<script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
  import WaveformPlayer from '$lib/components/WaveformPlayer.svelte';
  import TranscriptEditor from '$lib/components/TranscriptEditor.svelte';
  import SpeakerManager from '$lib/components/SpeakerManager.svelte';
  import AIChatPanel from '$lib/components/AIChatPanel.svelte';
  import ProgressOverlay from '$lib/components/ProgressOverlay.svelte';
  import { segments, speakers } from '$lib/stores/transcript';
  import type { Segment, Word } from '$lib/types/transcript';

  let waveformPlayer: WaveformPlayer;
  let audioUrl = $state('');
  let isTranscribing = $state(false);
  let transcriptionProgress = $state(0);
  let transcriptionStage = $state('');
  let transcriptionMessage = $state('');

  function handleWordClick(timeMs: number) {
    waveformPlayer?.seekTo(timeMs);
  }

  async function handleFileImport() {
    // For now, use a simple prompt — will be replaced with Tauri file dialog
    const filePath = prompt('Enter path to audio/video file:');
    if (!filePath) return;

    // Convert file path to URL for wavesurfer
    // In Tauri, we can use convertFileSrc or asset protocol
    audioUrl = `asset://localhost/${encodeURIComponent(filePath)}`;
    waveformPlayer?.loadAudio(audioUrl);

    // Start transcription
    isTranscribing = true;
    transcriptionProgress = 0;
    transcriptionStage = 'Starting...';

    try {
      const result = await invoke<{
        segments: Array<{
          text: string;
          start_ms: number;
          end_ms: number;
          words: Array<{
            word: string;
            start_ms: number;
            end_ms: number;
            confidence: number;
          }>;
        }>;
        language: string;
        duration_ms: number;
      }>('transcribe_file', { filePath });

      // Convert result to our store format
      const newSegments: Segment[] = result.segments.map((seg, idx) => ({
        id: `seg-${idx}`,
        project_id: '',
        media_file_id: '',
        speaker_id: null,
        start_ms: seg.start_ms,
        end_ms: seg.end_ms,
        text: seg.text,
        original_text: null,
        confidence: null,
        is_edited: false,
        edited_at: null,
        segment_index: idx,
        words: seg.words.map((w, widx) => ({
          id: `word-${idx}-${widx}`,
          segment_id: `seg-${idx}`,
          word: w.word,
          start_ms: w.start_ms,
          end_ms: w.end_ms,
          confidence: w.confidence,
          word_index: widx,
        })),
      }));

      segments.set(newSegments);
    } catch (err) {
      console.error('Transcription failed:', err);
      alert(`Transcription failed: ${err}`);
    } finally {
      isTranscribing = false;
    }
  }
</script>

<div class="app-header">
  <h1>Voice to Notes</h1>
  <div class="header-actions">
    <button class="import-btn" onclick={handleFileImport}>
      Import Audio/Video
    </button>
  </div>
</div>

<div class="workspace">
  <div class="main-content">
    <WaveformPlayer bind:this={waveformPlayer} {audioUrl} />
    <TranscriptEditor onWordClick={handleWordClick} />
  </div>
  <div class="sidebar-right">
    <SpeakerManager />
    <AIChatPanel />
  </div>
</div>

<ProgressOverlay
  visible={isTranscribing}
  percent={transcriptionProgress}
  stage={transcriptionStage}
  message={transcriptionMessage}
/>

<style>
  .app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: #0f3460;
    color: #e0e0e0;
  }
  h1 {
    font-size: 1.25rem;
    margin: 0;
  }
  .import-btn {
    background: #e94560;
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .import-btn:hover {
    background: #d63851;
  }
  .workspace {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    height: calc(100vh - 3.5rem);
    background: #0a0a23;
  }
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }
  .sidebar-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 0;
  }
</style>
