<template>
  <div class="min-h-screen bg-background">
    <NuxtLayout name="default">
      <main class="container mx-auto px-4 py-8">
        <div class="flex items-center justify-between">
          <div>
            <h1 class="text-3xl font-bold">Roles</h1>
            <p class="text-muted-foreground">Manage roles and permissions</p>
          </div>
      <Button @click="showCreateDialog = true">
        <Plus class="mr-2 h-4 w-4" />
        New Role
      </Button>
    </div>

    <div class="border rounded-lg">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Description</TableHead>
            <TableHead>Guard</TableHead>
            <TableHead>Users</TableHead>
            <TableHead>Created</TableHead>
            <TableHead class="text-right">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow v-if="loading">
            <TableCell :colspan="6" class="text-center py-8">
              <div class="flex items-center justify-center">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
              </div>
            </TableCell>
          </TableRow>
          <TableRow v-else-if="roles.length === 0">
            <TableCell :colspan="6" class="text-center py-8 text-muted-foreground">
              No roles found. Create your first role to get started.
            </TableCell>
          </TableRow>
          <TableRow v-else v-for="role in roles" :key="role.id" class="cursor-pointer hover:bg-muted/50" @click="navigateTo(`/setup/roles/${role.id}`)">
            <TableCell class="font-medium">{{ role.name }}</TableCell>
            <TableCell>{{ role.description || 'No description' }}</TableCell>
            <TableCell>
              <Badge variant="outline">{{ role.guardName || 'tenant' }}</Badge>
            </TableCell>
            <TableCell>
              {{ role.userCount || 0 }} users
            </TableCell>
            <TableCell>{{ formatDate(role.createdAt) }}</TableCell>
            <TableCell class="text-right" @click.stop>
              <div class="flex items-center justify-end gap-1">
                <Button variant="ghost" size="icon" @click="navigateTo(`/setup/roles/${role.id}`)">
                  <Eye class="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon" @click="openEditDialog(role)">
                  <Edit class="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon" @click="openDeleteDialog(role)">
                  <Trash2 class="h-4 w-4" />
                </Button>
              </div>
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>

    <!-- Create Role Dialog -->
    <Dialog v-model:open="showCreateDialog">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create New Role</DialogTitle>
          <DialogDescription>
            Add a new role to the system
          </DialogDescription>
        </DialogHeader>
        <div class="space-y-4">
          <div class="space-y-2">
            <Label for="name">Name</Label>
            <Input id="name" v-model="newRole.name" placeholder="Sales Manager" />
          </div>
          <div class="space-y-2">
            <Label for="description">Description (Optional)</Label>
            <Input id="description" v-model="newRole.description" placeholder="Manages sales team and deals" />
          </div>
          <div class="space-y-2">
            <Label for="guardName">Guard Name</Label>
            <Select v-model="newRole.guardName" @update:model-value="(value) => newRole.guardName = value">
              <SelectTrigger>
                <SelectValue placeholder="Select guard" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="tenant">Tenant</SelectItem>
                <SelectItem value="central">Central</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" @click="showCreateDialog = false">Cancel</Button>
          <Button @click="createRole" :disabled="!newRole.name">
            Create Role
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

    <!-- Edit Role Dialog -->
    <Dialog v-model:open="showEditDialog">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit Role</DialogTitle>
          <DialogDescription>
            Update role information
          </DialogDescription>
        </DialogHeader>
        <div class="space-y-4">
          <div class="space-y-2">
            <Label for="edit-name">Name</Label>
            <Input id="edit-name" v-model="editRole.name" placeholder="Role name" />
          </div>
          <div class="space-y-2">
            <Label for="edit-description">Description</Label>
            <Input id="edit-description" v-model="editRole.description" placeholder="Role description" />
          </div>
          <div class="space-y-2">
            <Label for="edit-guardName">Guard Name</Label>
            <Select v-model="editRole.guardName" @update:model-value="(value) => editRole.guardName = value">
              <SelectTrigger>
                <SelectValue placeholder="Select guard" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="tenant">Tenant</SelectItem>
                <SelectItem value="central">Central</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" @click="showEditDialog = false">Cancel</Button>
          <Button @click="updateRole" :disabled="!editRole.name">
            Update Role
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

    <!-- Delete Confirmation Dialog -->
    <Dialog v-model:open="showDeleteDialog">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Delete Role</DialogTitle>
          <DialogDescription>
            Are you sure you want to delete this role? This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" @click="showDeleteDialog = false">Cancel</Button>
          <Button variant="destructive" @click="deleteRole">
            Delete Role
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
      </main>
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Button } from '~/components/ui/button';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/ui/table';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '~/components/ui/dialog';
import { Input } from '~/components/ui/input';
import { Label } from '~/components/ui/label';
import { Badge } from '~/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '~/components/ui/select';
import { Plus, Eye, Edit, Trash2 } from 'lucide-vue-next';

definePageMeta({
  layout: 'default',
});

const { api } = useApi();
const { toast } = useToast();

const loading = ref(true);
const roles = ref<any[]>([]);
const showCreateDialog = ref(false);
const showEditDialog = ref(false);
const showDeleteDialog = ref(false);
const newRole = ref({
  name: '',
  description: '',
  guardName: 'tenant',
});
const editRole = ref({
  id: '',
  name: '',
  description: '',
  guardName: 'tenant',
});
const roleToDelete = ref<any>(null);

const loadRoles = async () => {
  try {
    loading.value = true;
    const response = await api.get('/setup/roles');
    roles.value = response || [];
  } catch (error: any) {
    console.error('Failed to load roles:', error);
    toast.error('Failed to load roles');
  } finally {
    loading.value = false;
  }
};

const createRole = async () => {
  try {
    await api.post('/setup/roles', newRole.value);
    toast.success('Role created successfully');
    showCreateDialog.value = false;
    newRole.value = { name: '', description: '', guardName: 'tenant' };
    await loadRoles();
  } catch (error: any) {
    console.error('Failed to create role:', error);
    toast.error(error.message || 'Failed to create role');
  }
};

const openEditDialog = (role: any) => {
  editRole.value = {
    id: role.id,
    name: role.name,
    description: role.description || '',
    guardName: role.guardName || 'tenant',
  };
  showEditDialog.value = true;
};

const updateRole = async () => {
  try {
    await api.patch(`/setup/roles/${editRole.value.id}`, {
      name: editRole.value.name,
      description: editRole.value.description,
      guardName: editRole.value.guardName,
    });
    toast.success('Role updated successfully');
    showEditDialog.value = false;
    await loadRoles();
  } catch (error: any) {
    console.error('Failed to update role:', error);
    toast.error(error.message || 'Failed to update role');
  }
};

const openDeleteDialog = (role: any) => {
  roleToDelete.value = role;
  showDeleteDialog.value = true;
};

const deleteRole = async () => {
  try {
    await api.delete(`/setup/roles/${roleToDelete.value.id}`);
    toast.success('Role deleted successfully');
    showDeleteDialog.value = false;
    roleToDelete.value = null;
    await loadRoles();
  } catch (error: any) {
    console.error('Failed to delete role:', error);
    toast.error(error.message || 'Failed to delete role');
  }
};

const formatDate = (date: string) => {
  if (!date) return 'N/A';
  return new Date(date).toLocaleDateString();
};

onMounted(() => {
  loadRoles();
});
</script>
