@extends('layouts.app')

@section('title', 'Text Redactor - 100 Toolbox')
@section('meta_description',
    'Redact sensitive information from text or logs. Automatically mask emails, IPs, credit
    cards, and more. 100% client-side.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Universal Data Redactor</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Securely remove sensitive information from logs, emails, config files, and copy-pastes.
                <br>
                <span
                    class="inline-flex items-center gap-1.5 mt-2 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-400 text-xs font-medium border border-emerald-500/20">
                    <svg 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    Runs entirely in your browser. No data is sent to server.
                </span>
            </p>
        </div>

        <!-- Toggles (Moved to top) -->
        <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-4">
            <h3 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Redaction Settings</h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                <template x-for="(enabled, type) in toggles" :key="type">
                    <label class="flex items-center gap-2 cursor-pointer group">
                        <div class="relative">
                            <input type="checkbox" x-model="toggles[type]" @change="redact()" class="sr-only peer">
                            <div
                                class="w-9 h-5 bg-slate-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-500/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600">
                            </div>
                        </div>
                        <span class="text-sm text-slate-300 group-hover:text-white transition-colors capitalize"
                            x-text="type.replace(/([A-Z])/g, ' $1').trim()"></span>
                    </label>
                </template>
            </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-6">
            <!-- 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">
                    <div class="flex items-center justify-between mb-2">
                        <label for="input" class="text-sm font-medium text-slate-300">Input Data</label>
                        <button @click="inputText = ''; redact()"
                            class="text-xs text-red-400 hover:text-red-300 transition-colors">Clear</button>
                    </div>
                    <div class="relative flex-grow">
                        <textarea x-model="inputText" @input="redact()" id="input"
                            class="w-full h-[300px] md:h-[500px] 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-xs sm:text-sm p-4 resize-none"
                            placeholder="Paste logs, emails, or code here..."></textarea>
                    </div>
                </div>
            </div>

            <!-- Right Column: Output -->
            <div class="space-y-4">
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-4 flex flex-col h-full">
                    <div class="flex items-center justify-between mb-2">
                        <label for="output" class="text-sm font-medium text-emerald-400">Safe Output</label>
                        <div class="flex gap-2">
                            <button @click="downloadOutput"
                                class="text-xs flex items-center gap-1 text-slate-400 hover:text-white transition-colors px-3 py-1.5 rounded-lg border border-white/5 bg-white/5 hover:bg-white/10">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                </svg>
                                <span>Download</span>
                            </button>
                            <button @click="copyOutput"
                                class="text-xs flex items-center gap-1 transition-colors px-3 py-1.5 rounded-lg border"
                                :class="copied ? 'text-emerald-400 border-emerald-500/20 bg-emerald-500/10' :
                                    'text-indigo-400 border-transparent hover:text-indigo-300 hover:bg-white/5'">
                                <span x-text="copied ? 'Copied!' : 'Copy Safe Text'"></span>
                                <!-- Icon: Check if copied, Clipboard if not -->
                                <template x-if="!copied">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
                                </template>
                                <template x-if="copied">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" 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>
                                </template>
                            </button>
                        </div>
                    </div>
                    <div class="relative flex-grow">
                        <textarea x-model="outputText" id="output" readonly
                            class="w-full h-[300px] md:h-[500px] rounded-xl bg-slate-950/50 border-emerald-500/20 text-emerald-100/80 focus:border-emerald-500 focus:ring-emerald-500/20 placeholder:text-slate-600 font-mono text-xs sm:text-sm p-4 resize-none"></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Documentation / Examples -->
        <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-6 md:p-8">
            <h2 class="text-xl font-bold text-white mb-4">What gets redacted?</h2>
            <div class="grid md:grid-cols-2 gap-8 text-sm text-slate-400">
                <ul class="space-y-2 list-disc list-inside">
                    <li><strong class="text-slate-200">Emails:</strong> Personal and corporate email addresses.</li>
                    <li><strong class="text-slate-200">IP Addresses:</strong> IPv4 addresses (e.g. 192.168.1.1).</li>
                    <li><strong class="text-slate-200">Credit Cards:</strong> Standard 13-16 digit card numbers.</li>
                    <li><strong class="text-slate-200">Phone Numbers:</strong> Common international formats.</li>
                </ul>
                <ul class="space-y-2 list-disc list-inside">
                    <li><strong class="text-slate-200">API Keys:</strong> Google, Stripe, AWS, and generic keys.</li>
                    <li><strong class="text-slate-200">Bearer Tokens:</strong> JWT and OAuth bearer tokens.</li>
                    <li><strong class="text-slate-200">Private Keys:</strong> RSA/PGP private key blocks.</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('redactorTool', () => ({
                inputText: '',
                outputText: '',
                copied: false,
                toggles: {
                    emails: true,
                    ips: true,
                    creditCards: true,
                    phoneNumbers: true,
                    apiKeys: true,
                    bearerTokens: true,
                    macAddresses: true
                },

                init() {
                    // Example placeholder
                    this.inputText = `Error at 2023-10-27 14:30:00
User: john.doe@example.com (IP: 192.168.1.45)
Phone: +1 (555) 123-4567 | MAC: 00:1A:2B:3C:4D:5E
Failed to charge card 4242 4242 4242 4242
Stripe: sk_live_51M0abcdefghijklmnopqrstuvwxyz
AWS Secret: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Token: Bearer eyJhbGciOi...`;
                    this.redact();
                },

                redact() {
                    let text = this.inputText;

                    if (this.toggles.emails) {
                        text = text.replace(/\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g,
                            '[REDACTED-EMAIL]');
                    }

                    if (this.toggles.ips) {
                        text = text.replace(/\b(?:\d{1,3}\.){3}\d{1,3}\b/g, '[REDACTED-IP]');
                    }

                    if (this.toggles.creditCards) {
                        // Matches sections of digits that look like cards (13-19 digits, optional spaces/dashes)
                        // This is a "greedy" match to avoid matching simple 4-digit years, etc.
                        text = text.replace(/\b(?:\d[ -]*?){13,19}\b/g, (match) => {
                            // Simple check to ensure it has enough digits
                            if (match.replace(/\D/g, '').length < 13) return match;
                            return '[REDACTED-CARD]';
                        });
                    }

                    if (this.toggles.phoneNumbers) {
                        // Matches common international formats
                        // Checks for + or ( start or digit, followed by grouped digits
                        text = text.replace(/(?:\b|\+)(?:(?:\(\d{1,4}\)|\d{1,4})[\s.-]?){2,5}\d{2,}\b/g,
                            (match) => {
                                // Filter out things that look like dates or simple numbers
                                const digits = match.replace(/\D/g, '');
                                if (digits.length < 7 || digits.length > 15) return match;
                                // Verify it doesn't look like an IP or Date (simple heuristic)
                                if (match.includes('.') && !match.includes(' ')) return match;
                                // Ignore ISO dates (YYYY-MM-DD...)
                                if (/^\d{4}-\d{2}-\d{2}/.test(match)) return match;
                                return '[REDACTED-PHONE]';
                            });
                    }

                    if (this.toggles.apiKeys) {
                        // AWS Keys
                        text = text.replace(/\b(AKIA|ASIA)[0-9A-Z]{16}\b/g, '[REDACTED-AWS-KEY]');

                        // Stripe/Google/Generic "sk_live", "AIza" etc
                        text = text.replace(/\b(sk_live_[0-9a-zA-Z]{24,})/g, '[REDACTED-STRIPE-KEY]');
                        text = text.replace(/\b(AIza[0-9A-Za-z-_]{35})/g, '[REDACTED-GOOGLE-KEY]');

                        // Generic assignment: "api_key": "xyz"
                        text = text.replace(
                            /((?:api_key|apikey|secret|token|password|passwd|pwd|key)["']?\s*[:=]\s*["']?)([a-zA-Z0-9\-\._~\+\/]{20,})["']?/gi,
                            '$1[REDACTED]');
                    }

                    if (this.toggles.bearerTokens) {
                        text = text.replace(/Bearer\s+[a-zA-Z0-9\-\._~\+\/]+=*/g,
                            'Bearer [REDACTED-TOKEN]');
                    }

                    if (this.toggles.macAddresses) {
                        text = text.replace(/\b([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})\b/g,
                            '[REDACTED-MAC]');
                    }

                    this.outputText = text;
                },

                copyOutput() {
                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(this.outputText).then(() => {
                            this.copied = true;
                            setTimeout(() => this.copied = false, 2000);
                        }).catch(err => {
                            console.error('Failed to copy: ', err);
                            this.fallbackCopy();
                        });
                    } else {
                        this.fallbackCopy();
                    }
                },

                fallbackCopy() {
                    const textArea = document.createElement("textarea");
                    textArea.value = this.outputText;

                    // Avoid scrolling to bottom
                    textArea.style.top = "0";
                    textArea.style.left = "0";
                    textArea.style.position = "fixed";
                    textArea.style.opacity = "0"; // hide it

                    document.body.appendChild(textArea);
                    textArea.focus();
                    textArea.select();

                    try {
                        const successful = document.execCommand('copy');
                        if (successful) {
                            this.copied = true;
                            setTimeout(() => this.copied = false, 2000);
                        } else {
                            console.error('Fallback copy failed.');
                        }
                    } catch (err) {
                        console.error('Fallback copy error: ', err);
                    }

                    document.body.removeChild(textArea);
                },

                async downloadOutput() {
                    const blob = new Blob([this.outputText], {
                        type: 'text/plain'
                    });
                    const filename = 'redacted-output.txt';
                    const file = new File([blob], filename, {
                        type: 'text/plain'
                    });

                    if (navigator.canShare && navigator.canShare({
                            files: [file]
                        })) {
                        try {
                            await navigator.share({
                                files: [file],
                                title: 'Redacted Text'
                            });
                            return;
                        } catch (err) {
                            console.log('Share API failed or cancelled', err);
                        }
                    }

                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(url);
                    document.body.removeChild(a);
                }
            }));
        });
    </script>

    {{-- 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.pdf-redactor') }}"
                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">PDF
                Redactor</a>
            <a href="{{ route('tools.disappearing-messages') }}"
                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">Disappearing
                Messages</a>
        </div>
    </div>
@endsection