import React, {useEffect, useRef, useState} from "react";

// 🛠 UI Components
import SearchBar from "../../../UI/SearchBar/SearchBar";
import ProjectsList from "./ProjectsList";
import TextColumn from "../../../UI/DuaList/Columns/TextColumn";
import MakeCustomRadioSelect from "../../../UI/Forms/CustomSelect/MakeCustomRadioSelect";

// 🖼 Assets
import SearchIcon from "../../../SVG/SearchIcon";

// 🧩 Types & API
import {Order} from "../../../UI/DuaList/ListHeader/ListHead";
import {GetRescomProjectParams, RescomProject} from "../../../../models/Rescom/RescomProjects";
import {CustomSelectOptions} from "../../../../models/ReactComponents";
import {getRescomProjects, getRescomProjectsFilters} from "../../../../API/rescom";

// 🪝 Hooks
import useListControl from "../../../../hooks/useListControl";
import useLoading from "../../../../hooks/useLoading";
import {toArr} from "../../../../helpers/functions";
import useRole from "../../../../hooks/useRole";
import SelectFiltersWrapper from "../../../UI/StatusFilter/SelectFiltersWrapper";
import InfopointWrapper from "../../../UI/InfopointWrapper/InfopointWrapper";


const RescomProjectsList = () => {

    // -----------------------------
    // CSV Export Headers
    // -----------------------------
    const csvHeaders = [
        {label: "Κατάσταση", key: "ui_status"},
        {label: "Φάση", key: "project_status"},
        {label: "Τύπος", key: "project_entity"},
        {label: "Κωδικός", key: "project_code"},
        {label: "Τίτλος", key: "project_title_el"},
        {label: "Ημερομηνία Έναρξης", key: "project_start_date"},
        {label: "Ημερομηνία Λήξης", key: "project_end_date"},
        {label: "Διάρκεια", key: "project_duration"},
        {label: "Προυπολογισμός", key: "project_ncsr_budget"},
        {label: "Οργανική Μονάδα", key: "unit_acronym"},
        {label: "Επιστημονκός Υπεύθυνος", key: "scientific_supervisor_fullname"},
        {label: "A1", key: "a1_ready"},
    ];

    // -----------------------------
    // Utility Function
    // -----------------------------

    const activeRole = useRole();

    // -----------------------------
    // Initial API Params
    // -----------------------------


    const InitParams = (role: string): GetRescomProjectParams => ({
        order: "ASC",
        order_by: "project_end_date",
        page: 1,
        page_size: 10,
        search: "",
        ui_status: "active",
        project_status_id: 1,
        unit_code: "",
        project_entity: "0",
        role, // ✅ include role here
    });

    // -----------------------------
    // Project List State & Hooks
    // -----------------------------
    const [projects, projectsParams, setProjectsParams, fetchProjects, _, exportList] =
        useListControl<GetRescomProjectParams, RescomProject>(
            InitParams(activeRole),
            getRescomProjects,
            csvHeaders
        );

    // Fetch projects whenever activeRole changes
    useEffect(() => {
        if (!activeRole) return;
        setProjectsParams(prev => ({ ...prev, role: activeRole, page: 1 }));
        fetchProjects();
    }, [activeRole]);

    const [isLoading, setIsLoading] = useLoading(true);

    // -----------------------------
    // Filters State
    // -----------------------------
    const [phases, setPhases] = useState<Record<string, CustomSelectOptions>>();
    const [uiStatuses, setUiStatuses] = useState<Record<string, CustomSelectOptions>>();
    const [types, setTypes] = useState<Record<string, CustomSelectOptions>>();
    const [units, setUnits] = useState<Record<string, CustomSelectOptions>>();

    const reqIdRef = useRef(0);

    // -----------------------------
    // Handle Search Input
    // -----------------------------
    const handleSearch = (s: string) => {
        setProjectsParams({
            ...projectsParams,
            page: 1,
            search: s,
        });
    };

    // -----------------------------
    // Fetch Filters
    // -----------------------------
    useEffect(() => {
        let cancelled = false;
        const myReqId = ++reqIdRef.current;

        const fetchFilters = async (activeRole: string) => {
            if (!activeRole) return;
            try {
                const res = await getRescomProjectsFilters(activeRole);
                if (cancelled || myReqId !== reqIdRef.current) return;

                const data = res?.data;
                if (!data) return;

                // Set filter options if they exist
                if (toArr(data.entities).length) setTypes(data.entities);
                if (toArr(data.phases).length) setPhases(data.phases);
                if (toArr(data.ui_statuses).length) setUiStatuses(data.ui_statuses);

                // Units logic
                // @ts-ignore
                const unitsArr: CustomSelectOptions[number][] = toArr(data.units);
                if (unitsArr.length) {
                    setUnits(data.units);

                    // Auto-select if exactly 1 unit and nothing selected yet
                    if (unitsArr.length === 1 && !projectsParams.unit_code) {
                        const onlyUnit = unitsArr[0];
                        setProjectsParams(prev => ({
                            ...prev,
                            unit_code: String(onlyUnit.value),
                            page: 1,
                        }));
                    }
                }
            } catch (e) {
                console.error("Failed to load filters:", e);
            } finally {
                if (!cancelled && myReqId === reqIdRef.current) setIsLoading(false);
            }
        };

        fetchFilters(activeRole);
        return () => {
            cancelled = true;
        };
    }, [activeRole]);

    // -----------------------------
    // Render Component
    // -----------------------------

    return (
        <div className="rescom-erga-container">
            <div className="erga-list-wrapper">

                {/* 🔍 Search + Filters Section */}
                <div className="search-wrapper row mb-3 gap-4">
                    <div className="col">
                        {/* Search Bar */}
                        <SearchBar
                            onSearch={handleSearch}
                            value={projectsParams.search}
                            placeholder={`Αναζητήστε με βάση τον Κωδικό, τον Τίτλο ή τον Επιστημονικό Υπεύθυνο, έτος έναρξης/λήξης (${projects?.metadata?.total_count ?? '00'})`}
                        >
                            <div className="img-container"><SearchIcon/></div>
                            <div className="search-divider"></div>
                        </SearchBar>
                            <div
                                style={projects?.records.length ? { width: "calc(100% - 160px)" } : undefined}
                                className="d-flex justify-content-between align-items-baseline"
                            >
                            {/* Filters */}
                                {/* eslint-disable-next-line react/jsx-no-undef */}
                            <SelectFiltersWrapper>
                                {/* Unit Filter */}
                                <MakeCustomRadioSelect
                                    selectAllOption={'Όλες οι Οργανικές μονάδες'}
                                    selectAllOptionValue={""}
                                    theme="search-listbox-blue"
                                    placeholder="Οργανική Μονάδα"
                                    disabled={(units?.length ?? 0) <= 1}
                                    value={projectsParams.unit_code}
                                    handleChange={(v) =>
                                        setProjectsParams({...projectsParams, page: 1, unit_code: v})
                                    }
                                    // @ts-ignore
                                    options={units ?? []}
                                />

                                {/* Type Filter */}
                                <MakeCustomRadioSelect
                                    selectAllOptionValue={'0'}
                                    selectAllOption="Τύπος"
                                    theme="search-listbox-blue"
                                    placeholder="Τύπος"
                                    disabled={(types?.length ?? 0) <= 1}
                                    value={projectsParams.project_entity}
                                    handleChange={(v) =>
                                        setProjectsParams({...projectsParams, page: 1, project_entity: v})
                                    }
                                    // @ts-ignore
                                    options={types ?? []}
                                />

                                {/* Status Filter */}
                                <MakeCustomRadioSelect
                                    selectAllOption="Όλες οι Καταστάσεις"
                                    theme="search-listbox-blue"
                                    placeholder="Κατάσταση"
                                    disabled={(uiStatuses?.length ?? 0) <= 1}
                                    value={projectsParams.ui_status}
                                    handleChange={(v) =>
                                        setProjectsParams({...projectsParams, page: 1, ui_status: v})
                                    }
                                    // @ts-ignore
                                    options={uiStatuses ?? []}
                                />

                                {/* Phase Filter */}
                                <MakeCustomRadioSelect
                                    theme="search-listbox-blue"
                                    placeholder="Φάση"
                                    disabled={(phases?.length ?? 0) <= 1}
                                    value={Number(projectsParams.project_status_id)}
                                    handleChange={(v) =>
                                        setProjectsParams({...projectsParams, page: 1, project_status_id: Number(v)})
                                    }
                                    // @ts-ignore
                                    options={phases ?? []}
                                />
                            </SelectFiltersWrapper>
                            </div>

                    </div>
                </div>

                {/* 📋 Projects List Section */}
                <div className="projects-list-wrapper">
                    {projects && (
                        <>
                            {/* Projects Table */}
                            <ProjectsList
                                orderParams={{
                                    order: projectsParams.order,
                                    order_by: projectsParams.order_by,
                                    setOrder: (order_by: string, order: Order) =>
                                        setProjectsParams({...projectsParams, order, order_by}),
                                }}
                                updateProjects={fetchProjects}
                                exportList={exportList}
                                setPage={(p) => setProjectsParams({...projectsParams, page: p})}
                                setPerPage={(p) =>
                                    setProjectsParams({...projectsParams, page: 1, page_size: p})
                                }
                                lastFetched={projects?.last_fetched}
                                projects={projects}
                            />

                            {/* ℹ️ InfoPoint */}
                            <InfopointWrapper> <TextColumn indicator onOff flex="0 1 150px" title="κατάσταση έργου"> <b>ΕΝΕΡΓΟ
                                ΕΡΓΟ</b> </TextColumn> <TextColumn indicator={false} onOff={false} flex="0 1 150px"
                                                                   title="κατάσταση έργου"> <b>ΑΝΕΝΕΡΓΟ ΕΡΓΟ</b>
                            </TextColumn>
                            {/*    <SidebarButtonWithOverlay title={'Πληροφορίες Χρήσεως Λίστας Έργων'}*/}
                            {/*                                        icon={infopoint}>*/}
                            {/*    <div className='rescom-projects-info-point'>*/}
                            {/*        <div className="sidebar-header-content"> {infopoint &&*/}
                            {/*            <img src={infopoint} alt="icon" className="sidebar-icon"/>} <h3> Πληροφορίες*/}
                            {/*            Χρήσεως Λίστας Συμβάσεων</h3></div>*/}
                            {/*        <div className='inner-content-container'><p>Ακολουθούν μερικά απλά βήματα για να*/}
                            {/*            ξεκινήσεις:</p></div>*/}
                            {/*        <div className='inner-content-container'><p className='inner-title'>1.*/}
                            {/*            Εγγραφή/Σύνδεση</p> <p>Δημιούργησε λογαριασμό ή συνδέσου με τον υπάρχοντα για να*/}
                            {/*            έχεις πλήρη πρόσβαση στις λειτουργίες.</p></div>*/}
                            {/*        <div className='inner-content-container'><p className='inner-title'>2. Αρχική*/}
                            {/*            Οθόνη</p> <p>Από εδώ μπορείς να περιηγηθείς στις βασικές λειτουργίες της*/}
                            {/*            εφαρμογής. Χρησιμοποίησε το μενού για γρήγορη πρόσβαση</p></div>*/}
                            {/*        <div className='inner-content-container'><p className='inner-title'>3. Προφίλ*/}
                            {/*            Χρήστη</p> <p>Εδώ διαχειρίζεσαι τις προσωπικές σου πληροφορίες και*/}
                            {/*            ρυθμίσεις.</p></div>*/}
                            {/*        <div className='inner-content-container'><p className='inner-title'>4.*/}
                            {/*            Ειδοποιήσεις</p> <p>Μείνε ενημερωμένος με νέα και υπενθυμίσεις, όλα σε ένα*/}
                            {/*            σημείο.</p></div>*/}
                            {/*        <div className='inner-content-container'><p className='inner-title'>5.*/}
                            {/*            Υποστήριξη</p> <p>Έχεις απορίες; Πήγαινε στις Ρυθμίσεις &gt; Υποστήριξη ή στείλε*/}
                            {/*            μας μήνυμα μέσω της φόρμας επικοινωνίας.</p></div>*/}
                            {/*        <div className='inner-content-container'><p>Καλή χρήση!</p> <p>Η ομάδα της D.U.A.*/}
                            {/*            Platform είναι πάντα δίπλα σου</p></div>*/}
                            {/*        <div className='info-point-footer-container'>*/}
                            {/*            <div className='guidehelper-container'><GuideHelperAlt><p> Έχετε περισσότερες*/}
                            {/*                απορίες; Στείλτε ticket στο support πατώντας <LinkWithRole*/}
                            {/*                    inheritRole={'dua_user'}*/}
                            {/*                    to={'/applications/support/services/ticket/add'}><span*/}
                            {/*                    className='guidehelper-link'>εδώ</span></LinkWithRole></p>*/}
                            {/*            </GuideHelperAlt></div>*/}
                            {/*            <img className='info-point-footer-logo' src={logo}/> <p*/}
                            {/*            className='egov-link-container'>Mάθετε περισσότερα στο <a target='_blank'*/}
                            {/*                                                                      href='https://egov.demokritos.gr/'>egov.demokritos.gr</a>*/}
                            {/*        </p></div>*/}
                            {/*    </div>*/}
                            {/*</SidebarButtonWithOverlay>*/}
                            </InfopointWrapper>
                        </>
                    )}
                </div>

            </div>
        </div>
    );
};

    export default RescomProjectsList;