@extends('layouts.app')

@section('title', 'Email Subject Line Tester')
@section('meta_description',
    'Preview HTML emails directly in your browser. Test responsive layouts and dark mode
    rendering without sending a single email.')

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

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">Email Subject Line Tester</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Preview how your email subject line and pre-header text will look on different devices and clients.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-8">
            <!-- Left Column: Inputs -->
            <div class="space-y-6">
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-6 space-y-6">
                    <div class="space-y-2">
                        <label class="text-sm font-medium text-slate-300 flex justify-between">
                            <span>Subject Line</span>
                            <span class="text-xs text-slate-500" :class="subject.length > 40 ? 'text-amber-400' : ''"
                                x-text="subject.length + ' chars'"></span>
                        </label>
                        <input type="text" x-model="subject" placeholder="Big News inside! Check this out..."
                            class="w-full rounded-xl bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-3">
                        <p class="text-xs text-slate-500">Ideally under 40 characters for mobile.</p>
                    </div>

                    <div class="space-y-2">
                        <label class="text-sm font-medium text-slate-300 flex justify-between">
                            <span>Pre-header Text</span>
                            <span class="text-xs text-slate-500" x-text="preheader.length + ' chars'"></span>
                        </label>
                        <textarea x-model="preheader" rows="3"
                            placeholder="You won't believe what happened next because it's so amazing..."
                            class="w-full rounded-xl bg-slate-950 border-white/10 text-slate-200 focus:border-indigo-500 text-sm px-4 py-3 resize-none"></textarea>
                        <p class="text-xs text-slate-500">The snippet of text that appears after the subject line.</p>
                    </div>
                </div>
            </div>

            <!-- Right Column: Previews -->
            <div class="space-y-6">

                <!-- iPhone Lock Screen -->
                <div class="space-y-2">
                    <h3 class="text-sm font-medium text-slate-400 uppercase tracking-wider">iPhone Lock Screen</h3>
                    <div
                        class="relative overflow-hidden rounded-[2rem] bg-[url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center border-[6px] border-slate-800 shadow-2xl">
                        <div class="absolute inset-0 bg-black/20 backdrop-blur-[2px]"></div>

                        <!-- Dynamic Island-ish -->
                        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-black rounded-b-2xl z-10"></div>

                        <div class="relative p-6 pt-16 pb-24 space-y-4">
                            <!-- Time -->
                            <div class="text-center">
                                <div class="text-6xl font-thin text-white/90 tracking-tight drop-shadow-md">9:41</div>
                                <div class="text-lg font-medium text-white/90 drop-shadow-md">Wednesday, September 12</div>
                            </div>

                            <!-- Notification -->
                            <div
                                class="mt-8 mx-auto max-w-[340px] bg-white/70 backdrop-blur-xl rounded-2xl p-3 shadow-lg text-slate-900 animate-fade-in-up">
                                <div class="flex items-center gap-2 mb-2">
                                    <div
                                        class="w-5 h-5 bg-sky-500 rounded-md flex items-center justify-center text-white text-[10px] font-bold">
                                        M</div>
                                    <span
                                        class="text-[13px] font-semibold text-slate-800 uppercase tracking-tight flex-1">MAIL</span>
                                    <span class="text-[11px] text-slate-500">now</span>
                                </div>
                                <div class="space-y-0.5 relative group">
                                    <div class="text-[15px] font-semibold leading-tight">Sender Name</div>
                                    <div class="text-[15px] font-medium leading-tight text-slate-900"
                                        :class="subject.length > 40 ? 'text-amber-600' : ''"
                                        x-text="truncatedSubject || 'Subject Line'"></div>

                                    <!-- Preheader with Line Clamp logic -->
                                    <div class="text-[15px] leading-tight text-slate-600 line-clamp-4"
                                        x-text="truncatedPreheader || 'Pre-header text...'"></div>

                                    <!-- Length Indicator Overlay -->
                                    <div x-show="totalLength > 0"
                                        class="absolute -right-2 top-0 translate-x-full pl-2 hidden group-hover:block transition-all">
                                        <div
                                            class="bg-slate-800 text-white text-[10px] rounded px-2 py-1 whitespace-nowrap shadow-lg">
                                            <div class="font-bold">Total: <span x-text="totalLength"></span> chars</div>
                                            <div class="text-slate-400 text-[9px] mt-0.5">
                                                iPhone Max: ~110-178
                                            </div>
                                            <!-- Status -->
                                            <template x-if="totalLength <= 110">
                                                <div class="text-emerald-400 mt-0.5">Safe (No cut-off)</div>
                                            </template>
                                            <template x-if="totalLength > 110 && totalLength <= 178">
                                                <div class="text-amber-400 mt-0.5">Risk of cut-off</div>
                                            </template>
                                            <template x-if="totalLength > 178">
                                                <div class="text-red-400 mt-0.5">Will be cut off</div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Static Hint -->
                            <div class="text-center">
                                <div
                                    class="inline-flex items-center gap-1.5 px-3 py-1 bg-black/40 backdrop-blur-md rounded-full border border-white/10">
                                    <div class="w-1.5 h-1.5 rounded-full"
                                        :class="totalLength > 178 ? 'bg-red-500' : (totalLength > 110 ? 'bg-amber-500' :
                                            'bg-emerald-500')">
                                    </div>
                                    <span class="text-[10px] font-medium text-white/90">
                                        iPhone Limit: <span x-text="Math.min(totalLength, 178)"></span>/178 chars visible
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Gmail Desktop -->
                <div class="space-y-2">
                    <h3 class="text-sm font-medium text-slate-400 uppercase tracking-wider">Gmail Desktop</h3>
                    <div class="bg-white rounded-lg border border-slate-200 overflow-hidden shadow-sm">
                        <div
                            class="flex items-center p-2 gap-3 border-b border-slate-100 hover:shadow-md transition-shadow cursor-default">
                            <!-- Checkbox -->
                            <div class="w-4 h-4 border border-slate-300 rounded flex-shrink-0"></div>
                            <!-- Star -->
                            <svg class="w-4 h-4 text-slate-300 flex-shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                            </svg>

                            <!-- Sender -->
                            <span class="text-sm font-bold text-slate-900 w-32 truncate">Sender Name</span>

                            <!-- Content -->
                            <div class="text-sm text-slate-600 truncate flex-1">
                                <span class="font-bold text-slate-900" x-text="subject || 'Subject Line'"></span>
                                <span class="mx-1 text-slate-400">-</span>
                                <span class="text-slate-500" x-text="preheader || 'Pre-header text...'"></span>
                            </div>

                            <!-- Date -->
                            <span class="text-xs font-semibold text-slate-900 w-12 text-right">9:41 AM</span>
                        </div>
                    </div>
                </div>

                <!-- Outlook Notification -->
                <div class="space-y-2">
                    <h3 class="text-sm font-medium text-slate-400 uppercase tracking-wider">Windows / Outlook</h3>
                    <div
                        class="bg-slate-800 rounded-lg border border-slate-700 p-4 shadow-xl max-w-sm ml-auto relative overflow-hidden">
                        <div class="absolute left-0 top-0 bottom-0 w-1 bg-blue-500"></div>
                        <div class="flex gap-3">
                            <div
                                class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white text-lg font-bold flex-shrink-0">
                                O
                            </div>
                            <div class="overflow-hidden">
                                <div class="flex items-center justify-between mb-0.5">
                                    <span class="text-xs font-semibold text-slate-300">Outlook</span>
                                    <span class="text-[10px] text-slate-500">9:41 AM</span>
                                </div>
                                <div class="text-sm font-bold text-white truncate">Sender Name</div>
                                <div class="text-sm font-semibold text-white/90 truncate"
                                    x-text="subject || 'Subject Line'"></div>
                                <div class="text-xs text-slate-400 line-clamp-2 mt-0.5"
                                    x-text="preheader || 'Pre-header text...'"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('emailSimulator', () => ({
                subject: '',
                preheader: '',
                get totalLength() {
                    return (this.subject.length || 0) + (this.preheader.length || 0);
                },
                get truncatedSubject() {
                    const limit = 178;
                    let text = this.subject || '';
                    if (text.length > limit) {
                        return text.substring(0, limit) + '...';
                    }
                    return text;
                },
                get truncatedPreheader() {
                    // iPhone limit is roughly 178 chars total. 
                    // We need to subtract the subject length to see how much room is left for the preheader.
                    const limit = 178;
                    const subjectLen = (this.subject || '').length;

                    // If subject itself is already too long (taking into account the truncation above), 
                    // then preheader should be hidden or empty.
                    if (subjectLen >= limit) return '';

                    const remaining = limit - subjectLen;

                    if (remaining <= 0) return '';

                    let text = this.preheader || '';
                    if (text.length > remaining) {
                        return text.substring(0, remaining) + '...';
                    }
                    return text;
                }
            }));
        });
    </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">
                    Subject lines are the most critical part of an email. If they're cut off on mobile devices, your open
                    rates drop.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    This tool lets you preview how your email subject and preheader text will look across the most popular
                    email clients (iPhone, Gmail, Outlook) before you hit send.
                </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>Email Marketers</strong> optimizing campaigns.</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>Copywriters</strong> crafting perfect hooks.</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> sending newsletters.</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 store your email content. All previews are generated
                    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.threads.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">Social
                Media Thread Splitter</a>
        </div>
    </div>
@endsection