<script setup>
import DashboardLayout from '../layouts/DashboardLayout.vue'

const stats = [
  { label: "Today's Money", value: '$53,000', change: '+55%', positive: true, icon: 'weekend',    gradient: 'primary' },
  { label: "Today's Users", value: '2,300',   change: '+3%',  positive: true, icon: 'leaderboard',gradient: 'info' },
  { label: 'New Clients',   value: '+3,462',  change: '-2%',  positive: false,icon: 'store',      gradient: 'success' },
  { label: 'Sales',         value: '$103,430',change: '+5%',  positive: true, icon: 'person',     gradient: 'danger' },
]

const projects = [
  { name: 'Material UI XD',    budget: '$14,000', progress: 60,  status: 'working' },
  { name: 'Add Progress Track', budget: '$3,000',  progress: 10,  status: 'cancelled' },
  { name: 'Fix Platform Errors',budget: 'Not set', progress: 100, status: 'done' },
  { name: 'Launch Mobile App',  budget: '$20,500', progress: 100, status: 'done' },
  { name: 'Add the New Pricing',budget: '$500',    progress: 25,  status: 'working' },
  { name: 'Redesign New Online',budget: '$2,000',  progress: 40,  status: 'cancelled' },
]

const statusClass = {
  done:      'bg-success/10 text-success',
  working:   'bg-info/10 text-info',
  cancelled: 'bg-danger/10 text-danger',
}

</script>

<template>
  <DashboardLayout>
    <!-- Stat cards -->
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4 mt-6">
      <div
        v-for="stat in stats"
        :key="stat.label"
        class="rounded-2xl bg-white p-4 shadow-soft-md"
      >
        <div class="flex items-start justify-between">
          <div
            class="-mt-10 flex h-16 w-16 shrink-0 items-center justify-center rounded-xl shadow-soft-md"
            :class="`bg-gradient-${stat.gradient} shadow-${stat.gradient}`"
          >
            <span class="material-icons text-3xl text-white">{{ stat.icon }}</span>
          </div>
          <div class="text-right">
            <p class="text-sm font-medium text-secondary">{{ stat.label }}</p>
            <h4 class="text-2xl font-bold text-dark">{{ stat.value }}</h4>
          </div>
        </div>
        <div class="mt-4 border-t border-gray-100 pt-3">
          <p class="text-sm text-secondary">
            <span :class="stat.positive ? 'text-success' : 'text-danger'" class="font-medium">
              {{ stat.change }}
            </span>
            than last week
          </p>
        </div>
      </div>
    </div>

    <!-- Projects table -->
    <div class="mt-6 rounded-2xl bg-white shadow-soft-md">
      <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
        <h6 class="text-sm font-bold text-dark">Projects</h6>
        <p class="text-xs text-secondary">
          <span class="font-medium text-success">30 done</span> this month
        </p>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full text-left text-sm">
          <thead>
            <tr class="border-b border-gray-100">
              <th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Project</th>
              <th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Budget</th>
              <th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Status</th>
              <th class="px-6 py-3 text-xs font-bold uppercase tracking-wide text-secondary">Completion</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(p, i) in projects"
              :key="p.name"
              :class="i < projects.length - 1 ? 'border-b border-gray-100' : ''"
            >
              <td class="px-6 py-3 font-medium text-dark">{{ p.name }}</td>
              <td class="px-6 py-3 text-secondary">{{ p.budget }}</td>
              <td class="px-6 py-3">
                <span class="rounded-full px-2.5 py-1 text-xs font-medium capitalize" :class="statusClass[p.status]">
                  {{ p.status }}
                </span>
              </td>
              <td class="px-6 py-3">
                <div class="flex items-center gap-3">
                  <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-gray-200">
                    <div
                      class="h-full rounded-full bg-gradient-info"
                      :style="{ width: `${p.progress}%` }"
                    />
                  </div>
                  <span class="w-8 shrink-0 text-right text-xs font-medium text-dark">{{ p.progress }}%</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </DashboardLayout>
</template>
