@extends('layouts.app')

@section('title', 'Trim Audio')
@section('meta_description',
    'Trim audio files privately in your browser. Visualization and editing happens entirely on
    your device using Web Audio API.')

@section('content')
    <div class="max-w-5xl mx-auto space-y-8" x-data="audioTrimmer()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Trim Audio</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Trim your voice memos and meetings <span class="text-indigo-400 font-medium">without uploading them</span>.
                Your audio never leaves your device. Drag the sliders to select the audio you want to keep.
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 md:p-8 space-y-8">

            <!-- Upload Zone -->
            <div x-show="!audioLoaded"
                class="relative group border-2 border-dashed border-white/10 rounded-xl p-12 text-center transition-all duration-300 hover:border-indigo-500/50 hover:bg-white/[0.02]"
                :class="{ 'border-indigo-500 bg-indigo-500/10': isDragging }" @dragover.prevent="isDragging = true"
                @dragleave.prevent="isDragging = false" @drop.prevent="handleDrop($event)">
                <input type="file" accept="audio/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
                    @change="handleFile($event.target.files[0])">

                <div class="space-y-4 pointer-events-none">
                    <div
                        class="w-16 h-16 mx-auto bg-slate-800 rounded-full flex items-center justify-center text-indigo-400 group-hover:scale-110 transition-transform">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                        </svg>
                    </div>
                    <div>
                        <p class="text-lg font-medium text-white">Drop your audio file here</p>
                        <p class="text-slate-500 text-sm">MP3, M4A, WAV supported</p>
                    </div>
                </div>
            </div>

            <!-- Editor Interface -->
            <div x-show="audioLoaded" class="space-y-6" style="display: none;">

                <!-- Controls -->
                <div
                    class="flex flex-wrap items-center justify-between gap-4 bg-white/5 p-4 rounded-xl border border-white/5">
                    <div class="flex items-center gap-2">
                        <button @click="togglePlay"
                            class="w-10 h-10 flex items-center justify-center bg-indigo-500 hover:bg-indigo-400 text-white rounded-full transition-colors">
                            <svg x-show="!isPlaying" class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M8 5v14l11-7z" />
                            </svg>
                            <svg x-show="isPlaying" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
                            </svg>
                        </button>
                        <div class="text-sm font-mono text-slate-300 ml-2">
                            <span x-text="formatTime(currentTime)">00:00</span> / <span
                                x-text="formatTime(totalDuration)">00:00</span>
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <button @click="reset" class="text-sm text-slate-400 hover:text-white">Start Over</button>
                        <button @click="download" :disabled="isProcessing"
                            class="bg-indigo-500 hover:bg-indigo-400 text-white font-bold py-2 px-6 rounded-lg transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
                            <span x-show="!isProcessing">Trim & Download</span>
                            <span x-show="isProcessing">Processing...</span>
                        </button>
                    </div>
                </div>

                <!-- Waveform Container -->
                <div class="relative bg-slate-950 rounded-xl border border-white/10 p-4 shadow-inner min-h-[160px]">
                    <div id="waveform" class="w-full"></div>
                </div>

                <div class="text-center text-xs text-slate-500">
                    <p>Drag the handles on the timeline to select the region to keep.</p>
                </div>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="mt-24 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-indigo-500/10 rounded-full blur-3xl"></div>

            <div class="relative z-10 grid md:grid-cols-2 gap-12">
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Why use this tool?</h2>
                    <p class="text-slate-400 leading-relaxed">
                        Most online audio editors require you to upload your file to a server. This is risky for sensitive
                        meetings or personal memos.
                    </p>
                    <p class="text-slate-400 leading-relaxed">
                        "Silent Trim" uses your browser's Web Audio API to process sound files <strong>locally</strong>.
                        Your private recordings never leave your device.
                    </p>
                </div>

                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Who is this for?</h2>
                    <ul class="space-y-3 text-slate-400">
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Students</strong> trimming long lectures to just the important parts.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Journalists</strong> extracting quotes from interviews safely.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-indigo-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Business</strong> cleaning up meeting recordings before sharing.</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

    <!-- Libraries -->
    <script src="https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.min.js"></script>
    <script src="https://unpkg.com/wavesurfer.js@7/dist/plugins/regions.min.js"></script>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('audioTrimmer', () => {
                let wavesurfer = null;
                let wsRegions = null;
                let originalBlob = null;
                let audioContext = null;
                let decodedBuffer = null;

                return {
                    isDragging: false,
                    audioLoaded: false,
                    isProcessing: false,
                    isPlaying: false,
                    currentTime: 0,
                    totalDuration: 0,
                    regionStart: 0,
                    regionEnd: 0,

                    handleDrop(e) {
                        this.isDragging = false;
                        const file = e.dataTransfer.files[0];
                        if (file && file.type.startsWith('audio/')) {
                            this.handleFile(file);
                        }
                    },

                    async handleFile(file) {
                        if (!file) return;
                        originalBlob = file;
                        this.audioLoaded = true;

                        // Give DOM time to update so #waveform exists
                        this.$nextTick(() => {
                            this.initWavesurfer(file);
                        });
                    },

                    async initWavesurfer(file) {
                        if (wavesurfer) {
                            wavesurfer.destroy();
                        }

                        // Create Audio Context for decoding later
                        audioContext = new(window.AudioContext || window.webkitAudioContext)();

                        // Decode for processing
                        const arrayBuffer = await file.arrayBuffer();
                        // Copy buffer for decoding because decodeAudioData detaches it
                        const bufferCopy = arrayBuffer.slice(0);
                        decodedBuffer = await audioContext.decodeAudioData(bufferCopy);

                        // Initialize Wavesurfer
                        wavesurfer = WaveSurfer.create({
                            container: '#waveform',
                            waveColor: '#4f46e5',
                            progressColor: '#818cf8',
                            cursorColor: '#ffffff',
                            barWidth: 2,
                            barRadius: 2,
                            height: 128,
                            responsive: true,
                            normalize: true,
                            url: URL.createObjectURL(file), // Use blob URL for player
                        });

                        // Initialize Regions
                        wsRegions = wavesurfer.registerPlugin(WaveSurfer.Regions.create());

                        wavesurfer.on('ready', () => {
                            this.totalDuration = wavesurfer.getDuration();

                            // Add default region (middle 50% or so)
                            const duration = wavesurfer.getDuration();
                            const start = duration * 0.25;
                            const end = duration * 0.75;

                            wsRegions.addRegion({
                                start: start,
                                end: end,
                                content: 'Keep',
                                color: 'rgba(99, 102, 241, 0.3)',
                                drag: true,
                                resize: true,
                            });

                            this.regionStart = start;
                            this.regionEnd = end;
                        });

                        wavesurfer.on('audioprocess', (time) => {
                            this.currentTime = time;
                        });

                        wavesurfer.on('finish', () => {
                            this.isPlaying = false;
                        });

                        wsRegions.on('region-updated', (region) => {
                            this.regionStart = region.start;
                            this.regionEnd = region.end;
                        });

                        // Play region loop logic if desired, or just basic play
                        wsRegions.on('region-in', (region) => {
                            // active region entered
                        });
                        wsRegions.on('region-out', (region) => {
                            // active region left. For "preview trim", we might want to loop or stop.
                            // For simplicity, we just let it play.
                        });
                    },

                    togglePlay() {
                        if (!wavesurfer) return;
                        if (wavesurfer.isPlaying()) {
                            wavesurfer.pause();
                            this.isPlaying = false;
                        } else {
                            wavesurfer.play();
                            this.isPlaying = true;
                        }
                    },

                    formatTime(seconds) {
                        const m = Math.floor(seconds / 60);
                        const s = Math.floor(seconds % 60);
                        return `${m}:${s.toString().padStart(2, '0')}`;
                    },

                    async download() {
                        if (!decodedBuffer) return;
                        this.isProcessing = true;

                        try {
                            // 1. Slice Buffer
                            const sampleRate = decodedBuffer.sampleRate;
                            // Ensure start/end are within bounds
                            let start = Math.max(0, this.regionStart);
                            let end = Math.min(decodedBuffer.duration, this.regionEnd);

                            // If user managed to invert them
                            if (start > end)[start, end] = [end, start];

                            const lengthInSeconds = end - start;
                            const lengthInSamples = Math.floor(lengthInSeconds * sampleRate);

                            const newBuffer = audioContext.createBuffer(
                                decodedBuffer.numberOfChannels,
                                lengthInSamples,
                                sampleRate
                            );

                            // Copy channel data
                            for (let channel = 0; channel < decodedBuffer.numberOfChannels; channel++) {
                                const oldData = decodedBuffer.getChannelData(channel);
                                const newData = newBuffer.getChannelData(channel);

                                // Slice logic
                                const startSample = Math.floor(start * sampleRate);
                                for (let i = 0; i < lengthInSamples; i++) {
                                    newData[i] = oldData[startSample + i] || 0;
                                }
                            }

                            // 2. Encode to WAV
                            const wavBytes = this.bufferToWav(newBuffer);

                            // 3. Download
                            const blob = new Blob([wavBytes], {
                                type: 'audio/wav'
                            });
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.style.display = 'none';
                            a.href = url;
                            a.download = originalBlob.name ?
                                `trimmed_${originalBlob.name.replace(/\.[^/.]+$/, "")}.wav` :
                                'trimmed_audio.wav';
                            document.body.appendChild(a);
                            a.click();
                            window.URL.revokeObjectURL(url);
                            document.body.removeChild(a);

                        } catch (err) {
                            console.error(err);
                            alert("Error processing audio.");
                        } finally {
                            this.isProcessing = false;
                        }
                    },

                    // Utility to convert AudioBuffer to WAV
                    bufferToWav(abuffer) {
                        const numOfChan = abuffer.numberOfChannels;
                        const length = abuffer.length * numOfChan * 2 + 44;
                        const buffer = new ArrayBuffer(length);
                        const view = new DataView(buffer);
                        const channels = [];
                        let i;
                        let sample;
                        let offset = 44; // Start after header
                        let pos = 0;

                        // write WAVE header
                        setUint32(0x46464952); // "RIFF"
                        setUint32(length - 8); // file length - 8
                        setUint32(0x45564157); // "WAVE"

                        setUint32(0x20746d66); // "fmt " chunk
                        setUint32(16); // length = 16
                        setUint16(1); // PCM (uncompressed)
                        setUint16(numOfChan);
                        setUint32(abuffer.sampleRate);
                        setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
                        setUint16(numOfChan * 2); // block-align
                        setUint16(16); // 16-bit (hardcoded in this example)

                        setUint32(0x61746164); // "data" - chunk
                        setUint32(length - pos - 4); // chunk length

                        // write interleaved data
                        for (i = 0; i < abuffer.numberOfChannels; i++)
                            channels.push(abuffer.getChannelData(i));

                        for (let sampleIdx = 0; sampleIdx < abuffer.length; sampleIdx++) {
                            for (i = 0; i < numOfChan; i++) {
                                // interleave channels
                                sample = Math.max(-1, Math.min(1, channels[i][sampleIdx])); // clamp
                                sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) |
                                    0; // scale to 16-bit signed int
                                view.setInt16(offset, sample, true); // write 16-bit sample
                                offset += 2;
                            }
                        }

                        // helper functions
                        function setUint16(data) {
                            view.setUint16(pos, data, true);
                            pos += 2;
                        }

                        function setUint32(data) {
                            view.setUint32(pos, data, true);
                            pos += 4;
                        }

                        return buffer;
                    },

                    reset() {
                        if (wavesurfer) wavesurfer.destroy();
                        this.audioLoaded = false;
                        this.isPlaying = false;
                        audioContext = null;
                        decodedBuffer = null;
                        const input = document.querySelector('input[type=file]');
                        if (input) input.value = '';
                    }
                };
            });
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-5xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.subtitle-shifter') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Subtitle
                Time Shifter</a>
            <a href="{{ route('tools.speech.pacing') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Speech
                & Vow Pacing Calculator</a>
        </div>
    </div>
@endsection