<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue'
import type { BreadcrumbItemType } from '@/types'
import { Button } from '@/components/ui/button';
import { usePage, router, Link, Head } from '@inertiajs/vue3';
import { Plus, Edit, Trash, Eye, ChevronLeft, ChevronRight } from 'lucide-vue-next'

defineOptions({
  layout: AppLayout,
})

const props = defineProps<{
  user_operations: any
  breadcrumbs: BreadcrumbItemType[]
}>()

const page = usePage()
const role = page.props.auth?.user?.role ?? 'user'

// Calculate row number with pagination offset
const getRowNumber = (index: number) => {
  const currentPage = props.user_operations.meta?.current_page || 1
  const perPage = props.user_operations.meta?.per_page || 10
  return (currentPage - 1) * perPage + index + 1
}

// Inertia pagination function
const visitPage = (url: string | null) => {
  if (url) {
    router.visit(url)
  }
}
</script>

<template>
  <Head title="Fuzzy Operation Details" />
  <div class="p-6">
    <div class="flex justify-between">
      <h1 class="text-2xl font-bold mb-4">Fuzzy Operation Details</h1>
      <div class="flex space-x-2">
        <Button variant="secondary" as-child>
          <Link href="/fuzzy-operations">
            Stakeholder Analysis
          </Link>
        </Button>
        <Button variant="default" as-child>
            <Link href="/fuzzy-operations/add-operations">
                <Plus class="h-4 w-4"/>
                Add Operation
            </Link>
        </Button>
      </div>
    </div>

    <table class="w-full border text-left">
      <thead class="bg-gray-100 dark:bg-neutral-900">
        <tr>
          <th class="p-2 border">No</th>
          <th class="p-2 border">Stakeholder</th>
          <th class="p-2 border">Project</th>
          <th class="p-2 border">Designation ∩ Technical Skills</th>
          <th class="p-2 border">Power ∪ Influence</th>
          <th class="p-2 border">Interpersonal Relationship ∩ Experience</th>
          <th class="p-2 border">Weightage</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(operation, index) in user_operations.data" :key="operation.id">
          <td class="p-2 border">{{ getRowNumber(index) }}</td>
          <td class="p-2 border">{{ operation.user?.name }}</td>
          <td class="p-2 border">{{ operation.project?.name }}</td>
          <td class="p-2 border">{{ operation.finals?.designation_tech_skills }}</td>
          <td class="p-2 border">{{ operation.finals?.power_influence }}</td>
          <td class="p-2 border">{{ operation.finals?.interpersonal_relationship_experience }}</td>
          <td class="p-2 border">{{ operation.finals?.front_weight }}</td>
        </tr>

        <!-- Show message if no operations -->
        <tr v-if="user_operations.data.length === 0">
          <td colspan="8" class="p-4 border text-center text-gray-500">
            No user operations found.
          </td>
        </tr>
      </tbody>
    </table>

    <!-- Simple Pagination -->
    <div v-if="user_operations.meta && user_operations.meta.last_page > 1" class="mt-6 flex items-center justify-center space-x-4">
      <Button
        variant="outline"
        size="sm"
        :disabled="!user_operations.links.prev"
        @click="visitPage(user_operations.links.prev)"
      >
        <ChevronLeft class="h-4 w-4" />
        Previous
      </Button>

      <span class="text-sm text-gray-700">
        Page {{ user_operations.meta.current_page }} of {{ user_operations.meta.last_page }}
      </span>

      <Button
        variant="outline"
        size="sm"
        :disabled="!user_operations.links.next"
        @click="visitPage(user_operations.links.next)"
      >
        Next
        <ChevronRight class="h-4 w-4" />
      </Button>
    </div>

    <!-- Results counter -->
    <div v-if="user_operations.meta" class="mt-4 text-center text-sm text-gray-600">
      Showing {{ user_operations.meta.from }} to {{ user_operations.meta.to }} of {{ user_operations.meta.total }} results
    </div>
  </div>
</template>

<style scoped>
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
