@extends('layouts.app')

@section('title', 'Disappearing Messages')
@section('meta_description',
    'Share passwords and sensitive notes securely. Encrypted locally in your browser with a
    one-time, self-destructing link. Zero-knowledge privacy.')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="max-w-4xl mx-auto space-y-8" x-data="secretSharer()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Disappearing Messages</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Share sensitive information securely. Encrypted in your browser, for your eyes only.
            </p>
        </div>

        <!-- Main Tool Area -->
        <div class="grid lg:grid-cols-1 gap-8">

            <!-- Decrypt Mode (Activating when URL has data) -->
            <div x-show="mode === 'decrypt'" class="space-y-6" x-cloak>
                <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-8 text-center space-y-6">

                    <div x-show="decryptionStatus === 'decrypting'"
                        class="flex flex-col items-center justify-center space-y-4 py-12">
                        <svg class="animate-spin h-10 w-10 text-indigo-500" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                            </path>
                        </svg>
                        <p class="text-slate-400">Decrypting message...</p>
                    </div>

                    <div x-show="decryptionStatus === 'success'" class="space-y-6">
                        <div class="flex items-center justify-center">
                            <div
                                class="w-16 h-16 bg-emerald-500/20 text-emerald-400 rounded-2xl flex items-center justify-center text-3xl">
                                <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="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z">
                                    </path>
                                </svg>
                            </div>
                        </div>

                        <div class="text-left space-y-2">
                            <label class="text-xs text-slate-500 uppercase tracking-wider font-bold block">Decrypted
                                Message</label>
                            <div class="bg-slate-800/50 p-6 rounded-xl border border-white/10 relative group">
                                <pre class="font-mono text-slate-200 whitespace-pre-wrap break-words" x-text="decryptedText"></pre>
                                <button @click="copyText(decryptedText)"
                                    class="absolute top-4 right-4 p-2 bg-slate-700/50 hover:bg-slate-600 text-slate-400 hover:text-white rounded-lg transition-colors opacity-0 group-hover:opacity-100">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <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">
                                        </path>
                                    </svg>
                                </button>
                            </div>
                        </div>

                        <div class="pt-4">
                            <a href="{{ route('tools.disappearing-messages') }}"
                                class="inline-flex items-center text-indigo-400 hover:text-indigo-300 transition-colors">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 4v16m8-8H4"></path>
                                </svg>
                                Create Your Own Secret Link
                            </a>
                        </div>
                    </div>

                    <div x-show="decryptionStatus === 'error'" class="space-y-4 py-8">
                        <div class="flex items-center justify-center">
                            <div
                                class="w-16 h-16 bg-red-500/20 text-red-400 rounded-2xl flex items-center justify-center text-3xl">
                                <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                        <h3 class="text-xl font-bold text-white">Decryption Failed</h3>
                        <p class="text-slate-400 max-w-md mx-auto">
                            The link may be broken, incomplete, or the message has been corrupted. More likely, the message
                            has already been viewed once and is now permanently destroyed, or it has expired after 24 hours.
                            Ensure you copied the entire URL including the part after the #.
                        </p>
                        <div class="pt-4">
                            <a href="{{ route('tools.disappearing-messages') }}"
                                class="text-indigo-400 hover:text-indigo-300">Start
                                Over</a>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Create Mode -->
            <div x-show="mode === 'create'" class="space-y-6">
                <!-- Input Area -->
                <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-4 transition-all duration-300"
                    :class="{ 'opacity-50 pointer-events-none': generatedLink }">
                    <div class="flex justify-between items-center mb-2 px-2">
                        <label class="text-xs text-slate-500 uppercase tracking-wider font-bold">Secret Message</label>
                    </div>
                    <textarea x-model="text"
                        class="w-full h-[200px] bg-transparent border-0 text-slate-200 focus:ring-0 p-4 resize-none font-sans text-lg leading-relaxed placeholder-slate-600"
                        placeholder="Type your sensitive info here..."></textarea>

                    <!-- Honeypot -->
                    <div style="display:none;">
                        <input type="text" x-model="website" name="website" tabindex="-1" autocomplete="off">
                    </div>
                </div>

                <!-- Action Button -->
                <button @click="encryptAndShare" :disabled="!text.trim() || generatedLink" x-show="!generatedLink"
                    class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-4 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" 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>
                    <span>Encrypt & Generate Link</span>
                </button>

                <!-- Result Area -->
                <div x-show="generatedLink" class="bg-slate-800 border border-indigo-500/30 rounded-2xl p-6 space-y-4"
                    x-transition.opacity>
                    <div class="flex items-start gap-4">
                        <div class="bg-emerald-500/20 text-emerald-400 p-3 rounded-xl">
                            <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="M5 13l4 4L19 7">
                                </path>
                            </svg>
                        </div>
                        <div class="space-y-1 flex-1">
                            <h3 class="font-bold text-white text-lg">Secure Link Created</h3>
                            <p class="text-slate-400 text-sm">
                                This link contains the encrypted message. The key is in the hash (#) and is never sent to
                                our server.
                            </p>
                        </div>
                    </div>

                    <div class="bg-amber-500/10 border border-amber-500/20 p-4 rounded-xl flex gap-3 text-amber-200">
                        <svg class="w-5 h-5 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
                            </path>
                        </svg>
                        <p class="text-sm">
                            <strong>Warning:</strong> If you open this link yourself to test it, the message will be
                            permanently destroyed. Your recipient will <strong>not</strong> be able to see it, and you will
                            need to create a new one.
                        </p>
                    </div>

                    <div class="bg-black/30 rounded-xl p-4 flex items-center gap-3 border border-white/5">
                        <input type="text" readonly :value="generatedLink"
                            class="bg-transparent border-none text-slate-300 w-full focus:ring-0 text-sm font-mono truncate">
                        <button @click="copyText(generatedLink)"
                            class="text-indigo-400 hover:text-indigo-300 whitespace-nowrap text-sm font-bold px-3 py-1.5 bg-indigo-500/10 rounded-lg hover:bg-indigo-500/20 transition-colors">
                            Copy Link
                        </button>
                    </div>

                    <div class="flex gap-3">
                        <button @click="reset"
                            class="flex-1 bg-slate-700 hover:bg-slate-600 text-white py-3 rounded-lg transition-colors text-sm font-medium">Create
                            New Secret</button>
                    </div>
                </div>

                <div class="text-center">
                    <p class="text-xs text-slate-500 max-w-lg mx-auto leading-relaxed">
                        <strong>How it works:</strong> We generate a random key in your browser. The message is encrypted
                        locally (AES-GCM) and the encrypted payload is stored securely for up to 24 hours. The URL is built
                        with the ID in the query and the key in the hash
                        fragment. Because browsers don't send the hash fragment to the server, we physically cannot decrypt
                        your message. Once viewed, the payload is permanently destroyed.
                    </p>
                </div>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('secretSharer', () => ({
                mode: 'create', // 'create' or 'decrypt'
                text: '',
                website: '', // honeypot
                generatedLink: null,
                decryptedText: '',
                decryptionStatus: 'idle', // 'idle', 'decrypting', 'success', 'error'

                init() {
                    const urlParams = new URLSearchParams(window.location.search);
                    const hash = window.location.hash.substring(1); // Remove #

                    // Fallback for old ?data links so they don't crash, or handle new ?id links
                    if (urlParams.has('id')) {
                        this.mode = 'decrypt';
                        this.decryptionStatus = 'decrypting';
                        // Small delay for UI smoothness
                        setTimeout(() => this.attemptDecryption(urlParams.get('id'), hash), 500);
                    } else if (urlParams.has('data')) {
                        this.mode = 'decrypt';
                        this.decryptionStatus = 'decrypting';
                        setTimeout(() => this.attemptLegacyDecryption(urlParams.get('data'), hash),
                            500);
                    }
                },

                async encryptAndShare() {
                    try {
                        // 1. Generate Key
                        const key = await window.crypto.subtle.generateKey({
                                name: "AES-GCM",
                                length: 256
                            },
                            true,
                            ["encrypt", "decrypt"]
                        );

                        // 2. Encode Text
                        const encoder = new TextEncoder();
                        const encodedText = encoder.encode(this.text);

                        // 3. Encrypt
                        // IV must be 12 bytes for AES-GCM
                        const iv = window.crypto.getRandomValues(new Uint8Array(12));
                        const encryptedData = await window.crypto.subtle.encrypt({
                                name: "AES-GCM",
                                iv: iv
                            },
                            key,
                            encodedText
                        );

                        // 4. Export Key (JWK)
                        const exportedKey = await window.crypto.subtle.exportKey("jwk", key);

                        // 5. Serialize Data (IV + Ciphertext)
                        const encryptedArray = new Uint8Array(encryptedData);
                        const combinedData = new Uint8Array(iv.length + encryptedArray.length);
                        combinedData.set(iv);
                        combinedData.set(encryptedArray, iv.length);

                        // 6. Base64 Encode (URL Safe)
                        const dataBase64 = this.arrayBufferToBase64(combinedData);
                        const keyBase64 = btoa(JSON.stringify(exportedKey));

                        // 7. Store securely via API
                        const response = await fetch(
                            '{{ route('tools.disappearing-messages.store') }}', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': document.querySelector(
                                        'meta[name="csrf-token"]').getAttribute('content')
                                },
                                body: JSON.stringify({
                                    payload: dataBase64,
                                    website: this.website // honeypot
                                })
                            });

                        if (!response.ok) {
                            throw new Error(
                                'Failed to securely store the encrypted payload on the server.');
                        }

                        const result = await response.json();

                        // 8. Construct URL
                        // ID goes in query, Key goes in Hash
                        const baseUrl = window.location.origin + window.location.pathname;
                        this.generatedLink =
                            `${baseUrl}?id=${result.id}#key=${encodeURIComponent(keyBase64)}`;

                    } catch (e) {
                        console.error("Encryption Error:", e);
                        alert("Failed to create secure link. " + e.message);
                    }
                },

                async attemptDecryption(id, hashString) {
                    try {
                        // Fetch the encrypted payload from the server
                        // This action inherently destroys the payload on the server
                        const response = await fetch(`/tools/disappearing-messages/get/${id}`);

                        if (!response.ok) {
                            throw new Error(
                                "Secret not found. It may have already been viewed or has expired after 24 hours."
                            );
                        }

                        const result = await response.json();
                        const dataString = result.payload;

                        // Parse Hash for Key
                        const hashParams = new URLSearchParams(hashString);
                        if (!hashParams.has('key')) throw new Error(
                            "Missing Key in Hash. The link is invalid.");

                        const keyJsonString = atob(decodeURIComponent(hashParams.get('key')));
                        const keyJwk = JSON.parse(keyJsonString);

                        // Import Key
                        const key = await window.crypto.subtle.importKey(
                            "jwk",
                            keyJwk, {
                                name: "AES-GCM"
                            },
                            true,
                            ["decrypt"]
                        );

                        // Parse Data (Base64 -> ArrayBuffer)
                        const combinedData = this.base64ToArrayBuffer(dataString);

                        // Extract IV and Ciphertext
                        // IV is first 12 bytes
                        const iv = combinedData.slice(0, 12);
                        const ciphertext = combinedData.slice(12);

                        // Decrypt
                        const decryptedData = await window.crypto.subtle.decrypt({
                                name: "AES-GCM",
                                iv: iv
                            },
                            key,
                            ciphertext
                        );

                        // Decode Text
                        const decoder = new TextDecoder();
                        this.decryptedText = decoder.decode(decryptedData);
                        this.decryptionStatus = 'success';

                    } catch (e) {
                        console.error("Decryption Error:", e);
                        this.decryptionStatus = 'error';
                    }
                },

                async attemptLegacyDecryption(dataString, hashString) {
                    try {
                        // Support for existing URLs generated before backend update (stateless mode)
                        const hashParams = new URLSearchParams(hashString);
                        if (!hashParams.has('key')) throw new Error("Missing Key in Hash");

                        const keyJsonString = atob(decodeURIComponent(hashParams.get('key')));
                        const keyJwk = JSON.parse(keyJsonString);

                        // Import Key
                        const key = await window.crypto.subtle.importKey(
                            "jwk",
                            keyJwk, {
                                name: "AES-GCM"
                            },
                            true,
                            ["decrypt"]
                        );

                        // Parse Data (Base64 -> ArrayBuffer)
                        const combinedData = this.base64ToArrayBuffer(decodeURIComponent(
                            dataString));

                        // Extract IV and Ciphertext
                        // IV is first 12 bytes
                        const iv = combinedData.slice(0, 12);
                        const ciphertext = combinedData.slice(12);

                        // Decrypt
                        const decryptedData = await window.crypto.subtle.decrypt({
                                name: "AES-GCM",
                                iv: iv
                            },
                            key,
                            ciphertext
                        );

                        // Decode Text
                        const decoder = new TextDecoder();
                        this.decryptedText = decoder.decode(decryptedData);
                        this.decryptionStatus = 'success';

                    } catch (e) {
                        console.error("Decryption Error:", e);
                        this.decryptionStatus = 'error';
                    }
                },

                // Helper: ArrayBuffer <-> Base64
                // Handled manually to ensure browser compatibility
                arrayBufferToBase64(buffer) {
                    let binary = '';
                    const bytes = new Uint8Array(buffer);
                    for (let i = 0; i < bytes.byteLength; i++) {
                        binary += String.fromCharCode(bytes[i]);
                    }
                    // URL-safe replacement not strictly necessary if using encodeURIComponent but good practice
                    return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/,
                        '');
                },

                base64ToArrayBuffer(base64) {
                    // Restore URL-safe chars
                    base64 = base64.replace(/-/g, '+').replace(/_/g, '/');
                    while (base64.length % 4) {
                        base64 += '=';
                    }

                    const binary_string = window.atob(base64);
                    const len = binary_string.length;
                    const bytes = new Uint8Array(len);
                    for (let i = 0; i < len; i++) {
                        bytes[i] = binary_string.charCodeAt(i);
                    }
                    return bytes.buffer;
                },

                copyText(text) {
                    navigator.clipboard.writeText(text);
                    // Could add toast here
                },

                reset() {
                    this.text = '';
                    this.generatedLink = null;
                }
            }));
        });
    </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-emerald-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">
                    Sending passwords or API keys via email or Slack is insecure. These messages linger in logs and chat
                    history forever.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    This tool lets you create an encrypted link that truly self-destructs. Once the recipient views it, the
                    encrypted payload is irreversibly deleted from our servers. If unviewed, it expires automatically after
                    24 hours. Even if the link is intercepted later, it's totally useless.
                </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-emerald-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>Developers</strong> sharing API keys or env vars.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-emerald-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>IT Support</strong> resetting user passwords securely.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-emerald-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>Agencies</strong> sharing credentials with clients.</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-emerald-300 bg-emerald-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>Zero-Knowledge Encryption:</strong> Encryption happens in your browser using the <a
                        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API" target="_blank"
                        class="underline hover:text-white">Web Crypto API</a>. The server never sees the unencrypted
                    secret, and the decryption key is contained ONLY in the link hash (which is never sent to the server).
                </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.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>
            <a href="{{ route('tools.pdf-protect') }}"
                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">Password
                Protect PDF</a>
        </div>
    </div>
@endsection