// a simple CRUD componenet for congregations for admins

import { useEffect, useState } from 'react';
import axiosInstance from '../../../src/axiosSecure';
import toast from 'react-hot-toast';
import Layout from '../../../components/layout';
import ProtectedRoute from '../../../components/protectedRoute';
import { UserRole } from '@prisma/client';
import { useRouter } from 'next/router';

export default function CongregationCRUD() {
    const [congregations, setCongregations] = useState([]);
    const [newCongregation, setNewCongregation] = useState('');
    const router = useRouter();

    const fetchCongregations = async () => {
        try {
            const { data: congregationsData } = await axiosInstance.get(`/api/data/congregations`);
            setCongregations(congregationsData);
        } catch (error) {
            console.error(error);
        }
    };

    const addCongregation = async () => {
        try {
            await axiosInstance.post(`/api/data/congregations`, { name: newCongregation, address: "" });
            toast.success('Успешно добавен сбор');
            setNewCongregation('');
            fetchCongregations();
        } catch (error) {
            console.error(error);
        }
    };

    const deleteCongregation = async (id) => {
        try {
            await axiosInstance.delete(`/api/data/congregations/${id}`);
            toast.success('Успешно изтрит сбор');
            fetchCongregations();
        } catch (error) {
            console.error(error);
        }
    };
    useEffect(() => {
        fetchCongregations();
    }, []);

    return (
        <ProtectedRoute allowedRoles={[UserRole.ADMIN]}>
            <div className="h-5/6 grid place-items-start px-4 pt-8">
                <div className="flex flex-col w-full px-4">
                    <h1 className="text-2xl font-bold text-center">Сборове</h1>
                    <div className="flex gap-2 mb-4">
                        <input
                            type="text"
                            value={newCongregation}
                            onChange={(e) => setNewCongregation(e.target.value)}
                            placeholder="Име на сбор"
                            className="px-4 py-2 rounded-md border border-gray-300"
                        />
                        <button
                            onClick={addCongregation}
                            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
                        >
                            Добави
                        </button>
                    </div>
                    <table className="w-full">
                        <thead>
                            <tr>
                                <th>Име</th>
                                <th>Действия</th>
                            </tr>
                        </thead>
                        <tbody>
                            {congregations.map((congregation) => (
                                <tr key={congregation.id}>
                                    <td>{congregation.name}</td>
                                    <td className='right'>
                                        {/* <button
                                            onClick={() => router.push(`/cart/publishers/congregation/${congregation.id}`)}
                                            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
                                        >
                                            Преглед
                                        </button> */}
                                        <button
                                            onClick={() => deleteCongregation(congregation.id)}
                                            className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
                                        >
                                            Изтрий
                                        </button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </ProtectedRoute>
    );
}