<script setup>
import { ref, onMounted } from 'vue';
import { RouterLink } from 'vue-router';
import api from '../api.js';
import { authState } from '../store/auth.js';

const counts = ref({ productGroups: 0, imports: 0, styles: 0 });

onMounted(async () => {
  const [pg, imports] = await Promise.all([api.getProductGroups(), api.getImports()]);
  counts.value.productGroups = pg.data.length;
  counts.value.imports = imports.data.length;
});

const tiles = [
  { title: 'Product Groups', desc: 'Manage brands, groups and their styles.', to: '/product-groups', icon: 'pi pi-sitemap', accent: 'var(--module-product-groups)' },
  { title: 'Pricing & Costing', desc: 'Review costings, adjust prices, submit for approval.', to: '/pricing', icon: 'pi pi-tags', accent: 'var(--module-pricing)' },
  { title: 'Import Management', desc: 'Onboard supplier price files through the classification wizard.', to: '/imports', icon: 'pi pi-file-import', accent: 'var(--module-imports)' },
  { title: 'Stock', desc: 'View on-hand and allocated stock by style.', to: '/stock', icon: 'pi pi-box', accent: 'var(--module-stock)' },
];
</script>

<template>
  <div class="page">
    <div class="page-header">
      <div>
        <h1>Welcome back, {{ authState.user?.name?.split(' ')[0] }}</h1>
        <p class="page-subtitle">This is a proof-of-concept build of the Medicus platform on a plain PHP + Vue/PrimeVue stack.</p>
      </div>
    </div>

    <div class="tile-grid">
      <RouterLink v-for="t in tiles" :key="t.to" :to="t.to" class="tile" :style="{ '--accent-color': t.accent }">
        <i :class="t.icon"></i>
        <h3>{{ t.title }}</h3>
        <p>{{ t.desc }}</p>
      </RouterLink>
    </div>
  </div>
</template>

<style scoped>
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--accent-color);
  border-radius: 10px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.tile i {
  font-size: 1.3rem;
  color: var(--accent-color);
}

.tile h3 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1.05rem;
}

.tile p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
</style>
