import * as React from 'react';
import { router } from '@inertiajs/react';
import AdminLayout from '../layout';
import { usersApi, type AdminUser } from '@/features/admin/users/services/api';
import { useAdminAuth } from '@/features/admin/auth/hooks/useAdminAuth';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import {
    Table,
    TableHead,
    TableBody,
    TableRow,
    TableHeaderCell,
    TableCell,
    TableEmpty,
} from '@/components/ui/table';
import { Pagination } from '@/components/ui/pagination';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { Spinner } from '@/components/ui/spinner';
import { toast } from '@/components/ui/sonner';
import { formatDate, debounce } from '@/lib/utils';

export default function UsersIndex() {
    const { user: currentUser } = useAdminAuth();
    const [users, setUsers] = React.useState<AdminUser[]>([]);
    const [meta, setMeta] = React.useState({
        page: 1,
        lastPage: 1,
        total: 0,
        perPage: 15,
    });
    const [search, setSearch] = React.useState('');
    const [loading, setLoading] = React.useState(true);
    const [pendingDelete, setPendingDelete] = React.useState<AdminUser | null>(
        null,
    );
    const [deleting, setDeleting] = React.useState(false);

    const load = React.useCallback((page: number, searchValue: string) => {
        setLoading(true);
        usersApi
            .index({ page, search: searchValue || undefined })
            .then((res) => {
                setUsers(res.data || []);
                setMeta({
                    page: res.meta?.current_page || 1,
                    lastPage: res.meta?.last_page || 1,
                    total: res.meta?.total || 0,
                    perPage: res.meta?.per_page || 15,
                });
            })
            .catch(() => toast.error('Failed to load users.'))
            .finally(() => setLoading(false));
    }, []);

    React.useEffect(() => load(1, ''), [load]);

    const debouncedSearch = React.useMemo(
        () => debounce((value: string) => load(1, value), 300),
        [load],
    );

    async function handleDelete() {
        if (!pendingDelete) return;
        setDeleting(true);
        try {
            await usersApi.delete(pendingDelete.id);
            toast.success(`${pendingDelete.name} was removed.`);
            setPendingDelete(null);
            load(meta.page, search);
        } catch {
            toast.error('Failed to delete user.');
        } finally {
            setDeleting(false);
        }
    }

    return (
        <AdminLayout title="Users">
            <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
                <Input
                    placeholder="Search by name, email, or mobile"
                    className="w-full sm:max-w-xs"
                    aria-label="Search users"
                    value={search}
                    onChange={(e) => {
                        setSearch(e.target.value);
                        debouncedSearch(e.target.value);
                    }}
                />
                <Button onClick={() => router.visit('/admin/users/create')}>
                    Add user
                </Button>
            </div>

            <Card>
                <Table>
                    <TableHead>
                        <tr>
                            <TableHeaderCell>Name</TableHeaderCell>
                            <TableHeaderCell>Email</TableHeaderCell>
                            <TableHeaderCell>Mobile</TableHeaderCell>
                            <TableHeaderCell>Role</TableHeaderCell>
                            <TableHeaderCell>Created</TableHeaderCell>
                            <TableHeaderCell className="text-right">
                                Actions
                            </TableHeaderCell>
                        </tr>
                    </TableHead>
                    <TableBody>
                        {loading ? (
                            <tr>
                                <TableCell colSpan={6}>
                                    <div className="flex justify-center py-10">
                                        <Spinner className="h-5 w-5 text-(--color-accent)" />
                                    </div>
                                </TableCell>
                            </tr>
                        ) : users.length === 0 ? (
                            <TableEmpty colSpan={6} message="No users found." />
                        ) : (
                            users.map((user) => (
                                <TableRow key={user.id}>
                                    <TableCell className="font-medium">
                                        {user.name}
                                    </TableCell>
                                    <TableCell>{user.email}</TableCell>
                                    <TableCell>{user.mobile ?? '—'}</TableCell>
                                    <TableCell>
                                        <Badge
                                            tone={
                                                user.role === 'admin'
                                                    ? 'accent'
                                                    : 'neutral'
                                            }
                                            className="capitalize"
                                        >
                                            {user.role}
                                        </Badge>
                                    </TableCell>
                                    <TableCell>
                                        {formatDate(user.created_at)}
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <div className="inline-flex gap-2">
                                            <Button
                                                variant="secondary"
                                                size="sm"
                                                onClick={() =>
                                                    router.visit(
                                                        `/admin/users/${user.id}/edit`,
                                                    )
                                                }
                                            >
                                                Edit
                                            </Button>
                                            <Button
                                                variant="danger-outline"
                                                size="sm"
                                                disabled={
                                                    user.id === currentUser?.id
                                                }
                                                title={
                                                    user.id === currentUser?.id
                                                        ? 'You cannot delete your own account'
                                                        : undefined
                                                }
                                                onClick={() =>
                                                    setPendingDelete(user)
                                                }
                                            >
                                                Delete
                                            </Button>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
                <Pagination
                    page={meta.page}
                    lastPage={meta.lastPage}
                    total={meta.total}
                    perPage={meta.perPage}
                    onPageChange={(p) => load(p, search)}
                />
            </Card>

            <ConfirmDialog
                open={!!pendingDelete}
                title="Delete user"
                description={`This will permanently remove ${pendingDelete?.name ?? 'this user'}. This action cannot be undone.`}
                confirmLabel="Delete"
                loading={deleting}
                onConfirm={handleDelete}
                onCancel={() => setPendingDelete(null)}
            />
        </AdminLayout>
    );
}