import React, {useState, useEffect} from 'react';

// Jezik (Language) Components
const JezikForm = ({jezik, onSubmit, onCancel}) => {
    const [formData, setFormData] = useState(jezik || {jezik: ''});

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    Jezik:
                    <input
                        type="text"
                        value={formData.jezik}
                        onChange={(e) => setFormData({...formData, jezik: e.target.value})}
                        required
                    />
                </label>
            </div>
            <div>
                <button type="submit">{jezik ? 'Update' : 'Add'} Language</button>
                <button type="button" onClick={onCancel}>Cancel</button>
            </div>
        </form>
    );
};

const JezikList = ({jeziki, onEdit, onDelete}) => (
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>Language</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {jeziki.map(jezik => (
            <tr key={jezik.id}>
                <td>{jezik.id}</td>
                <td>{jezik.jezik}</td>
                <td>
                    <button onClick={() => onEdit(jezik)}>Edit</button>
                    <button onClick={() => onDelete(jezik.id)}>Delete</button>
                </td>
            </tr>
        ))}
        </tbody>
    </table>
);

// Podrocje (Field) Components
const PodrocjeForm = ({podrocje, onSubmit, onCancel}) => {
    const [formData, setFormData] = useState(podrocje || {podrocje: ''});

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    Področje:
                    <input
                        type="text"
                        value={formData.podrocje}
                        onChange={(e) => setFormData({...formData, podrocje: e.target.value})}
                        required
                    />
                </label>
            </div>
            <div>
                <button type="submit">{podrocje ? 'Update' : 'Add'} Field</button>
                <button type="button" onClick={onCancel}>Cancel</button>
            </div>
        </form>
    );
};

const PodrocjeList = ({podrocja, onEdit, onDelete}) => (
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>Field</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {podrocja.map(podrocje => (
            <tr key={podrocje.id}>
                <td>{podrocje.id}</td>
                <td>{podrocje.podrocje}</td>
                <td>
                    <button onClick={() => onEdit(podrocje)}>Edit</button>
                    <button onClick={() => onDelete(podrocje.id)}>Delete</button>
                </td>
            </tr>
        ))}
        </tbody>
    </table>
);

// Vloga (Role) Components
const VlogaForm = ({vloga, onSubmit, onCancel}) => {
    const [formData, setFormData] = useState(vloga || {
        vloga: '',
        izpis_zenska: '',
        izpis_moski: ''
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    Vloga:
                    <input
                        type="text"
                        value={formData.vloga}
                        onChange={(e) => setFormData({...formData, vloga: e.target.value})}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Izpis (ženski):
                    <input
                        type="text"
                        value={formData.izpis_zenska}
                        onChange={(e) => setFormData({...formData, izpis_zenska: e.target.value})}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Izpis (moški):
                    <input
                        type="text"
                        value={formData.izpis_moski}
                        onChange={(e) => setFormData({...formData, izpis_moski: e.target.value})}
                        required
                    />
                </label>
            </div>
            <div>
                <button type="submit">{vloga ? 'Update' : 'Add'} Role</button>
                <button type="button" onClick={onCancel}>Cancel</button>
            </div>
        </form>
    );
};

const VlogaList = ({vloge, onEdit, onDelete}) => (
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>Role</th>
            <th>Female Form</th>
            <th>Male Form</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {vloge.map(vloga => (
            <tr key={vloga.id}>
                <td>{vloga.id}</td>
                <td>{vloga.vloga}</td>
                <td>{vloga.izpis_zenska}</td>
                <td>{vloga.izpis_moski}</td>
                <td>
                    <button onClick={() => onEdit(vloga)}>Edit</button>
                    <button onClick={() => onDelete(vloga.id)}>Delete</button>
                </td>
            </tr>
        ))}
        </tbody>
    </table>
);

// Main App Component
const App = () => {
    const [activeTab, setActiveTab] = useState('members');

    // Members state
    const [members, setMembers] = useState([]);
    const [editingMember, setEditingMember] = useState(null);
    const [showMemberForm, setShowMemberForm] = useState(false);

    // Jezik state
    const [jeziki, setJeziki] = useState([]);
    const [editingJezik, setEditingJezik] = useState(null);
    const [showJezikForm, setShowJezikForm] = useState(false);

    // Podrocje state
    const [podrocja, setPodrocja] = useState([]);
    const [editingPodrocje, setEditingPodrocje] = useState(null);
    const [showPodrocjeForm, setShowPodrocjeForm] = useState(false);

    // Vloga state
    const [vloge, setVloge] = useState([]);
    const [editingVloga, setEditingVloga] = useState(null);
    const [showVlogaForm, setShowVlogaForm] = useState(false);

    useEffect(() => {
        fetchAll();
    }, []);

    const fetchAll = () => {
        fetchMembers();
        fetchJeziki();
        fetchPodrocja();
        fetchVloge();
    };

    // Members CRUD
    const fetchMembers = async () => {
        try {
            const response = await fetch('/express/api/v1/clan/');
            const data = await response.json();
            setMembers(data);
        } catch (error) {
            console.error('Error fetching members:', error);
        }
    };

    // Jezik CRUD
    const fetchJeziki = async () => {
        try {
            const response = await fetch('/express/api/v1/jezik/');
            const data = await response.json();
            setJeziki(data);
        } catch (error) {
            console.error('Error fetching languages:', error);
        }
    };

    // Podrocje CRUD
    const fetchPodrocja = async () => {
        try {
            const response = await fetch('/express/api/v1/podrocje/');
            const data = await response.json();
            setPodrocja(data);
        } catch (error) {
            console.error('Error fetching fields:', error);
        }
    };

    // Vloga CRUD
    const fetchVloge = async () => {
        try {
            const response = await fetch('/express/api/v1/vloga/');
            const data = await response.json();
            setVloge(data);
        } catch (error) {
            console.error('Error fetching roles:', error);
        }
    };

    const handleSubmit = async (type, formData) => {
        const configs = {
            members: {
                url: '/express/api/v1/clan/',
                setEditing: setEditingMember,
                setShowForm: setShowMemberForm,
                fetch: fetchMembers
            },
            jezik: {
                url: '/express/api/v1/jezik/',
                setEditing: setEditingJezik,
                setShowForm: setShowJezikForm,
                fetch: fetchJeziki
            },
            podrocje: {
                url: '/express/api/v1/podrocje/',
                setEditing: setEditingPodrocje,
                setShowForm: setShowPodrocjeForm,
                fetch: fetchPodrocja
            },
            vloga: {
                url: '/express/api/v1/vloga/',
                setEditing: setEditingVloga,
                setShowForm: setShowVlogaForm,
                fetch: fetchVloge
            }
        };

        const config = configs[type];
        const editing = type === 'members' ? editingMember :
            type === 'jezik' ? editingJezik :
                type === 'podrocje' ? editingPodrocje : editingVloga;

        try {
            const url = editing
                ? `${config.url}${editing.id}`
                : config.url;

            const response = await fetch(url, {
                method: editing ? 'PUT' : 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                config.fetch();
                config.setEditing(null);
                config.setShowForm(false);
            }
        } catch (error) {
            console.error('Error saving:', error);
        }
    };

    const handleDelete = async (type, id) => {
        const configs = {
            members: {
                url: '/express/api/v1/clan/',
                fetch: fetchMembers
            },
            jezik: {
                url: '/express/api/v1/jezik/',
                fetch: fetchJeziki
            },
            podrocje: {
                url: '/express/api/v1/podrocje/',
                fetch: fetchPodrocja
            },
            vloga: {
                url: '/express/api/v1/vloga/',
                fetch: fetchVloge
            }
        };

        if (window.confirm('Are you sure you want to delete this item?')) {
            try {
                const response = await fetch(`${configs[type].url}${id}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    configs[type].fetch();
                }
            } catch (error) {
                console.error('Error deleting:', error);
            }
        }
    };

    return (
        <div>
            <div>
                <button onClick={() => setActiveTab('members')}>Members</button>
                <button onClick={() => setActiveTab('jezik')}>Languages</button>
                <button onClick={() => setActiveTab('podrocje')}>Fields</button>
                <button onClick={() => setActiveTab('vloga')}>Roles</button>
            </div>

            {activeTab === 'members' && (
                <div>
                    <h2>Members Management</h2>
                    <button onClick={() => setShowMemberForm(true)}>Add New Member</button>
                    {showMemberForm ? (
                        <MemberForm
                            member={editingMember}
                            onSubmit={(formData) => handleSubmit('members', formData)}
                            onCancel={() => {
                                setEditingMember(null);
                                setShowMemberForm(false);
                            }}
                        />
                    ) : (
                        <MembersList
                            members={members}
                            onEdit={(member) => {
                                setEditingMember(member);
                                setShowMemberForm(true);
                            }}
                            onDelete={(id) => handleDelete('members', id)}
                        />
                    )}
                </div>
            )}

            {activeTab === 'jezik' && (
                <div>
                    <h2>Languages Management</h2>
                    <button onClick={() => setShowJezikForm(true)}>Add New Language</button>
                    {showJezikForm ? (
                        <JezikForm
                            jezik={editingJezik}
                            onSubmit={(formData) => handleSubmit('jezik', formData)}
                            onCancel={() => {
                                setEditingJezik(null);
                                setShowJezikForm(false);
                            }}
                        />
                    ) : (
                        <JezikList
                            jeziki={jeziki}
                            onEdit={(jezik) => {
                                setEditingJezik(jezik);
                                setShowJezikForm(true);
                            }}
                            onDelete={(id) => handleDelete('jezik', id)}
                        />
                    )}
                </div>
            )}

            {activeTab === 'podrocje' && (
                <div>
                    <h2>Fields Management</h2>
                    <button onClick={() => setShowPodrocjeForm(true)}>Add New Field</button>
                    {showPodrocjeForm ? (
                        <PodrocjeForm
                            podrocje={editingPodrocje}
                            onSubmit={(formData) => handleSubmit('podrocje', formData)}
                            onCancel={() => {
                                setEditingPodrocje(null);
                                setShowPodrocjeForm(false);
                            }}
                        />
                    ) : (
                        <PodrocjeList
                            podrocja={podrocja}
                            onEdit={(podrocje) => {
                                setEditingPodrocje(podrocje);
                                setShowPodrocjeForm(true);
                            }}
                            onDelete={(id) => handleDelete('podrocje', id)}
                        />
                    )}
                </div>
            )}

            {activeTab === 'vloga' && (
                <div>
                    <h2>Roles Management</h2>
                    <button onClick={() => setShowVlogaForm(true)}>Add New Role</button>
                    {showVlogaForm ? (
                        <VlogaForm
                            vloga={editingVloga}
                            onSubmit={(formData) => handleSubmit('vloga', formData)}
                            onCancel={() => {
                                setEditingVloga(null);
                                setShowVlogaForm(false);
                            }}
                        />
                    ) : (
                        <VlogaList
                            vloge={vloge}
                            onEdit={(vloga) => {
                                setEditingVloga(vloga);
                                setShowVlogaForm(true);
                            }}
                            onDelete={(id) => handleDelete('vloga', id)}
                        />
                    )}
                </div>
            )}
        </div>
    );
};

// Keep the MemberForm and MembersList components from before
const TranslationForm = ({translation, languages, fields, roles, onSubmit, onCancel}) => {
    const [formData, setFormData] = useState(translation || {
        rang: '',
        iz: '',
        v: '',
        licenca_DZTPS: false,
        podrocja: [],
        vloge: []
    });

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    Rang:
                    <input
                        type="text"
                        value={formData.rang}
                        onChange={(e) => setFormData({...formData, rang: e.target.value})}
                    />
                </label>
            </div>
            <div>
                <label>
                    From Language:
                    <select
                        value={formData.iz}
                        onChange={(e) => setFormData({...formData, iz: e.target.value})}
                        required
                    >
                        <option value="">Select language...</option>
                        {languages.map(lang => (
                            <option key={lang.id} value={lang.jezik}>{lang.jezik}</option>
                        ))}
                    </select>
                </label>
            </div>
            <div>
                <label>
                    To Language:
                    <select
                        value={formData.v}
                        onChange={(e) => setFormData({...formData, v: e.target.value})}
                        required
                    >
                        <option value="">Select language...</option>
                        {languages.map(lang => (
                            <option key={lang.id} value={lang.jezik}>{lang.jezik}</option>
                        ))}
                    </select>
                </label>
            </div>
            <div>
                <label>
                    Licenca DZTPS:
                    <input
                        type="checkbox"
                        checked={formData.licenca_DZTPS}
                        onChange={(e) => setFormData({...formData, licenca_DZTPS: e.target.checked})}
                    />
                </label>
            </div>
            <div>
                <label>Fields:</label>
                {fields.map(field => (
                    <div key={field.id}>
                        <label>
                            <input
                                type="checkbox"
                                checked={formData.podrocja.some(p => p.id === field.id)}
                                onChange={(e) => {
                                    const newPodrocja = e.target.checked
                                        ? [...formData.podrocja, field]
                                        : formData.podrocja.filter(p => p.id !== field.id);
                                    setFormData({...formData, podrocja: newPodrocja});
                                }}
                            />
                            {field.podrocje}
                        </label>
                    </div>
                ))}
            </div>
            <div>
                <label>Roles:</label>
                {roles.map(role => (
                    <div key={role.id}>
                        <label>
                            <input
                                type="checkbox"
                                checked={formData.vloge.some(v => v.id === role.id)}
                                onChange={(e) => {
                                    const newVloge = e.target.checked
                                        ? [...formData.vloge, role]
                                        : formData.vloge.filter(v => v.id !== role.id);
                                    setFormData({...formData, vloge: newVloge});
                                }}
                            />
                            {role.vloga}
                        </label>
                    </div>
                ))}
            </div>
            <div>
                <button type="submit">{translation ? 'Update' : 'Add'} Translation</button>
                <button type="button" onClick={onCancel}>Cancel</button>
            </div>
        </form>
    );
};

const TranslationsList = ({translations, onEdit, onDelete}) => (
    <table>
        <thead>
        <tr>
            <th>From</th>
            <th>To</th>
            <th>Rank</th>
            <th>License</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        {translations.map(translation => (
            <tr key={translation.id}>
                <td>{translation.iz}</td>
                <td>{translation.v}</td>
                <td>{translation.rang}</td>
                <td>{translation.licenca_DZTPS ? 'Yes' : 'No'}</td>
                <td>
                    <button onClick={() => onEdit(translation)}>Edit</button>
                    <button onClick={() => onDelete(translation.id)}>Delete</button>
                </td>
            </tr>
        ))}
        </tbody>
    </table>
);

const MemberForm = ({member, onSubmit, onCancel}) => {
    const [translations, setTranslations] = useState([]);
    const [languages, setLanguages] = useState([]);
    const [fields, setFields] = useState([]);
    const [roles, setRoles] = useState([]);
    const [showTranslationForm, setShowTranslationForm] = useState(false);
    const [editingTranslation, setEditingTranslation] = useState(null);

    useEffect(() => {
        if (member) {
            fetchTranslations();
        }
        fetchLanguages();
        fetchFields();
        fetchRoles();
    }, [member]);

    const fetchTranslations = async () => {
        try {
            const response = await fetch(`/express/api/v1/clan/${member.id}/prevod/`);
            const data = await response.json();
            setTranslations(data);
        } catch (error) {
            console.error('Error fetching translations:', error);
        }
    };

    const fetchLanguages = async () => {
        try {
            const response = await fetch('/express/api/v1/jezik/');
            const data = await response.json();
            setLanguages(data);
        } catch (error) {
            console.error('Error fetching languages:', error);
        }
    };

    const fetchFields = async () => {
        try {
            const response = await fetch('/express/api/v1/podrocje/');
            const data = await response.json();
            setFields(data);
        } catch (error) {
            console.error('Error fetching fields:', error);
        }
    };

    const fetchRoles = async () => {
        try {
            const response = await fetch('/express/api/v1/vloga/');
            const data = await response.json();
            setRoles(data);
        } catch (error) {
            console.error('Error fetching roles:', error);
        }
    };

    const handleTranslationSubmit = async (translationData) => {
        try {
            const url = editingTranslation
                ? `/express/api/v1/clan/${member.id}/prevod/${editingTranslation.id}`
                : `/express/api/v1/clan/${member.id}/prevod/`;

            const response = await fetch(url, {
                method: editingTranslation ? 'PUT' : 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    ...translationData,
                    id_clan: member.id
                }),
            });

            if (response.ok) {
                fetchTranslations();
                setEditingTranslation(null);
                setShowTranslationForm(false);
            }
        } catch (error) {
            console.error('Error saving translation:', error);
        }
    };

    const handleTranslationDelete = async (id) => {
        if (window.confirm('Are you sure you want to delete this translation?')) {
            try {
                const response = await fetch(`/express/api/v1/clan/${member.id}/prevod/${id}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    fetchTranslations();
                }
            } catch (error) {
                console.error('Error deleting translation:', error);
            }
        }
    };

    const [formData, setFormData] = useState(member || {
        id_izkaznica: '',
        ime: '',
        priimek: '',
        spol: '',
        datum_rojstva: '',
        kraj_rojstva: '',
        drzavljanstvo: '',
        solska_izobrazba: '',
        telefondoma: '',
        telefonsluzba: '',
        telefonmobi: '',
        email: '',
        spletnastran: '',
        naslovbivalisca: '',
        ulica: '',
        postna_stevilka: '',
        posta: '',
        osnovni_poklic: '',
        sedanja_zaposlitev: '',
        prevajalska_praksa: '',
        nacin_pridobivanja_znanja_tujih_jezikov: '',
        datum_vclanitve: '',
        materni_jezik: '',
        objava_v_iskalniku: false
    });

    const handleChange = (e) => {
        const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
        setFormData({...formData, [e.target.name]: value});
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    ID Izkaznica:
                    <input
                        type="number"
                        name="id_izkaznica"
                        value={formData.id_izkaznica}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Ime:
                    <input
                        type="text"
                        name="ime"
                        value={formData.ime}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Priimek:
                    <input
                        type="text"
                        name="priimek"
                        value={formData.priimek}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Spol:
                    <select name="spol" value={formData.spol} onChange={handleChange} required>
                        <option value="">Select...</option>
                        <option value="M">Moški</option>
                        <option value="Ž">Ženski</option>
                    </select>
                </label>
            </div>
            <div>
                <label>
                    Datum rojstva:
                    <input
                        type="date"
                        name="datum_rojstva"
                        value={formData.datum_rojstva}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Kraj rojstva:
                    <input
                        type="text"
                        name="kraj_rojstva"
                        value={formData.kraj_rojstva}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Državljanstvo:
                    <input
                        type="text"
                        name="drzavljanstvo"
                        value={formData.drzavljanstvo}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Šolska izobrazba:
                    <input
                        type="text"
                        name="solska_izobrazba"
                        value={formData.solska_izobrazba}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Telefon (doma):
                    <input
                        type="tel"
                        name="telefondoma"
                        value={formData.telefondoma}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Telefon (služba):
                    <input
                        type="tel"
                        name="telefonsluzba"
                        value={formData.telefonsluzba}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Mobilni telefon:
                    <input
                        type="tel"
                        name="telefonmobi"
                        value={formData.telefonmobi}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Email:
                    <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Spletna stran:
                    <input
                        type="url"
                        name="spletnastran"
                        value={formData.spletnastran}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Naslov bivališča:
                    <input
                        type="text"
                        name="naslovbivalisca"
                        value={formData.naslovbivalisca}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Ulica:
                    <input
                        type="text"
                        name="ulica"
                        value={formData.ulica}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Poštna številka:
                    <input
                        type="text"
                        name="postna_stevilka"
                        value={formData.postna_stevilka}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Pošta:
                    <input
                        type="text"
                        name="posta"
                        value={formData.posta}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Osnovni poklic:
                    <input
                        type="text"
                        name="osnovni_poklic"
                        value={formData.osnovni_poklic}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Sedanja zaposlitev:
                    <input
                        type="text"
                        name="sedanja_zaposlitev"
                        value={formData.sedanja_zaposlitev}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Prevajalska praksa:
                    <input
                        type="text"
                        name="prevajalska_praksa"
                        value={formData.prevajalska_praksa}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Način pridobivanja znanja tujih jezikov:
                    <input
                        type="text"
                        name="nacin_pridobivanja_znanja_tujih_jezikov"
                        value={formData.nacin_pridobivanja_znanja_tujih_jezikov}
                        onChange={handleChange}
                        required
                    />
                </label>
            </div>
            <div>
                <label>
                    Datum včlanitve:
                    <input
                        type="date"
                        name="datum_vclanitve"
                        value={formData.datum_vclanitve}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Materni jezik:
                    <input
                        type="text"
                        name="materni_jezik"
                        value={formData.materni_jezik}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <label>
                    Objava v iskalniku:
                    <input
                        type="checkbox"
                        name="objava_v_iskalniku"
                        checked={formData.objava_v_iskalniku}
                        onChange={handleChange}
                    />
                </label>
            </div>
            <div>
                <button type="submit">{member ? 'Update' : 'Add'} Member</button>
                <button type="button" onClick={onCancel}>Cancel</button>
            </div>
        </form>

    {
        member && (
            <div>
                <h3>Translations</h3>
                <button onClick={() => setShowTranslationForm(true)}>Add New Translation</button>

                {showTranslationForm ? (
                    <TranslationForm
                        translation={editingTranslation}
                        languages={languages}
                        fields={fields}
                        roles={roles}
                        onSubmit={handleTranslationSubmit}
                        onCancel={() => {
                            setEditingTranslation(null);
                            setShowTranslationForm(false);
                        }}
                    />
                ) : (
                    <TranslationsList
                        translations={translations}
                        onEdit={(translation) => {
                            setEditingTranslation(translation);
                            setShowTranslationForm(true);
                        }}
                        onDelete={handleTranslationDelete}
                    />
                )}
            </div>
        )
    }
)
    ;
};

const MembersList = ({members, onEdit, onDelete}) => {
    return (
        <div>
            <h2>Members List</h2>
            <table>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Surname</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {members.map(member => (
                    <tr key={member.id}>
                        <td>{member.id_izkaznica}</td>
                        <td>{member.ime}</td>
                        <td>{member.priimek}</td>
                        <td>{member.email}</td>
                        <td>
                            <button onClick={() => onEdit(member)}>Edit</button>
                            <button onClick={() => onDelete(member.id)}>Delete</button>
                        </td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    );
};

export default App;