<?php
/**
 * Admin — Marquee Text Manager
 * Path: admin/marquee.php
 */
require_once 'layout-header.php';

$success = false;
$error   = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'save_marquee') {
    if (!$conn) {
        $error = 'ডাটাবেজ কানেক্টেড নেই!';
    } else {
        $text       = isset($_POST['text']) ? trim($_POST['text']) : '';
        $speed      = isset($_POST['speed']) ? $_POST['speed'] : 'normal';
        $is_active  = isset($_POST['is_active']) ? 1 : 0;

        if (empty($text)) {
            $error = 'মারকিউ টেক্সট খালি রাখা যাবে না।';
        } elseif (save_marquee($text, $speed, $is_active)) {
            $success = 'মারকিউ টেক্সট সফলভাবে সেভ হয়েছে!';
        } else {
            $error = 'সেভ করতে সমস্যা হয়েছে।';
        }
    }
}

$marquee = get_marquee_all();
$text       = $marquee['text'] ?? '';
$speed      = $marquee['speed'] ?? 'normal';
$is_active  = isset($marquee['is_active']) ? (int)$marquee['is_active'] : 1;

$speed_map = ['slow' => '30s', 'normal' => '20s', 'fast' => '12s'];
$anim_duration = $speed_map[$speed] ?? '20s';
?>

<main class="flex-1 p-6 md:p-8 space-y-6">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-800/80 pb-5">
        <div>
            <h1 class="text-2xl font-black text-white uppercase tracking-wider">Marquee Text</h1>
            <p class="text-xs text-slate-400 mt-1">হেডারের নিচে হিরো সেকশনের উপরে দেখানো স্ক্রলিং টেক্সট</p>
        </div>
    </div>

    <?php if ($success): ?>
    <div class="p-4 bg-emerald-950/40 border border-emerald-800 text-emerald-200 text-xs rounded-xl flex items-center">
        <i class="fa-solid fa-circle-check mr-3"></i> <?php echo $success; ?>
    </div>
    <?php endif; ?>
    <?php if ($error): ?>
    <div class="p-4 bg-red-950/40 border border-red-800 text-red-200 text-xs rounded-xl flex items-center">
        <i class="fa-solid fa-triangle-exclamation mr-3"></i> <?php echo $error; ?>
    </div>
    <?php endif; ?>

    <!-- Live Preview -->
    <div class="bg-slate-900 border border-slate-800/80 rounded-2xl overflow-hidden">
        <div class="px-5 py-3 border-b border-slate-800/80 flex items-center justify-between">
            <h2 class="text-xs font-bold uppercase text-sky-400 tracking-wider">
                <i class="fa-solid fa-eye mr-2"></i> Live Preview
            </h2>
            <span class="text-[10px] text-slate-500 uppercase">ডান → বাম</span>
        </div>
        <div class="marquee-preview-bar bg-gradient-to-r from-blue-950 via-sky-900 to-blue-950 py-2.5 overflow-hidden relative">
            <div class="marquee-preview-track flex whitespace-nowrap" style="animation: marqueeScroll <?php echo $anim_duration; ?> linear infinite;">
                <span class="text-sm font-semibold text-sky-200 px-8"><?php echo htmlspecialchars($text ?: 'আপনার মারকিউ টেক্সট এখানে দেখাবে...'); ?></span>
                <span class="text-sm font-semibold text-sky-200 px-8" aria-hidden="true"><?php echo htmlspecialchars($text ?: 'আপনার মারকিউ টেক্সট এখানে দেখাবে...'); ?></span>
            </div>
        </div>
    </div>

    <!-- Edit Form -->
    <form method="post" action="" class="bg-slate-900 border border-slate-800/80 rounded-2xl p-6 space-y-5">
        <input type="hidden" name="action" value="save_marquee">

        <h2 class="text-sm font-bold uppercase text-sky-400 tracking-wider flex items-center pb-3 border-b border-slate-800/80">
            <i class="fa-solid fa-pen-to-square mr-2"></i> Edit Marquee
        </h2>

        <div>
            <label class="block text-xs font-bold uppercase text-slate-400 tracking-wide mb-2">
                Marquee Text <span class="text-slate-600 normal-case">(★ বা | দিয়ে আলাদা করতে পারেন)</span>
            </label>
            <textarea name="text" id="marquee-text" rows="3" required
                class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500 text-slate-100"
                placeholder="★ ISO Certified ★ 24/7 Support ★ Elevator | Generator | Solar ★"><?php echo htmlspecialchars($text); ?></textarea>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-xs font-bold uppercase text-slate-400 tracking-wide mb-2">Scroll Speed</label>
                <select name="speed" id="marquee-speed"
                    class="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500 text-slate-100">
                    <option value="slow"   <?php echo $speed === 'slow'   ? 'selected' : ''; ?>>Slow</option>
                    <option value="normal" <?php echo $speed === 'normal' ? 'selected' : ''; ?>>Normal</option>
                    <option value="fast"   <?php echo $speed === 'fast'   ? 'selected' : ''; ?>>Fast</option>
                </select>
            </div>
            <div class="flex items-end">
                <label class="flex items-center gap-3 cursor-pointer p-3 rounded-xl bg-slate-950 border border-slate-800 w-full">
                    <input type="checkbox" name="is_active" value="1" <?php echo $is_active ? 'checked' : ''; ?>
                        class="w-4 h-4 rounded accent-sky-500">
                    <span class="text-sm font-semibold text-slate-300">সাইটে দেখান (Active)</span>
                </label>
            </div>
        </div>

        <div class="flex justify-end pt-2">
            <button type="submit"
                class="bg-sky-500 hover:bg-sky-600 text-slate-950 font-black px-8 py-3.5 rounded-xl transition-all text-xs uppercase tracking-wider flex items-center">
                <i class="fa-solid fa-floppy-disk mr-2"></i> Save Marquee
            </button>
        </div>
    </form>

</main>

<style>
    @keyframes marqueeScroll {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
</style>

<script>
    const textInput  = document.getElementById('marquee-text');
    const speedInput = document.getElementById('marquee-speed');
    const track      = document.querySelector('.marquee-preview-track');
    const spans      = track ? track.querySelectorAll('span') : [];
    const speedMap   = { slow: '30s', normal: '20s', fast: '12s' };

    function updatePreview() {
        const val = textInput.value || 'আপনার মারকিউ টেক্সট এখানে দেখাবে...';
        spans.forEach(s => s.textContent = val);
        if (track) track.style.animationDuration = speedMap[speedInput.value] || '20s';
    }

    textInput.addEventListener('input', updatePreview);
    speedInput.addEventListener('change', updatePreview);
</script>

<?php require_once 'layout-footer.php'; ?>
