@extends('layouts.app')

@section('title', 'Subtitle Time Shifter - 100 Toolbox')
@section('meta_description',
    'Fix out-of-sync subtitles instantly. Shift .srt timestamps forward or backward by seconds.
    100% client-side, no uploads needed.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-12" x-data="subtitleShifter()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Subtitle Time Shifter</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Sync your subtitles in seconds. Drag, drop, shift.
                <span class="text-indigo-400 font-medium">Runs entirely in your browser.</span>
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="bg-slate-900/50 border border-white/10 rounded-3xl p-8 space-y-8">

            <!-- File Input -->
            <div class="space-y-4">
                <label class="block text-sm font-medium text-slate-400">1. Upload your .srt file</label>

                <div @dragover.prevent="dragover = true" @dragleave.prevent="dragover = false"
                    @drop.prevent="handleDrop($event)"
                    class="relative group cursor-pointer border-2 border-dashed rounded-2xl p-8 text-center transition-all duration-300"
                    :class="dragover ? 'border-indigo-500 bg-indigo-500/10' :
                        'border-white/10 hover:border-indigo-500/50 hover:bg-slate-800/50'">

                    <input type="file" accept=".srt"
                        class="absolute inset-0 w-full h-full opacity-0 z-10 cursor-pointer"
                        @change="handleFileSelect($event)">

                    <div class="space-y-2 pointer-events-none">
                        <div
                            class="w-12 h-12 mx-auto rounded-xl bg-slate-800 flex items-center justify-center text-slate-400 group-hover:text-indigo-400 group-hover:scale-110 transition-all duration-300">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-lg font-bold text-white" x-text="fileName || 'Drop .srt file here'"></p>
                            <p class="text-sm text-slate-400" x-show="!fileName">or click to browse</p>
                            <p class="text-sm text-slate-400" x-show="fileName" x-text="formatBytes(fileSize)"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Offset Input -->
            <div class="space-y-4" :class="{ 'opacity-50 pointer-events-none': !fileContent }">
                <label class="block text-sm font-medium text-slate-400">2. Set Time Offset (Seconds)</label>
                <div class="relative">
                    <input type="number" step="0.1" x-model="offset" placeholder="-2.5 or 1.5"
                        class="w-full bg-slate-950 border-white/10 rounded-xl px-4 py-4 text-2xl font-mono text-white placeholder-slate-700 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors">
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 text-sm text-slate-500 font-medium">SECONDS</div>
                </div>
                <p class="text-xs text-slate-500">Positive values delay subtitles. Negative values make them appear earlier.
                </p>
            </div>

            <!-- Action -->
            <button @click="processSubtitles" :disabled="!fileContent || !offset"
                class="w-full bg-indigo-500 hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 rounded-xl transition-all shadow-lg shadow-indigo-500/20 transform hover:-translate-y-0.5">
                Shift & Download
            </button>

            <!-- Success Message -->
            <div x-show="downloadUrl"
                class="bg-emerald-500/10 border border-emerald-500/20 rounded-xl p-4 flex items-center gap-3" x-cloak
                x-transition>
                <svg class="w-5 h-5 text-emerald-400" 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>
                <p class="text-emerald-300 text-sm">File processed! Download should start automatically.</p>
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('subtitleShifter', () => ({
                dragover: false,
                fileName: '',
                fileSize: 0,
                fileContent: null,
                offset: '',
                downloadUrl: null,

                handleDrop(e) {
                    this.dragover = false;
                    const file = e.dataTransfer.files[0];
                    if (file) this.readFile(file);
                },

                handleFileSelect(e) {
                    const file = e.target.files[0];
                    if (file) this.readFile(file);
                },

                readFile(file) {
                    if (!file.name.endsWith('.srt')) {
                        alert('Please upload a .srt file.');
                        return;
                    }
                    this.fileName = file.name;
                    this.fileSize = file.size;

                    const reader = new FileReader();
                    reader.onload = (e) => this.fileContent = e.target.result;
                    reader.readAsText(file);
                },

                processSubtitles() {
                    if (!this.fileContent || !this.offset) return;

                    const offsetMs = parseFloat(this.offset) * 1000;
                    const lines = this.fileContent.split(/\r\n|\n|\r/);
                    const regex = /(\d{2}):(\d{2}):(\d{2}),(\d{3}) --> (\d{2}):(\d{2}):(\d{2}),(\d{3})/;

                    const newLines = lines.map(line => {
                        const match = line.match(regex);
                        if (match) {
                            const start = this.timeToMs(match[1], match[2], match[3], match[4]);
                            const end = this.timeToMs(match[5], match[6], match[7], match[8]);

                            const newStart = Math.max(0, start + offsetMs);
                            const newEnd = Math.max(0, end + offsetMs);

                            return `${this.msToTime(newStart)} --> ${this.msToTime(newEnd)}`;
                        }
                        return line;
                    });

                    this.downloadFile(newLines.join('\r\n'));
                },

                timeToMs(h, m, s, ms) {
                    return (parseInt(h) * 3600000) +
                        (parseInt(m) * 60000) +
                        (parseInt(s) * 1000) +
                        parseInt(ms);
                },

                msToTime(ms) {
                    const h = Math.floor(ms / 3600000);
                    const m = Math.floor((ms % 3600000) / 60000);
                    const s = Math.floor((ms % 60000) / 1000);
                    const balMs = ms % 1000;

                    return `${this.pad(h)}:${this.pad(m)}:${this.pad(s)},${this.pad(balMs, 3)}`;
                },

                pad(num, size = 2) {
                    let s = "000" + num;
                    return s.substr(s.length - size);
                },

                downloadFile(content) {
                    const blob = new Blob([content], {
                        type: 'text/plain'
                    });
                    this.downloadUrl = URL.createObjectURL(blob);

                    const a = document.createElement('a');
                    a.href = this.downloadUrl;
                    a.download = `shifted_${this.fileName}`;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                },

                formatBytes(bytes, decimals = 2) {
                    if (bytes === 0) return '0 Bytes';
                    const k = 1024;
                    const dm = decimals < 0 ? 0 : decimals;
                    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
                    const i = Math.floor(Math.log(bytes) / Math.log(k));
                    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
                }
            }));
        });
    </script>
    <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">
                    It's annoying when subtitles appear 2 seconds too early or too late. This usually happens when the
                    subtitle file release doesn't match your video file.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    Instead of searching for a new subtitle file, you can use this tool to <strong>shift all
                        timestamps</strong> in your .srt file by a specific number of seconds instantly.
                </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>Movie Watchers</strong> fixing sync issues.</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>Translators</strong> adjusting timings.</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>Video Editors</strong> needing quick fixes.</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="mt-12 pt-8 border-t border-white/5">
            <div class="flex items-center gap-4 text-sm text-indigo-300 bg-indigo-500/10 p-4 rounded-xl">
                <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                    </path>
                </svg>
                <p>
                    <strong>Privacy Guarantee:</strong> We do not upload your subtitle files. All processing is done locally
                    in your browser using JavaScript.
                </p>
            </div>
        </div>
    </div>

    {{-- Related Tools --}}
    <div class="max-w-4xl 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.trim-audio') }}"
                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">Trim
                Audio</a>
        </div>
    </div>
@endsection