<template>
  <div class="space-y-6">
    <header>
      <h1 class="text-2xl font-semibold">Team Monitoring</h1>
      <p class="text-sm text-text-secondary">Monitor report completion, productivity, and attendance across divisions.</p>
    </header>

    <section class="card p-4">
      <div class="grid gap-3 md:grid-cols-4">
        <input class="input" placeholder="Search employee..." />
        <UiSelectField v-model="selectedDivision" :options="divisionOptions" placeholder="All Divisions" />
        <UiDateField v-model="selectedDate" />
        <button class="btn-primary">Apply Filters</button>
      </div>
    </section>

    <section class="card overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="bg-brand-50/70 text-left text-text-secondary">
            <tr>
              <th class="px-4 py-3">Employee</th>
              <th class="px-4 py-3">Division</th>
              <th class="px-4 py-3">Completion</th>
              <th class="px-4 py-3">Productivity</th>
              <th class="px-4 py-3">Status</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.name" class="border-t border-surface-border hover:bg-brand-50/30">
              <td class="px-4 py-3">{{ user.name }}</td>
              <td class="px-4 py-3">{{ user.division }}</td>
              <td class="px-4 py-3">{{ user.completion }}</td>
              <td class="px-4 py-3">{{ user.score }}</td>
              <td class="px-4 py-3"><span class="chip">{{ user.status }}</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="flex items-center justify-between border-t border-surface-border px-4 py-3 text-sm text-text-secondary">
        <p>Showing 1-8 of 102 employees</p>
        <div class="flex gap-2">
          <button class="btn-ghost">Prev</button>
          <button class="btn-ghost">Next</button>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const selectedDivision = ref("all");
const selectedDate = ref("");
const divisionOptions = [
  { label: "All Divisions", value: "all" },
  { label: "IT Division", value: "it" },
  { label: "HR Division", value: "hr" },
  { label: "Finance Division", value: "finance" },
  { label: "Marketing Division", value: "marketing" },
  { label: "Operations Division", value: "operations" }
];

const users = [
  { name: "Ardi Putra", division: "IT", completion: "100%", score: "93", status: "Online" },
  { name: "Nadia Pram", division: "HR", completion: "92%", score: "88", status: "Online" },
  { name: "Tama Yusuf", division: "Finance", completion: "84%", score: "79", status: "Offline" },
  { name: "Gita M", division: "Marketing", completion: "97%", score: "90", status: "Online" }
];
</script>
