import React, { useEffect, useState } from "react";
import { exportToCSV, exportToExcel, printTable, exportToPDF } from "../../utils/tableExportUtils";

const DirectoryPageHeader = ({
    searchText,
    setSearchText,
    setIsActive,
    viewType,
    setViewType,
    filteredBuckets,
    tempSelectedBucketIds,
    handleTempBucketChange,
    filteredCategories,
    tempSelectedCategoryIds,
    handleTempCategoryChange,
    clearFilter,
    applyFilter,
    loading,
    IsActive,
    contactsToExport,
    notesToExport,
    selectedNoteNames,
    setSelectedNoteNames,
    notesForFilter,
    setFilterAppliedNotes
}) => {
    const [filtered, setFiltered] = useState(0);
    const [filteredNotes, setFilteredNotes] = useState([]);
    const [noteCreators, setNoteCreators] = useState([]);
    const [allCreators, setAllCreators] = useState([]);
    const [allOrganizations, setAllOrganizations] = useState([]);
    const [filteredOrganizations, setFilteredOrganizations] = useState([]);
    const [selectedCreators, setSelectedCreators] = useState([]);
    const [selectedOrgs, setSelectedOrgs] = useState([]);

    useEffect(() => {
        setFiltered(tempSelectedBucketIds?.length + tempSelectedCategoryIds?.length);
    }, [tempSelectedBucketIds, tempSelectedCategoryIds]);

    // New state to track active filters for notes
    const [notesFilterCount, setNotesFilterCount] = useState(0);

    useEffect(() => {
        // Calculate the number of active filters for notes
        setNotesFilterCount(selectedCreators.length + selectedOrgs.length);
    }, [selectedCreators, selectedOrgs]);

    useEffect(() => {
        if (viewType === "notes") {
            if (notesToExport && notesToExport.length > 0) {
                const uniqueNames = [...new Set(notesToExport.map(note => {
                    const firstName = note.createdBy?.firstName || "";
                    const lastName = note.createdBy?.lastName || "";
                    return `${firstName} ${lastName}`.trim();
                }).filter(name => name !== ""))];
                setNoteCreators(uniqueNames.sort());
            } else {
                setNoteCreators([]);
            }
        } else {
            setNoteCreators([]);
        }
    }, [notesToExport, viewType]);

    // Separate effect to clear selection only when switching away from notes
    useEffect(() => {
        if (viewType !== "notes" && selectedNoteNames.length > 0) {
            setSelectedNoteNames([]);
        }
    }, [viewType]);

    useEffect(() => {
        const creatorsSet = new Set();
        const orgsSet = new Set();

        notesForFilter.forEach((note) => {
            const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
            if (creator) creatorsSet.add(creator);

            const org = note.organizationName;
            if (org) orgsSet.add(org);
        });

        setAllCreators([...creatorsSet].sort());
        setAllOrganizations([...orgsSet].sort());
        setFilteredOrganizations([...orgsSet].sort());
    }, [notesForFilter])


    const handleToggleNoteName = (name) => {
        setSelectedNoteNames(prevSelectedNames => {
            if (prevSelectedNames.includes(name)) {
                return prevSelectedNames.filter(n => n !== name);
            } else {
                return [...prevSelectedNames, name];
            }
        });
    };

    const updateFilteredOrganizations = () => {
        if (selectedCreators.length === 0) {
            setFilteredOrganizations(allOrganizations);
            return;
        }

        const filteredOrgsSet = new Set();
        notesForFilter.forEach((note) => {
            const creator = `${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`.trim();
            if (selectedCreators.includes(creator)) {
                if (note.organizationName) {
                    filteredOrgsSet.add(note.organizationName);
                }
            }
        });

        setFilteredOrganizations([...filteredOrgsSet].sort());
    };

    const handleToggleCreator = (name) => {
        const updated = selectedCreators.includes(name)
            ? selectedCreators.filter((n) => n !== name)
            : [...selectedCreators, name];

        setSelectedCreators(updated);
    };

    const handleToggleOrg = (name) => {
        const updated = selectedOrgs.includes(name)
            ? selectedOrgs.filter((n) => n !== name)
            : [...selectedOrgs, name];

        setSelectedOrgs(updated);
    };

    const handleExport = (type) => {
        let dataToExport = [];

        if (viewType === "notes") {
            if (!notesToExport || notesToExport.length === 0) {
                console.warn("No notes to export.");
                return;
            }

            const decodeHtmlEntities = (html) => {
                const textarea = document.createElement("textarea");
                textarea.innerHTML = html;
                return textarea.value;
            };

            const cleanNoteText = (html) => {
                if (!html) return "";
                const stripped = html.replace(/<[^>]+>/g, "");
                const decoded = decodeHtmlEntities(stripped);
                return decoded.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
            };

            const cleanName = (name) => {
                if (!name) return "";
                return name.replace(/\u00A0/g, " ").replace(/\s+/g, " ").trim();
            };

            dataToExport = notesToExport.map(note => ({
                "Name": cleanName(`${note.createdBy?.firstName || ""} ${note.createdBy?.lastName || ""}`),
                "Notes": cleanNoteText(note.note),
                "Created At": note.createdAt
                    ? new Date(note.createdAt).toLocaleString("en-IN")
                    : "",
                "Updated At": note.updatedAt
                    ? new Date(note.updatedAt).toLocaleString("en-IN")
                    : "",
                "Updated By": cleanName(
                    `${note.updatedBy?.firstName || ""} ${note.updatedBy?.lastName || ""}`
                ),
            }));

        } else {
            if (!contactsToExport || contactsToExport.length === 0) {
                console.warn("No contacts to export.");
                return;
            }

            dataToExport = contactsToExport.map(contact => ({
                Name: contact.name || '',
                Organization: contact.organization || '',
                Email: contact.contactEmails?.map(email => email.emailAddress).join(', ') || '',
                Phone: contact.contactPhones?.map(phone => phone.phoneNumber).join(', ') || '',
                Category: contact.contactCategory?.name || '',
                Tags: contact.tags?.map(tag => tag.name).join(', ') || '',
            }));
        }

        const today = new Date();
        const formattedDate = `${today.getFullYear()}${String(today.getMonth() + 1).padStart(2, '0')}${String(today.getDate()).padStart(2, '0')}`;

        const filename =
            viewType === "notes"
                ? `Directory_Notes_${formattedDate}`
                : `Directory_Contacts_${formattedDate}`;

        switch (type) {
            case "csv":
                exportToCSV(dataToExport, filename);
                break;
            case "excel":
                exportToExcel(dataToExport, filename);
                break;
            case "pdf":
                exportToPDF(dataToExport, filename);
                break;
            case "print":
                printTable(dataToExport, filename);
                break;
            default:
                break;
        }
    };

    const applyCombinedFilter = () => {
        const lowerSearch = searchText?.toLowerCase() || "";

        const filtered = notesForFilter.filter((noteItem) => {
            const creator = `${noteItem.createdBy?.firstName || ""} ${noteItem.createdBy?.lastName || ""}`.trim();
            const org = noteItem.organizationName;

            const matchesCreator = selectedCreators.length === 0 || selectedCreators.includes(creator);
            const matchesOrg = selectedOrgs.length === 0 || selectedOrgs.includes(org);

            const plainNote = noteItem?.note?.replace(/<[^>]+>/g, "").toLowerCase();

            const stringValues = [];
            const extractStrings = (obj) => {
                for (const key in obj) {
                    const value = obj[key];
                    if (typeof value === "string") {
                        stringValues.push(value.toLowerCase());
                    } else if (typeof value === "object" && value !== null) {
                        extractStrings(value);
                    }
                }
            };
            extractStrings(noteItem);
            stringValues.push(plainNote, creator.toLowerCase());

            const matchesSearch = stringValues.some((val) => val.includes(lowerSearch));

            return matchesCreator && matchesOrg && matchesSearch;
        });

        setFilteredNotes(filtered);
        setFilterAppliedNotes(filtered);
    };

    return (
        <>
            <div className="row mx-0 px-0 align-items-center mt-0">
                <div className="col-12 col-md-6 mb-0 px-1 d-flex align-items-center gap-4">
                    <ul className="nav nav-tabs mb-0" role="tablist">
                        <li className="nav-item" role="presentation">
                            <button
                                className={`nav-link ${viewType === "notes" ? "active" : ""} fs-6`}
                                onClick={() => setViewType("notes")}
                                type="button"
                            >
                                <i className="bx bx-note me-1"></i> Notes
                            </button>
                        </li>
                        <li className="nav-item" role="presentation">
                            <button
                                // Corrected: Apply 'active' if viewType is either 'card' or 'list'
                                className={`nav-link ${viewType === "card" || viewType === "list" ? "active" : ""} fs-6`}
                                onClick={() => setViewType("card")} // You might want to default to 'card' when switching to contacts
                                type="button"
                            >
                                <i className="bx bx-user me-1"></i> Contacts
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <hr className="my-0 mb-2" style={{ borderTop: "1px solid #dee2e6" }} />

            <div className="row mx-0 px-0 align-items-center mt-2">
                <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-2">

                    <input
                        type="search"
                        className="form-control me-0"
                        placeholder={viewType === "notes" ? "Search Notes..." : "Search Contact..."}
                        value={searchText}
                        onChange={(e) => setSearchText(e.target.value)}
                        style={{ width: "200px", height: "30px" }}
                    />

                    {/* Filter by funnel icon for Notes view */}
                    {viewType === "notes" && (
                        <div className="dropdown" style={{ width: "fit-content" }}>
                            <a
                                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i className={`bx bx-slider-alt ${notesFilterCount > 0 ? "text-primary" : "text-muted"}`}></i>
                                {notesFilterCount > 0 && (
                                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
                                        {notesFilterCount}
                                    </span>
                                )}
                            </a>

                            <div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
                                {/* Scrollable Filter Content */}
                                <div
                                    className="p-3"
                                    style={{
                                        maxHeight: "300px",
                                        overflowY: "auto",
                                        overflowX: "hidden",
                                        whiteSpace: "normal"
                                    }}
                                >
                                    {allCreators.length === 0 && filteredOrganizations.length === 0 ? (
                                        <div className="text-center text-muted py-5">
                                            No filter found
                                        </div>
                                    ) : (
                                        <div className="d-flex gap-3">
                                            {/* Created By */}
                                            <div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
                                                    <p className="text-muted mb-2 pt-2">Created By</p>
                                                </div>
                                                {allCreators.map((name, idx) => (
                                                    <div className="form-check mb-1" key={`creator-${idx}`}>
                                                        <input
                                                            className="form-check-input form-check-input-sm"
                                                            type="checkbox"
                                                            id={`creator-${idx}`}
                                                            checked={selectedCreators.includes(name)}
                                                            onChange={() => handleToggleCreator(name)}
                                                            style={{ width: "1rem", height: "1rem" }}
                                                        />
                                                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
                                                            {name}
                                                        </label>
                                                    </div>
                                                ))}
                                            </div>

                                            {/* Organization */}
                                            <div style={{ maxHeight: "260px", overflowY: "auto", overflowX: "hidden" }}>
                                                <div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
                                                    <p className="text-muted mb-2 pt-2">Organization</p>
                                                </div>
                                                {filteredOrganizations.map((org, idx) => (
                                                    <div className="form-check mb-1" key={`org-${idx}`}>
                                                        <input
                                                            className="form-check-input form-check-input-sm"
                                                            type="checkbox"
                                                            id={`org-${idx}`}
                                                            checked={selectedOrgs.includes(org)}
                                                            onChange={() => handleToggleOrg(org)}
                                                            style={{ width: "1rem", height: "1rem" }}
                                                        />
                                                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
                                                            {org}
                                                        </label>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    )}
                                </div>


                                {/* Sticky Footer Buttons */}
                                <div
                                    className="d-flex justify-content-end gap-2 p-2 "
                                    style={{
                                        background: "#fff",
                                        position: "sticky",
                                        bottom: 0
                                    }}
                                >
                                    <button
                                        className="btn btn-xs btn-secondary"
                                        onClick={() => {
                                            setSelectedCreators([]);
                                            setSelectedOrgs([]);
                                            setFilteredOrganizations(allOrganizations);
                                            setFilterAppliedNotes(notesForFilter);
                                        }}
                                    >
                                        Clear
                                    </button>
                                    <button
                                        className="btn btn-xs btn-primary"
                                        onClick={() => {
                                            applyCombinedFilter();
                                        }}
                                    >
                                        Apply Filter
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}


                    {(viewType === "card" || viewType === "list") && (
                        <div className="d-flex gap-2">

                            <button
                                type="button"
                                className={`btn  btn-sm p-1 ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
                                onClick={() => setViewType("card")}
                            >
                                <i className="bx bx-grid-alt"></i>
                            </button>
                            <button
                                type="button"
                                className={`btn  btn-sm p-1 ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
                                onClick={() => setViewType("list")}
                            >
                                <i className="bx bx-list-ul"></i>

                            </button>
                        </div>
                    )}

                    {/* Filter by funnel icon for Contacts view (retains numerical badge) */}
                    {viewType !== "notes" && (
                        <div className="dropdown" style={{ width: "fit-content" }}>
                            <a
                                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <i className={`bx bx-slider-alt ${filtered > 0 ? "text-primary" : "text-muted"}`}></i>
                                {filtered > 0 && (
                                    <span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning" style={{ fontSize: "0.4rem" }}>
                                        {filtered}
                                    </span>
                                )}
                            </a>

                            <ul className="dropdown-menu p-3" style={{ width: "700px" }}>
                                <p className="text-muted m-0 h6">Filter by</p>

                                {filteredBuckets.length === 0 && filteredCategories.length === 0 ? (
                                    <div className="text-center text-muted py-5">
                                        No filter found
                                    </div>
                                ) : (
                                    <div className="d-flex flex-nowrap">
                                        <div className="mt-1 me-4" style={{ flexBasis: "50%" }}>
                                            <p className="text-small mb-1">Buckets</p>
                                            <div className="d-flex flex-wrap">
                                                {filteredBuckets.map(({ id, name }) => (
                                                    <div
                                                        className="form-check me-3 mb-1"
                                                        style={{ minWidth: "calc(50% - 15px)" }}
                                                        key={id}
                                                    >
                                                        <input
                                                            className="form-check-input form-check-input-sm"
                                                            type="checkbox"
                                                            id={`bucket-${id}`}
                                                            checked={tempSelectedBucketIds.includes(id)}
                                                            onChange={() => handleTempBucketChange(id)}
                                                            style={{ width: "1rem", height: "1rem" }}
                                                        />
                                                        <label
                                                            className="form-check-label text-nowrap text-small"
                                                            htmlFor={`bucket-${id}`}
                                                        >
                                                            {name}
                                                        </label>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>

                                        <div className="mt-1" style={{ flexBasis: "50%" }}>
                                            <p className="text-small mb-1">Categories</p>
                                            <div className="d-flex flex-wrap">
                                                {filteredCategories.map(({ id, name }) => (
                                                    <div
                                                        className="form-check me-3 mb-1"
                                                        style={{ minWidth: "calc(50% - 15px)" }}
                                                        key={id}
                                                    >
                                                        <input
                                                            className="form-check-input form-check-input-sm"
                                                            type="checkbox"
                                                            id={`cat-${id}`}
                                                            checked={tempSelectedCategoryIds.includes(id)}
                                                            onChange={() => handleTempCategoryChange(id)}
                                                            style={{ width: "1rem", height: "1rem" }}
                                                        />
                                                        <label
                                                            className="form-check-label text-nowrap text-small"
                                                            htmlFor={`cat-${id}`}
                                                        >
                                                            {name}
                                                        </label>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                )}

                                <div className="d-flex justify-content-end gap-2 mt-1">
                                    <button
                                        className="btn btn-xs btn-secondary"
                                        onClick={(e) => {
                                            clearFilter();
                                        }}
                                    >
                                        Clear
                                    </button>
                                    <button
                                        className="btn btn-xs btn-primary"
                                        onClick={(e) => {
                                            applyFilter();
                                        }}
                                    >
                                        Apply Filter
                                    </button>
                                </div>
                            </ul>

                        </div>
                    )}
                </div>

                <div className="col-12 col-md-6 mb-2 px-5 d-flex justify-content-end align-items-center gap-2">
                    {(viewType === "list" || viewType === "card") && (
                        <label className="switch switch-primary mb-0">
                            <input
                                type="checkbox"
                                className="switch-input me-3"
                                onChange={() => setIsActive(!IsActive)}
                                checked={!IsActive}
                                disabled={loading}
                            />
                            <span className="switch-toggle-slider">
                                <span className="switch-on"></span>
                                <span className="switch-off"></span>
                            </span>
                            <span className="ms-12">Show Inactive Contacts</span>
                        </label>
                    )}

                    <div className="btn-group">
                        <button
                            className="btn btn-sm btn-label-secondary dropdown-toggle"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                        >
                            <i className="bx bx-export me-2 bx-sm"></i>Export
                        </button>
                        <ul className="dropdown-menu">
                            <li>
                                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("csv"); }}>
                                    <i className="bx bx-file me-1"></i> CSV
                                </a>
                            </li>
                            <li>
                                <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("excel"); }}>
                                    <i className="bx bxs-file-export me-1"></i> Excel
                                </a>
                            </li>
                            {viewType !== "notes" && (
                                <li>
                                    <a className="dropdown-item" href="#" onClick={(e) => { e.preventDefault(); handleExport("pdf"); }}>
                                        <i className="bx bxs-file-pdf me-1"></i> PDF
                                    </a>
                                </li>
                            )}
                        </ul>
                    </div>

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

export default DirectoryPageHeader;