import React, { FormEvent, useContext, useEffect, useState } from 'react';
import ActionModal from "../../../../UI/Modal/ActionsModal/ActionModal";
import Typography from "../../../../UI/Typography/Typography";
import CustomFormSection from "../../../../UI/Forms/CustomFormSection/CustomFormSection";
import CustomLabel from "../../../../UI/Forms/CustomLabel/CustomLabel";
import FormButtonsContainer from "../../../../UI/Forms/FormButton/FormButtonsContainer";
import FormButtonSubmit from "../../../../UI/Forms/FormButton/FormButtonSubmit";
import CustomFileUpload from "../../../../UI/Forms/CustomFileUpload/CustomFileUpload";
import { Subfolder } from "../../../../../models/HrSupport/PersonalFolder";
import MakeCustomSelect from "../../../../UI/Forms/CustomSelect/MakeCustomSelect";
import {getFileCategoriesFiltered} from "../../../../../API/hr_support";
import { CustomSelectOptions } from "../../../../../models/ReactComponents";
import EmployeeContext from "../../employeeContext";
import useRole from "../../../../../hooks/useRole";

type AddFileModalProps = {
    close: () => void;
    subfolders: Subfolder[];
    handleFileUpload: (data: Record<string, any>) => Promise<boolean>;
    initSubfolder: string | null | number;
    roleProp?: string;
};

const CATEGORY_ACCEPT_MAP: Record<number, string> = {
    // Group 1 — Σύμβαση Παλιό
    18: 'application/pdf',                    // Αρχείο Σύμβασης Παλιό
    19: 'application/pdf',                    // Αίτηση Σύμβασης Παλιό
    20: 'application/pdf',                    // Τροποποιήσεις Σύμβασης Παλιό

    // Group 2 — Πτυχίο / Βεβαίωση / Ταυτότητα
    7:  'application/pdf,image/jpeg,image/png',   // Πτυχίο — pdf or image
    8:  'application/pdf',                         // Βεβαίωση
    6:  'application/pdf',                         // Ταυτότητα

    // Group 3 — Δελτίο Κίνησης / Α1-Δ1
    21: 'application/pdf,image/jpeg,image/png',   // Δελτίο Κίνησης Παλιό — pdf or image
    22: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel', // Α1-Δ1 excel
    23: 'application/pdf',                         // Α1-Δ1 pdf

    // Group 4
    16: 'application/pdf',
    24: 'application/pdf',
    25: 'application/pdf',
    26: 'application/pdf',
};
const AddFileModal = ({ close, initSubfolder, roleProp, subfolders, handleFileUpload }: AddFileModalProps) => {

    const activeRole = useRole();
    const { employee } = useContext(EmployeeContext);
    const [fileCategories, setFileCategories] = useState<CustomSelectOptions>([]);
    const [formData, setFormData] = useState({
        role: roleProp ?? '',
        file_category_id: 0,
        subfolder_id_emergency: initSubfolder,
        user_id: employee.user.id,
        file: [] as File[],
    });

    // Derive accepted file types from the selected category
    const acceptedTypes = CATEGORY_ACCEPT_MAP[formData.file_category_id] ?? undefined;

    useEffect(() => {
        if (!formData.subfolder_id_emergency) return;
        (async () => {
            const res = await getFileCategoriesFiltered(activeRole, formData.subfolder_id_emergency);
            setFileCategories(res.data);
        })();
    }, [formData.subfolder_id_emergency]);

    const validateForm = () => formData.file.length > 0 && formData.file_category_id > 0;
    const isMultiple = formData.file.length > 1;
    const handleFormSubmit = async (e: FormEvent) => {
        e.preventDefault();
        if (await handleFileUpload(formData)) {
            close();
        }
    };

    return (
        <ActionModal
            onClose={close}
            hasCloseButton
            title={
                <>
                    {isMultiple ? 'Προσθήκη Αρχείων' : 'Προσθήκη Αρχείου'} / <span>{employee.user.firstname} {employee.user.lastname}</span>
                </>
            }
        >
            <form onSubmit={handleFormSubmit}>
                <Typography tag={'p'} fontSize={'1.6rem'} color='#707070' marginBottom={'30px'}>
                    Παρακαλώ επιλέξτε <b>υποφάκελο, κατηγορία αρχείου</b> και προσθέστε αρχείο/αρχεία.
                </Typography>

                <CustomFormSection>
                    <div className="row justify-content-center g-5">
                        <div className="col-md-6">
                            <CustomLabel>ΕΠΙΛΟΓΗ ΥΠΟΦΑΚΕΛΟΥ</CustomLabel>
                            <MakeCustomSelect
                                options={subfolders}
                                handleChange={(v) =>
                                    setFormData({
                                        ...formData,
                                        subfolder_id_emergency: v,
                                        file_category_id: 0,
                                        file: [], // reset files when subfolder changes
                                    })
                                }
                                value={formData.subfolder_id_emergency}
                            />
                        </div>

                        <div className="col-md-6">
                            <CustomLabel>ΕΠΙΛΟΓΗ ΚΑΤΗΓΟΡΙΑΣ ΑΡΧΕΙΟΥ</CustomLabel>
                            <MakeCustomSelect
                                disabled={!formData.subfolder_id_emergency}
                                options={fileCategories}
                                handleChange={(v) =>
                                    setFormData({
                                        ...formData,
                                        file_category_id: v,
                                        subfolder_id_emergency:
                                            v === 2 ? '7' : v === 4 ? '8' : formData.subfolder_id_emergency,
                                        file: [], // reset files when category changes
                                    })
                                }
                                value={formData.file_category_id}
                            />
                        </div>

                        <div className="col-12">
                            <CustomFileUpload
                                multiple
                                accept={acceptedTypes}              // 👈 driven by category
                                disabled={!formData.file_category_id || formData.file_category_id===0} // 👈 block upload until category chosen
                                file={formData.file}
                                onChange={(files: File[]) =>
                                    setFormData({ ...formData, file: files })
                                }
                            />
                        </div>
                    </div>
                </CustomFormSection>

                <FormButtonsContainer justify={'center'}>
                    <FormButtonSubmit disabled={!validateForm()}>
                        {isMultiple ? 'ΠΡΟΣΘΗΚΗ ΑΡΧΕΙΩΝ' : 'ΠΡΟΣΘΗΚΗ ΑΡΧΕΙΟΥ'}
                    </FormButtonSubmit>
                </FormButtonsContainer>
            </form>
        </ActionModal>
    );
};

export default AddFileModal;