/* eslint-disable @typescript-eslint/no-explicit-any */
import { Head, useForm } from '@inertiajs/react';
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import AppLayout from '@/layouts/app-layout';

export default function Index({ users }: { users: any[] }) {
    const { patch, processing } = useForm();

    const updateRole = (id: number, role: string) => {
        patch(route('admin.users.update', id), {
            data: { role: role },
            preserveScroll: true,
        });
    };

    return (
        <AppLayout>
            <Head title="Manajemen User" />
            <div className="p-4 md:p-8 w-full space-y-6">
                <h2 className="text-2xl font-bold">Manajemen Akses User</h2>
                <Card>
                    <CardHeader><CardTitle>Daftar Pengguna</CardTitle></CardHeader>
                    <CardContent className="p-0">
                        <table className="w-full text-sm text-left">
                            <thead className="bg-zinc-50 border-b">
                                <tr>
                                    <th className="p-4">Nama</th>
                                    <th className="p-4 text-center">Role</th>
                                    <th className="p-4 text-right">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                {users.map((user) => (
                                    <tr key={user.id} className="border-b">
                                        <td className="p-4 font-medium">{user.name}</td>
                                        <td className="p-4 text-center">
                                            <span className="bg-zinc-100 px-2 py-1 rounded text-[10px] font-bold">
                                                {user.role.toUpperCase()}
                                            </span>
                                        </td>
                                        <td className="p-4 text-right">
                                            <Select defaultValue={user.role} onValueChange={(val) => updateRole(user.id, val)} disabled={processing}>
                                                <SelectTrigger className="w-[120px] ml-auto"><SelectValue /></SelectTrigger>
                                                <SelectContent>
                                                    <SelectItem value="admin">Admin</SelectItem>
                                                    <SelectItem value="employee">Employee</SelectItem>
                                                </SelectContent>
                                            </Select>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}