<template>
  <div class="space-y-6">
    <header class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight">User Profile</h1>
        <p class="text-sm text-text-secondary">Personal performance, attendance trends, and contribution overview.</p>
      </div>
      <div class="flex gap-2">
        <button class="btn-ghost">Share Profile</button>
        <button class="btn-primary">Edit Profile</button>
      </div>
    </header>

    <section class="grid gap-4 xl:grid-cols-[1.15fr_1fr]">
      <article class="card p-5 sm:p-6">
        <div class="flex flex-wrap items-start justify-between gap-4">
          <div class="flex items-start gap-4">
            <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-brand-100 text-lg font-semibold text-brand-700">FA</div>
            <div>
              <h2 class="text-xl font-semibold">Fikri Ahmad</h2>
              <p class="text-sm text-text-secondary">Senior Backend Engineer · IT Division</p>
              <p class="mt-1 text-xs text-text-secondary">Employee ID: IT-4721 · Joined Jan 2024</p>
            </div>
          </div>
          <span class="chip">On Track</span>
        </div>

        <div class="mt-5 grid gap-3 sm:grid-cols-3">
          <div class="card-muted p-3">
            <p class="text-xs uppercase tracking-wide text-text-secondary">Attendance</p>
            <p class="mt-1 text-lg font-semibold">98%</p>
          </div>
          <div class="card-muted p-3">
            <p class="text-xs uppercase tracking-wide text-text-secondary">Reports</p>
            <p class="mt-1 text-lg font-semibold">30 / 30</p>
          </div>
          <div class="card-muted p-3">
            <p class="text-xs uppercase tracking-wide text-text-secondary">Productivity</p>
            <p class="mt-1 text-lg font-semibold">91.2</p>
          </div>
        </div>

        <div class="mt-5 space-y-2">
          <div class="flex items-center justify-between text-xs text-text-secondary">
            <span>Monthly goal progress</span>
            <span>84%</span>
          </div>
          <div class="h-2.5 rounded-full bg-brand-50 dark:bg-slate-800">
            <div class="h-2.5 rounded-full bg-brand-500" style="width: 84%"></div>
          </div>
        </div>
      </article>

      <article class="card p-5 sm:p-6">
        <h2 class="font-semibold">Achievement Badges</h2>
        <div class="mt-3 flex flex-wrap gap-2">
          <span class="chip">30-Day Streak</span>
          <span class="chip">Top Contributor</span>
          <span class="chip">On-Time Reporter</span>
          <span class="chip">Fast Resolver</span>
        </div>

        <h3 class="mt-5 font-semibold">Performance Snapshot</h3>
        <div class="mt-3 grid gap-2 text-sm">
          <div class="card-muted flex items-center justify-between px-3 py-2">
            <span class="text-text-secondary">Tasks completed this week</span>
            <span class="font-semibold">34</span>
          </div>
          <div class="card-muted flex items-center justify-between px-3 py-2">
            <span class="text-text-secondary">Avg. report quality score</span>
            <span class="font-semibold">92 / 100</span>
          </div>
          <div class="card-muted flex items-center justify-between px-3 py-2">
            <span class="text-text-secondary">Blocker resolution rate</span>
            <span class="font-semibold">87%</span>
          </div>
        </div>
      </article>
    </section>

    <section class="card p-5 sm:p-6">
      <div class="mb-4 flex items-center justify-between">
        <h2 class="font-semibold">Recent Activity Timeline</h2>
        <button class="text-sm text-brand-700">View all logs</button>
      </div>
      <div class="grid gap-3 md:grid-cols-2">
        <article v-for="item in activities" :key="item.title" class="card-muted p-3 text-sm">
          <div class="flex items-center justify-between gap-2">
            <p class="font-medium">{{ item.title }}</p>
            <span class="text-xs text-text-secondary">{{ item.time }}</span>
          </div>
          <p class="mt-1 text-text-secondary">{{ item.desc }}</p>
        </article>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
const activities = [
  {
    title: "Completed API refactor report",
    desc: "Documented migration progress and technical impact for backend services.",
    time: "Today · 10:42"
  },
  {
    title: "Escalated Finance blocker",
    desc: "Submitted dependency issue with details and required support owner.",
    time: "Today · 09:15"
  },
  {
    title: "Updated sprint progress notes",
    desc: "Synced completed tasks and carry-over items for next sprint day.",
    time: "Yesterday · 17:20"
  },
  {
    title: "Reviewed team daily reports",
    desc: "Validated report quality and highlighted one follow-up action.",
    time: "Yesterday · 15:03"
  }
];
</script>
