/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { Switch } from "@/components/ui/switch";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import axios from "axios";

const HTTP_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"];

export default function ApiPermissionsPage()
{
    const queryClient = useQueryClient();

    // Fetch content types
    const { data: types } = useQuery({
        queryKey: ["content-types"],
        queryFn: async () => (await axios.get("/api/content-types/list")).data,
    });

    // Fetch permissions
    const { data: permissions = {} } = useQuery({
        queryKey: ["api-permissions"],
        queryFn: async () => (await axios.get("/api/permissions")).data,
    });

    const mutation = useMutation({
        mutationFn: async ({ type, perms }: any) =>
            axios.post("/api/permissions", { type, permissions: perms }),
        onSuccess: () => queryClient.invalidateQueries({ queryKey: ["api-permissions"] }),
    });

    if (!types) return <div>Loading...</div>;

    return (
        <div className="p-8">
            <h1 className="text-2xl font-bold mb-4">API Permissions</h1>
            <div className="space-y-8">
                {types.map((t: any) => (
                    <div key={t.value} className="border-b pb-6">
                        <h2 className="text-lg font-semibold mb-2">{t.label} <span className="text-xs text-muted-foreground">({t.value})</span></h2>
                        <div className="flex gap-8 items-center">
                            {HTTP_METHODS.map((method) => (
                                <div key={method} className="flex flex-col items-center">
                                    <span className="font-mono text-xs">{method}</span>
                                    <Switch
                                        checked={permissions?.[t.value]?.[method] ?? true}
                                        onCheckedChange={checked =>
                                        {
                                            const perms = { ...permissions?.[t.value], [method]: checked };
                                            mutation.mutate({ type: t.value, perms });
                                        }}
                                    />
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
            {mutation.isPending && <div className="text-muted-foreground mt-4">Saving...</div>}
            {mutation.isSuccess && <div className="text-green-600 mt-4">Saved!</div>}
        </div>
    );
}