@extends('layouts.app')

@section('title', 'Social Media Thread Splitter - 100 Toolbox')
@section('meta_description',
    'Split long text into threaded posts for Twitter/X, Bluesky, or Threads. Automatically
    numbers posts and preserves formatting.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Social Media Thread Splitter</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Write long posts and automatically split them into perfectly sized threads for X, Bluesky, or Threads.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-8">
            <!-- Left Column: Input -->
            <div class="space-y-4">
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-4 flex flex-col h-[600px]">
                    <div class="flex items-center justify-between mb-4">
                        <label for="input" class="text-sm font-medium text-slate-300">Draft Your Post</label>

                        <!-- Platform Selector -->
                        <div class="flex bg-slate-950 rounded-lg p-1 border border-white/10">
                            <template x-for="p in platforms" :key="p.id">
                                <button @click="platform = p.id; splitText()"
                                    class="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
                                    :class="platform === p.id ? 'bg-indigo-500 text-white shadow-lg' :
                                        'text-slate-400 hover:text-slate-200'">
                                    <span x-text="p.name"></span>
                                    <span class="text-[10px] opacity-60 ml-1" x-text="`(${p.limit})`"></span>
                                </button>
                            </template>
                        </div>
                    </div>

                    <textarea x-model="inputText" @input="splitText()" id="input"
                        class="w-full flex-grow rounded-xl bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 focus:ring-indigo-500/20 placeholder:text-slate-600 font-mono text-sm p-4 resize-none"
                        placeholder="Paste your long text here..."></textarea>

                    <div class="flex justify-between items-center mt-3 text-xs text-slate-500">
                        <span x-text="`${inputText.length} chars`"></span>
                        <span x-text="`${wordCount} words`"></span>
                    </div>
                </div>
            </div>

            <!-- Right Column: Thread Preview -->
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <h3 class="text-sm font-medium text-indigo-400">Thread Preview (<span x-text="threads.length"></span>
                        tweets)</h3>
                    <button @click="copyAll()" class="text-xs text-slate-400 hover:text-white transition-colors"
                        x-show="threads.length > 0">
                        <span x-text="allCopied ? 'Copied All!' : 'Copy All'"></span>
                    </button>
                </div>

                <div class="space-y-4 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar">
                    <template x-for="(thread, index) in threads" :key="index">
                        <div
                            class="bg-slate-900/50 rounded-2xl border border-white/5 p-6 relative group hover:border-indigo-500/30 transition-colors">
                            <!-- Connector Line -->
                            <div class="absolute left-6 top-full h-4 w-0.5 bg-white/10 -ml-[1px]"
                                x-show="index !== threads.length - 1"></div>

                            <!-- Header: Avatar & Number -->
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full flex items-center justify-center border border-white/5"
                                        :class="{
                                            'bg-slate-950 text-white': platform === 'twitter',
                                            'bg-sky-500 text-white': platform === 'bluesky',
                                            'bg-slate-800 text-white': platform === 'threads',
                                            'bg-indigo-600 text-white': platform === 'mastodon',
                                        }">
                                        <!-- X / Twitter -->
                                        <svg x-show="platform === 'twitter'" class="w-5 h-5" fill="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path
                                                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z">
                                            </path>
                                        </svg>

                                        <!-- Bluesky -->
                                        <svg x-show="platform === 'bluesky'" class="w-6 h-6" fill="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path
                                                d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566 .944 1.561 1.266.902 1.565.613 1.697.034 2.2.043 3.42c.007.828.324 2.94 1.252 5.093 1.832 4.252 5.955 4.966 5.955 4.966s-4.045-.291-5.694 1.565c-2.316 2.606-.826 6.386-.184 7.633.279.544 1.205 2.112 4.093 1.107 3.318-1.155 5.502-5.717 6.326-7.859.088-.23.165-.458.229-.684.064.226.141.454.229.684.825 2.142 3.008 6.704 6.326 7.859 2.888 1.005 3.814-.563 4.093-1.107.643-1.247 2.132-5.027-.184-7.633-1.649-1.856-5.694-1.565-5.694-1.565s4.123-.714 5.955-4.966c.928-2.153 1.245-4.265 1.252-5.093.009-1.22-.57-1.723-.859-1.855-.659-.299-1.664-.621-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z">
                                            </path>
                                        </svg>

                                        <!-- Threads -->
                                        <svg x-show="platform === 'threads'" class="w-6 h-6" fill="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path
                                                d="M17.773 14.307c-.426-1.531-1.694-2.583-3.078-2.583-1.464 0-2.617 1.153-2.617 2.593 0 1.439 1.153 2.593 2.617 2.593 3.083 0 3.737-4.211 1.487-7.235-1.112-1.494-2.731-2.079-4.18-2.079-3.778 0-6.191 3.253-6.191 7.027 0 3.844 2.545 6.945 6.398 6.945 3.031 0 4.802-1.697 5.293-2.768h2.47c-.571 2.378-3.539 4.768-7.763 4.768-5.32 0-8.898-3.951-8.898-8.945S8.349 5.68 13.998 5.68c4.329 0 7.427 3.094 7.427 7.423 0 3.083-1.164 5.92-3.652 5.92-1.543 0-2.328-1.169-2.328-3.116h.001c1.551 0 2.327-1.168 2.327-1.6z">
                                            </path>
                                        </svg>

                                        <!-- Mastodon -->
                                        <svg x-show="platform === 'mastodon'" class="w-5 h-5" fill="currentColor"
                                            viewBox="0 0 24 24" aria-hidden="true">
                                            <path
                                                d="M21.327 10.066c-1.155-4.756-3.805-5.637-3.805-5.637-2.704-.712-10.34-.698-11.044 0C6.478 4.43 3.828 5.31 2.673 10.066c-.63 2.602-.731 5.467-.184 8.78.694 4.205 4.67 4.75 4.67 4.75 2.142.235 4.145-.197 5.92-.958l-.208-1.503c-1.766.75-3.693.811-5.31.25-2.046-.71-2.222-4.9-2.222-4.9s1.42.368 3.525.59c3.842.404 8.019.244 9.475-.726 1.352-.902 1.482-3.882 1.482-3.882.029-1.185.044-1.84.004-2.351zm-4.368 6.273h-2.522v-6.9h-2.872v6.9h-2.523v-8.83h4.009l1.408 3.497 1.408-3.497h4.009v8.83z">
                                            </path>
                                        </svg>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="text-sm font-bold text-slate-200">Your Name</span>
                                        <span class="text-xs text-slate-500">@username</span>
                                    </div>
                                </div>
                                <span
                                    class="text-xs font-mono text-indigo-400 px-2 py-1 rounded bg-indigo-500/10 border border-indigo-500/20"
                                    x-text="`${index + 1}/${threads.length}`"></span>
                            </div>

                            <!-- Content -->
                            <p class="text-slate-300 text-sm whitespace-pre-wrap leading-relaxed" x-text="thread.text"></p>

                            <!-- Actions -->
                            <div class="mt-4 pt-4 border-t border-white/5 flex items-center justify-between">
                                <div class="flex items-center gap-1 text-xs text-slate-500"
                                    :class="thread.text.length > getLimit() ? 'text-red-400' : ''">
                                    <span x-text="thread.text.length"></span>
                                    <span>/</span>
                                    <span x-text="getLimit()"></span>
                                </div>

                                <button @click="copyThread(thread.text, index)"
                                    class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors"
                                    :class="copiedIndex === index ?
                                        'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' :
                                        'bg-white/5 text-slate-400 hover:text-white hover:bg-white/10 border border-white/5'">
                                    <span x-text="copiedIndex === index ? 'Copied' : 'Copy'"></span>
                                    <svg x-show="copiedIndex !== index" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                                    </svg>
                                    <svg x-show="copiedIndex === index" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3"
                                        fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </template>

                    <div x-show="threads.length === 0" class="text-center py-20 opacity-50">
                        <p class="text-slate-500">Start typing to see your thread preview...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('threadSplitterTool', () => ({
                inputText: '',
                platform: 'twitter',
                platforms: [{
                        id: 'twitter',
                        name: 'X',
                        limit: 280
                    },
                    {
                        id: 'bluesky',
                        name: 'Bluesky',
                        limit: 300
                    },
                    {
                        id: 'threads',
                        name: 'Threads',
                        limit: 500
                    },
                    {
                        id: 'mastodon',
                        name: 'Mastodon',
                        limit: 500
                    },
                ],
                threads: [],
                copiedIndex: null,
                allCopied: false,

                get wordCount() {
                    return this.inputText.trim() === '' ? 0 : this.inputText.trim().split(/\s+/)
                        .length;
                },

                getLimit() {
                    return this.platforms.find(p => p.id === this.platform).limit;
                },

                splitText() {
                    if (!this.inputText) {
                        this.threads = [];
                        return;
                    }

                    const limit = this.getLimit();
                    // Reserve space for numbering like " (12/12)" -> approx 8 chars safely
                    // We'll calculate exact needs dynamically ideally, but a safe buffer is good.
                    // Let's assume max 99 tweets -> " (99/99)" is 8 chars.
                    const buffer = 9;
                    const effectiveLimit = limit - buffer;

                    const paragraphs = this.inputText.split(
                        /\n\s*\n/); // Split by double newlines to keep paragraphs
                    let chunks = [];

                    // Simple word-based splitting for now
                    // A better approach: tokenize by sentences, then words

                    let currentChunk = "";

                    // Helper to push chunk
                    const pushChunk = () => {
                        if (currentChunk.trim()) chunks.push(currentChunk.trim());
                        currentChunk = "";
                    };

                    // We will preserve paragraph breaks as single newlines in tweets
                    // or just process the whole text to flow? 
                    // Usually users want to keep paragraph structure.
                    // Let's normalize spaces but keep newlines

                    // Tokenize words but keep newlines
                    // Regex split: keep delimiters
                    const words = this.inputText.split(/([\s\n]+)/);

                    for (let word of words) {
                        if (currentChunk.length + word.length <= effectiveLimit) {
                            currentChunk += word;
                        } else {
                            // If the word itself is huge (URL?), force break
                            if (word.length > effectiveLimit) {
                                pushChunk();
                                // if word is bigger than limit, we have to split it hard
                                // simplistic fallback: just let it likely overflow or handle separately
                                // For now, just start new chunk
                                currentChunk = word;
                            } else {
                                pushChunk();
                                // If the word is just a space/newline, skip it for the start of new chunk?
                                // No, usually we want to trim start of new chunk
                                if (!/^\s+$/.test(word)) {
                                    currentChunk = word;
                                }
                            }
                        }
                    }
                    pushChunk();

                    // Now add numbering
                    const total = chunks.length;
                    this.threads = chunks.map((text, i) => ({
                        text: `${text} (${i+1}/${total})`
                    }));
                },

                copyThread(text, index) {
                    this.copyToClipboard(text);
                    this.copiedIndex = index;
                    setTimeout(() => this.copiedIndex = null, 2000);
                },

                copyAll() {
                    const allText = this.threads.map(t => t.text).join('\n\n');
                    this.copyToClipboard(allText);
                    this.allCopied = true;
                    setTimeout(() => this.allCopied = false, 2000);
                },

                copyToClipboard(text) {
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(text);
                    } else {
                        const textArea = document.createElement("textarea");
                        textArea.value = text;
                        textArea.style.position = "fixed";
                        textArea.style.left = "-9999px";
                        document.body.appendChild(textArea);
                        textArea.focus();
                        textArea.select();
                        document.execCommand('copy');
                        document.body.removeChild(textArea);
                    }
                }
            }));
        });
    </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-blue-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">
                    Posting long threads on X or Bluesky is a pain. You have to copy-paste, check character limits, and
                    number them manually.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    This tool takes your long essay and <strong>automatically splits it</strong> into perfectly sized
                    tweets. It even adds numbering (1/5) so your followers can read it in order.
                </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-blue-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>Content Creators</strong> growing their audience.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-blue-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>Founders</strong> building in public.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-blue-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>Writers</strong> repurposing blog posts.</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-blue-300 bg-blue-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 don't save your drafts. All splitting and formatting happens
                    instantly in your browser.
                </p>
            </div>
        </div>
    </div>

    {{-- Related Tools --}}
    <div class="max-w-6xl 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.email.index') }}"
                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">Email
                Subject Line Tester</a>
            <a href="{{ route('tools.redactor.index') }}"
                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">Text
                Redactor</a>
        </div>
    </div>
@endsection