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

const auth = usePage().props.auth;
const flash = usePage().props.flash; 

const basePath = '/storesight';
const url = (path) => basePath + path;

const navItems = [
  { name: 'Dashboard', href: url('/dashboard'), icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
{ name: 'Account Settings', href: url('/dashboard/account'), icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' },
];

const isActive = (item) => {
  const url = usePage().url;
  if (item.match) return url.startsWith(item.match);
  return url === item.href;
};
</script>

<template>
  <div class="min-h-screen flex flex-col bg-gray-50 text-gray-900 antialiased">
    <!-- Top Bar -->
    <header class="bg-white border-b border-gray-200 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <Link :href="url('/')" class="flex items-center space-x-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary via-secondary to-accent flex items-center justify-center">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
            </div>
            <span class="text-xl font-bold text-gray-900">StoreSight AI</span>
          </Link>
          <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-500 hidden sm:inline">{{ auth.user?.email }}</span>
            <Link :href="url('/logout')" method="post" as="button" class="text-sm text-gray-600 hover:text-red-500 transition">Logout</Link>
          </div>
        </div>
      </div>
    </header>

    <div class="flex-1 flex">
      <!-- Sidebar (desktop) -->
      <aside class="hidden md:flex w-64 bg-white border-r border-gray-200 flex-col py-6 px-4">
        <nav class="space-y-1">
          <Link v-for="item in navItems" :key="item.name" :href="item.href" :class="[isActive(item) ? 'bg-primary/10 text-primary font-medium' : 'text-gray-600 hover:bg-gray-50']" class="flex items-center px-3 py-2 rounded-lg transition">
            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon"/></svg>
            {{ item.name }}
          </Link>
        </nav>
      </aside>

      <!-- Mobile nav tabs -->
      <div class="md:hidden bg-white border-b border-gray-200 w-full fixed top-16 z-40">
        <div class="flex overflow-x-auto px-4 py-2 space-x-4 text-sm">
          <Link v-for="item in navItems" :key="item.name" :href="item.href" :class="isActive(item) ? 'text-primary font-medium' : 'text-gray-500'" class="whitespace-nowrap px-2 py-1">{{ item.name }}</Link>
        </div>
      </div>

      <!-- Main content -->
      <main class="flex-1 p-6 md:p-8 mt-10 md:mt-0">
        <div class="max-w-5xl mx-auto">
          <!-- Flash messages -->
          <div v-if="flash.success" class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">{{ flash.success }}</div>
          <div v-if="flash.error" class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{{ flash.error }}</div>
          <slot />
        </div>
      </main>
    </div>
  </div>
</template>
