<template>
  <div class="space-y-6">
    <header>
      <h1 class="text-2xl font-semibold">Analytics & Performance</h1>
      <p class="text-sm text-text-secondary">Premium insight layer for team productivity and division comparison.</p>
    </header>

    <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      <UiStatCard title="Completion Rate" value="94%" trend="+2.4%" />
      <UiStatCard title="Monthly Performance" value="89.2" trend="+5.1%" />
      <UiStatCard title="Most Active Team" value="IT Division" trend="Top" />
      <UiStatCard title="Blocker Resolution" value="86%" trend="+3.7%" />
    </section>

    <section class="grid gap-4 lg:grid-cols-2">
      <article class="card p-5">
        <h2 class="font-semibold">Team Productivity Graph</h2>
        <div class="mt-4 h-64">
          <UiLineAreaChart :values="productivityTrend" :labels="weeklyLabels" />
        </div>
      </article>
      <article class="card p-5">
        <h2 class="font-semibold">Division Comparison</h2>
        <div class="mt-4">
          <UiBarComparisonChart :items="divisionComparison" />
        </div>
      </article>
    </section>

    <section class="grid gap-4 lg:grid-cols-3">
      <article class="card p-5">
        <h2 class="font-semibold">Weekly Statistics</h2>
        <div class="mt-4 h-36">
          <UiLineAreaChart :values="weeklyStats" :labels="miniLabels" />
        </div>
      </article>
      <article class="card p-5">
        <h2 class="font-semibold">Activity Heatmap</h2>
        <div class="mt-4">
          <UiHeatmapGrid :values="heatmapValues" :columns="7" />
        </div>
      </article>
      <article class="card p-5">
        <h2 class="font-semibold">Most Active Employees</h2>
        <ul class="mt-4 space-y-2 text-sm">
          <li class="card-muted p-3">Ardi Putra - 31 reports</li>
          <li class="card-muted p-3">Nadia Pram - 30 reports</li>
          <li class="card-muted p-3">Gita M - 30 reports</li>
        </ul>
      </article>
    </section>
  </div>
</template>

<script setup lang="ts">
const weeklyLabels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
const miniLabels = ["W1", "W2", "W3", "W4", "W5", "W6", "W7"];

const productivityTrend = [74, 79, 76, 83, 88, 81, 90];
const weeklyStats = [62, 68, 71, 70, 75, 81, 84];

const divisionComparison = [
  { label: "IT", value: 92 },
  { label: "HR", value: 78 },
  { label: "FIN", value: 74 },
  { label: "MKT", value: 84 },
  { label: "OPS", value: 80 }
];

const heatmapValues = [
  10, 20, 60, 80, 35, 45, 75, 90, 20, 50, 70, 40, 25,
  35, 60, 70, 20, 10, 50, 85, 95, 30, 65, 40, 78, 52,
  15, 45, 67, 89, 36, 28, 56, 92, 80, 47, 35, 60, 72,
  22, 40, 62, 84, 90, 50, 34, 66, 74, 59, 21, 38, 70
];
</script>
