@extends('layouts.app')

@section('title', 'Cron Job Translator & Extractor - 100Toolbox')
@section('meta_description',
    'Free client-side tool that translates Cron expressions into plain English and calculates
    the next run times. Also converts simple English back to Cron.')

    @push('scripts')
        <script src="https://unpkg.com/cronstrue@latest/dist/cronstrue.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/croner@8/dist/croner.umd.min.js"></script>
    @endpush

@section('content')
    <div class="max-w-4xl mx-auto space-y-8" x-data="cronTranslator()">
        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">
                Cron Translator</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Translate cron expressions to human-readable text, or write English and get the cron equivalent. See the
                next 5 run times instantly.
            </p>
        </div>

        <!-- Main Card -->
        <div class="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8 backdrop-blur-sm space-y-8">

            <!-- Input Section -->
            <div class="space-y-4">
                <label for="cronInput" class="block text-sm font-medium text-slate-300">
                    Enter Cron Expression or English phrase
                </label>
                <div class="relative">
                    <input type="text" id="cronInput" x-model="input" @input="processInput"
                        placeholder="e.g., */5 * * * * or Every 5 minutes"
                        class="block w-full text-lg font-mono bg-slate-900 border border-slate-700 rounded-xl py-4 px-5 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition">
                    <div class="absolute right-4 top-1/2 -translate-y-1/2 flex gap-2">
                        <button @click="clearInput" x-show="input.length > 0" title="Clear"
                            class="text-slate-500 hover:text-slate-300 transition-colors p-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="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="flex flex-wrap gap-2 pt-2">
                    <span class="text-xs text-slate-500 py-1">Quick examples:</span>
                    <template x-for="example in examples" :key="example.label">
                        <button @click="setInput(example.value)"
                            class="px-3 py-1 text-xs rounded-full bg-slate-800 text-slate-300 hover:bg-slate-700 hover:text-white transition-colors border border-slate-700"
                            x-text="example.label">
                        </button>
                    </template>
                </div>
            </div>

            <!-- Error State -->
            <div x-show="error" style="display: none;"
                class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3 text-red-400">
                <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span x-text="error" class="text-sm font-medium"></span>
            </div>

            <!-- Results Grid -->
            <div x-show="!error && input.length > 0" style="display: none;" class="grid md:grid-cols-2 gap-6">

                <!-- Translation Panel -->
                <div class="space-y-4">
                    <div class="p-6 bg-slate-900/50 border border-slate-800 rounded-xl h-full space-y-4">
                        <h3 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Translation</h3>

                        <div class="space-y-4">
                            <div>
                                <div class="text-xs text-slate-500 mb-1">Human Readable</div>
                                <div class="text-lg font-medium text-white" x-text="description"></div>
                            </div>

                            <div>
                                <div class="text-xs text-slate-500 mb-1">Cron Expression</div>
                                <div class="flex items-center gap-2">
                                    <code
                                        class="text-lg font-mono text-cyan-400 bg-cyan-400/10 px-3 py-1 rounded inline-block"
                                        x-text="cronExpression"></code>
                                    <button @click="copyToClipboard(cronExpression)"
                                        class="p-2 text-slate-500 hover:text-cyan-400 hover:bg-cyan-400/10 rounded transition-colors"
                                        title="Copy Cron">
                                        <svg x-show="!copied" 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="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>
                                        <svg x-show="copied" style="display:none;" 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>
                                    </button>
                                    <span x-show="copied" x-transition.opacity style="display:none;"
                                        class="text-xs font-medium text-emerald-400 ml-2 bg-emerald-400/10 px-2 py-1 rounded">Copied!</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Next Runs Panel -->
                <div class="space-y-4">
                    <div class="p-6 bg-slate-900/50 border border-slate-800 rounded-xl h-full">
                        <h3
                            class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-4 flex items-center justify-between">
                            Next 5 Runs
                            <span
                                class="text-xs font-normal normal-case bg-slate-800 px-2 py-0.5 rounded text-slate-400">Local
                                Time</span>
                        </h3>

                        <ul class="space-y-3">
                            <template x-for="(date, index) in nextRuns" :key="index">
                                <li class="flex items-center gap-3 text-slate-300">
                                    <span
                                        class="w-6 h-6 rounded-full bg-slate-800 flex items-center justify-center text-xs text-slate-500 font-mono"
                                        x-text="index + 1"></span>
                                    <span x-text="formatDate(date)" class="font-medium"></span>
                                </li>
                            </template>
                            <li x-show="nextRuns.length === 0" class="text-sm text-slate-500 italic">Calculating...</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- empty state -->
            <div x-show="input.length === 0"
                class="py-12 text-center text-slate-500 border border-dashed border-slate-800 rounded-xl">
                <div class="w-16 h-16 mx-auto mb-4 bg-slate-800 rounded-full flex items-center justify-center">
                    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <p>Start typing above to see translations</p>
            </div>

        </div>

        <!-- Info Section -->
        <div class="p-6 md:p-8 rounded-2xl bg-slate-900/50 border border-white/5 space-y-6">
            <h2 class="text-xl font-semibold text-white">How Cron Works</h2>
            <p class="text-slate-400 leading-relaxed text-sm">
                Cron is a time-based job scheduler. A cron expression consists of five fields separated by white space that
                represent the time to execute a command.
            </p>

            <div class="grid grid-cols-5 gap-2 md:gap-4 text-center">
                <div class="p-3 bg-white/5 rounded-lg border border-white/10">
                    <div class="font-mono text-xl text-cyan-400 font-bold mb-1">*</div>
                    <div class="text-xs text-slate-500 font-medium">Minute<br>(0-59)</div>
                </div>
                <div class="p-3 bg-white/5 rounded-lg border border-white/10">
                    <div class="font-mono text-xl text-blue-400 font-bold mb-1">*</div>
                    <div class="text-xs text-slate-500 font-medium">Hour<br>(0-23)</div>
                </div>
                <div class="p-3 bg-white/5 rounded-lg border border-white/10">
                    <div class="font-mono text-xl text-indigo-400 font-bold mb-1">*</div>
                    <div class="text-xs text-slate-500 font-medium">Day<br>(1-31)</div>
                </div>
                <div class="p-3 bg-white/5 rounded-lg border border-white/10">
                    <div class="font-mono text-xl text-purple-400 font-bold mb-1">*</div>
                    <div class="text-xs text-slate-500 font-medium">Month<br>(1-12)</div>
                </div>
                <div class="p-3 bg-white/5 rounded-lg border border-white/10">
                    <div class="font-mono text-xl text-pink-400 font-bold mb-1">*</div>
                    <div class="text-xs text-slate-500 font-medium">Weekday<br>(0-6)</div>
                </div>
            </div>

            <div class="text-sm text-slate-400 mt-4 space-y-2">
                <p><strong class="text-slate-300">Operators:</strong></p>
                <ul class="list-disc pl-5 space-y-1">
                    <li><code>*</code> any value</li>
                    <li><code>,</code> value list separator</li>
                    <li><code>-</code> range of values</li>
                    <li><code>/</code> step values (e.g., <code>*/5</code> means every 5)</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        function cronTranslator() {
            return {
                input: '',
                cronExpression: '* * * * *',
                description: '',
                error: null,
                nextRuns: [],
                copied: false,
                examples: [{
                        label: 'Every minute',
                        value: '* * * * *'
                    },
                    {
                        label: 'Every 5 mins',
                        value: '*/5 * * * *'
                    },
                    {
                        label: 'English: Every hour',
                        value: 'every hour'
                    },
                    {
                        label: 'English: Every 4 hours',
                        value: 'every 4 hours'
                    },
                    {
                        label: 'English: Every day at 9am',
                        value: 'every day at 9am'
                    },
                    {
                        label: 'English: Every day at 8:30pm',
                        value: 'every day at 8:30pm'
                    }
                ],

                init() {
                    // Initialize parser if it exists globally
                    if (this.input) {
                        this.processInput();
                    }
                },

                setInput(val) {
                    this.input = val;
                    this.processInput();
                },

                clearInput() {
                    this.input = '';
                    this.error = null;
                    this.nextRuns = [];
                },

                async copyToClipboard(text) {
                    try {
                        if (navigator.clipboard) {
                            await navigator.clipboard.writeText(text);
                        } else {
                            // Fallback for non-https local dev domains
                            let textArea = document.createElement("textarea");
                            textArea.value = text;
                            document.body.appendChild(textArea);
                            textArea.select();
                            document.execCommand("copy");
                            document.body.removeChild(textArea);
                        }
                        this.copied = true;
                        setTimeout(() => this.copied = false, 2000);
                    } catch (err) {
                        console.error('Failed to copy', err);
                    }
                },

                processInput() {
                    if (!this.input.trim()) {
                        this.error = null;
                        return;
                    }

                    // Simple check if it's already a cron string (starts with digit, *, or '*/')
                    const isLikelyCron = /^[0-9\*\/\-]/.test(this.input.trim()) && this.input.trim().split(/\s+/).length >=
                        5;

                    if (isLikelyCron) {
                        this.parseCronStr(this.input.trim());
                    } else {
                        this.parseEnglishToCron(this.input.trim().toLowerCase());
                    }
                },

                parseCronStr(cron) {
                    this.error = null;
                    try {
                        // Normalize parts if more than 5 (sometimes people paste with seconds)
                        const parts = cron.split(/\s+/).slice(0, 5).join(' ');
                        this.cronExpression = parts;

                        if (typeof cronstrue !== 'undefined') {
                            this.description = cronstrue.toString(parts, {
                                throwExceptionOnParseError: true
                            });
                        }

                        this.calculateNextRuns(parts);
                    } catch (e) {
                        this.error = "Invalid cron expression: " + (e.message || "Could not parse");
                    }
                },

                parseEnglishToCron(text) {
                    this.error = null;
                    let parsed = null;

                    // Normalize text: lowercase, trim
                    text = text.trim().toLowerCase();

                    // Replace written numbers with digits to simplify regex
                    const wordToNumber = {
                        'one': 1,
                        'two': 2,
                        'three': 3,
                        'four': 4,
                        'five': 5,
                        'six': 6,
                        'seven': 7,
                        'eight': 8,
                        'nine': 9,
                        'ten': 10,
                        'fifteen': 15,
                        'twenty': 20,
                        'thirty': 30
                    };
                    for (const [word, num] of Object.entries(wordToNumber)) {
                        text = text.replace(new RegExp(`\\b${word}\\b`, 'g'), num);
                    }

                    const days = {
                        'sunday': 0,
                        'monday': 1,
                        'tuesday': 2,
                        'wednesday': 3,
                        'thursday': 4,
                        'friday': 5,
                        'saturday': 6
                    };

                    // 1. Exact Matches
                    const exactMatches = {
                        'every minute': '* * * * *',
                        'every 1 minute': '* * * * *',
                        'every 1 minutes': '* * * * *',
                        'every 60 minutes': '0 * * * *',
                        'every half hour': '*/30 * * * *',
                        'every quarter hour': '*/15 * * * *',
                        'every hour': '0 * * * *',
                        'every 1 hour': '0 * * * *',
                        'every hour at 30 minutes': '30 * * * *',
                        'every even minute': '*/2 * * * *',
                        'every uneven minute': '1-59/2 * * * *',
                        'every even hour': '0 */2 * * *',
                        'every other hour': '0 */2 * * *',
                        'every day': '0 0 * * *',
                        'daily': '0 0 * * *',
                        'once a day': '0 0 * * *',
                        'every night': '0 0 * * *',
                        'every morning': '0 9 * * *', // Approximate
                        'every midnight': '0 0 * * *',
                        'every day at midnight': '0 0 * * *',
                        'every night at midnight': '0 0 * * *',
                        'every weekday': '0 0 * * 1-5',
                        'weekdays only': '0 0 * * 1-5',
                        'monday to friday': '0 0 * * 1-5',
                        'every weekend': '0 0 * * 6,0',
                        'weekends only': '0 0 * * 6,0',
                        'every week': '0 0 * * 0',
                        'weekly': '0 0 * * 0',
                        'once a week': '0 0 * * 0',
                        'every 7 days': '0 0 * * 0',
                        'every month': '0 0 1 * *',
                        'monthly': '0 0 1 * *',
                        'once a month': '0 0 1 * *',
                        'every other month': '0 0 1 */2 *',
                        'every quarter': '0 0 1 */3 *',
                        'every 6 months': '0 0 1 */6 *',
                        'every year': '0 0 1 1 *'
                    };

                    if (exactMatches[text]) {
                        parsed = exactMatches[text];
                    } else {
                        // 2. Pattern Matching
                        let m;

                        if (m = text.match(/^every (\d+) minutes?$/)) {
                            parsed = `*/${m[1]} * * * *`;
                        } else if (m = text.match(/^every (\d+) hours?$/)) {
                            parsed = `0 */${m[1]} * * *`;
                        } else if (m = text.match(/^every (monday|tuesday|wednesday|thursday|friday|saturday|sunday)$/)) {
                            parsed = `0 0 * * ${days[m[1]]}`;
                        } else if (m = text.match(
                                /^every (monday|tuesday|wednesday|thursday|friday|saturday|sunday) at midnight$/)) {
                            parsed = `* 0 * * ${days[m[1]]}`;
                        } else if (m = text.match(
                                /^every (day|night|monday|tuesday|wednesday|thursday|friday|saturday|sunday)(?: at)? (\d{1,2})(:(\d{2}))?\s*(am|pm)?$/
                            )) {
                            let dayParam = '*';
                            if (days[m[1]] !== undefined) dayParam = days[m[1]];

                            let hour = parseInt(m[2], 10);
                            let minute = m[4] ? parseInt(m[4], 10) : 0;
                            let ampm = m[5];

                            if (ampm === 'pm' && hour < 12) hour += 12;
                            if (ampm === 'am' && hour === 12) hour = 0;

                            parsed = `${minute} ${hour} * * ${dayParam}`;
                        } else if (m = text.match(
                                /^at (\d{1,2}):(\d{2}) on every day-of-week from (monday|tuesday|wednesday|thursday|friday|saturday|sunday) through (monday|tuesday|wednesday|thursday|friday|saturday|sunday)$/
                            )) {
                            let hour = parseInt(m[1], 10);
                            let minute = parseInt(m[2], 10);
                            parsed = `${minute} ${hour} * * ${days[m[3]]}-${days[m[4]]}`;
                        }
                    }

                    if (parsed) {
                        this.parseCronStr(parsed);
                    } else {
                        this.error = "Could not understand that English phrase. Try something like 'every 5 minutes'.";
                    }
                },

                calculateNextRuns(cron) {
                    try {
                        // The UMD build of Croner exports a function/class called `Cron` on the window object.
                        // However, let's make sure by checking both.
                        const CronerClass = window.Croner || window.Cron;

                        if (CronerClass) {
                            const job = new CronerClass(cron);
                            this.nextRuns = job.nextRuns(5);
                        } else {
                            this.nextRuns = [];
                            this.error = "Cron parser library failed to load.";
                        }
                    } catch (e) {
                        this.error = "Failed to calculate next runs.";
                    }
                },

                formatDate(dateObj) {
                    return new Intl.DateTimeFormat('en-US', {
                        weekday: 'short',
                        month: 'short',
                        day: 'numeric',
                        hour: 'numeric',
                        minute: '2-digit',
                        second: '2-digit',
                        timeZoneName: 'short'
                    }).format(dateObj);
                }
            }
        }
    </script>

    {{-- 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.meeting.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">Golden
                Hour Meeting Planner</a>
            <a href="{{ route('tools.local-time') }}"
                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">Stateless
                Local Time Linker</a>
        </div>
    </div>
@endsection