<template>
    <aside class="sidebar" id="sidebar" :class="{ 'is-open': mobileOpen }">
        <!-- Sidebar Toggle -->
        <button class="sidebar-edge-toggle" @click="$emit('toggle-sidebar')" aria-label="Toggle sidebar" :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
            </svg>
        </button>

        <!-- Brand -->
        <Link href="/dashboard" class="sidebar-brand">
            <div class="sidebar-brand-icon">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="9" height="9" rx="2" fill="#EA4335"/>
                    <rect x="13" y="2" width="9" height="9" rx="2" fill="#4285F4"/>
                    <rect x="2" y="13" width="9" height="9" rx="2" fill="#FBBC05"/>
                    <rect x="13" y="13" width="9" height="9" rx="2" fill="#34A853"/>
                </svg>
            </div>
            <span class="sidebar-brand-name">CRMfic</span>
        </Link>

        <!-- Scrollable nav -->
        <div class="sidebar-scroll">

            <div class="nav-group">
                <Link 
                    href="/dashboard" 
                    class="nav-item nav-item--top" 
                    :class="{ 'is-active': isActive('/dashboard') }"
                    @mouseenter="handleMouseEnter($event, 'Home', 'Dashboard overview showing campaign analytics, list growth, and automation funnel performance.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/></svg>
                    <span>Home</span>
                </Link>
            </div>

            <div class="nav-group">
                <span class="nav-group-label">Campaigns</span>
                <Link 
                    href="/campaigns" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/campaigns') }"
                    @mouseenter="handleMouseEnter($event, 'Campaigns', 'Create and send one-off broadcast email campaigns to your contact lists.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="9" height="9" rx="2" fill="#EA4335"/><rect x="13" y="2" width="9" height="9" rx="2" fill="#4285F4"/><rect x="2" y="13" width="9" height="9" rx="2" fill="#FBBC05"/><rect x="13" y="13" width="9" height="9" rx="2" fill="#34A853"/></svg>
                    <span>Campaigns</span>
                </Link>
                <Link 
                    href="/recurring-email" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/recurring-email') }"
                    @mouseenter="handleMouseEnter($event, 'Recurring Email', 'Schedule recurring email newsletters or automated cron-based campaigns.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/></svg>
                    <span>Recurring Email</span>
                </Link>
                <Link 
                    href="/sequences" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/sequences') }"
                    @mouseenter="handleMouseEnter($event, 'Sequences', 'Design drip campaigns and multi-stage automated follow-up sequences.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/></svg>
                    <span>Sequences</span>
                </Link>
                <Link 
                    href="/templates" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/templates') }"
                    @mouseenter="handleMouseEnter($event, 'Templates', 'Design and manage reusable HTML and visual email templates.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                    <span>Templates</span>
                </Link>
            </div>

            <div class="nav-group">
                <span class="nav-group-label">Automation</span>
                <Link 
                    href="/automation" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/automation') }"
                    @mouseenter="handleMouseEnter($event, 'Automation', 'Build visual drag-and-drop workflow funnels to automate CRM actions.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                    <span>Automation</span>
                </Link>
            </div>

            <div class="nav-group">
                <span class="nav-group-label">Audience</span>
                <Link 
                    href="/audience" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/audience') }"
                    @mouseenter="handleMouseEnter($event, 'Audience Overview', 'Unified view of your list audience, contact analytics, and metrics.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
                    <span>Overview</span>
                </Link>
                <Link 
                    href="/contacts" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/contacts') }"
                    @mouseenter="handleMouseEnter($event, 'Contacts', 'Manage individual leads, custom properties, and contact history.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                    <span>Contacts</span>
                </Link>
                <Link 
                    href="/lists" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/lists') }"
                    @mouseenter="handleMouseEnter($event, 'Lists', 'Segment contacts into static or dynamic mailing lists.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
                    <span>Lists</span>
                </Link>
                <Link 
                    href="/tags" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/tags') }"
                    @mouseenter="handleMouseEnter($event, 'Tags', 'Categorize contacts with lightweight labels for easy filtering.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z"/></svg>
                    <span>Tags</span>
                </Link>
                <Link 
                    href="/webhooks" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/webhooks') }"
                    @mouseenter="handleMouseEnter($event, 'Webhooks', 'Inbound API webhook endpoints to sync contact creation externally.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/></svg>
                    <span>Webhooks</span>
                </Link>
            </div>

            <div class="nav-group">
                <span class="nav-group-label">Forms</span>
                <Link 
                    href="/forms" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/forms') }"
                    @mouseenter="handleMouseEnter($event, 'Forms', 'Design embeddable lead capture subscription forms for websites.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z"/></svg>
                    <span>Forms</span>
                </Link>
            </div>

            <div class="nav-group">
                <span class="nav-group-label">Sending</span>
                <Link 
                    href="/sending/smtp" 
                    class="nav-item" 
                    :class="{ 'is-active': isActive('/sending/smtp') }"
                    @mouseenter="handleMouseEnter($event, 'SMTP Config', 'Configure external email delivery SMTP servers and OAuth credentials.')"
                    @mouseleave="handleMouseLeave"
                >
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/></svg>
                    <span>SMTP Config</span>
                </Link>
            </div>
        </div>

        <!-- Footer -->
        <div class="sidebar-footer">
            <Link 
                href="/settings" 
                class="nav-item" 
                :class="{ 'is-active': isActive('/settings') }"
                @mouseenter="handleMouseEnter($event, 'Settings', 'Configure workspace details, brand styling, logos, and general settings.')"
                @mouseleave="handleMouseLeave"
            >
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                <span>Settings</span>
            </Link>
            <Link href="/user/profile" class="sidebar-user">
                <div class="sidebar-user-avatar">
                    <img v-if="user.profile_photo_url" :src="user.profile_photo_url" :alt="user.name">
                    <span v-else>{{ userInitials }}</span>
                </div>
                <div class="sidebar-user-info">
                    <div class="sidebar-user-name">{{ user.name }}</div>
                    <div class="sidebar-user-email">{{ user.email }}</div>
                </div>
            </Link>
        </div>

        <!-- Teleport Tooltip to Body -->
        <Teleport to="body">
            <div 
                v-if="tooltip.visible" 
                class="sidebar-tooltip" 
                :style="{ top: tooltip.y + 'px', left: tooltip.x + 'px' }"
            >
                <div class="sidebar-tooltip-title">{{ tooltip.title }}</div>
                <div class="sidebar-tooltip-desc">{{ tooltip.desc }}</div>
            </div>
        </Teleport>
    </aside>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { Link, usePage } from '@inertiajs/vue3';

defineProps({
    collapsed: {
        type: Boolean,
        default: false
    },
    mobileOpen: {
        type: Boolean,
        default: false
    }
});

defineEmits(['toggle-sidebar']);

const page = usePage();

const tooltip = reactive({
    visible: false,
    title: '',
    desc: '',
    x: 0,
    y: 0
});

function handleMouseEnter(event, title, desc) {
    const rect = event.currentTarget.getBoundingClientRect();
    tooltip.title = title;
    tooltip.desc = desc;
    tooltip.x = rect.right + 10;
    tooltip.y = rect.top + (rect.height / 2);
    tooltip.visible = true;
}

function handleMouseLeave() {
    tooltip.visible = false;
}

const user = computed(() => page.props.auth?.user ?? { name: 'User', email: '' });

const userInitials = computed(() => {
    return user.value.name
        .split(' ')
        .map(w => w[0])
        .slice(0, 2)
        .join('')
        .toUpperCase();
});

const isActive = (path) => {
    const current = page.url;
    return current === path || current.startsWith(path + '/');
};
</script>
