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]);


  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);
  };

  useEffect(() => {
    updateFilteredOrganizations();
  }, [selectedCreators]);

  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" : ""}`}
                onClick={() => setViewType("notes")}
                type="button"
              >
                <i className="bx bx-note me-1"></i> Notes
              </button>
            </li>
            <li className="nav-item" role="presentation">
              <button
                className={`nav-link ${viewType === "card" ? "active" : ""}`}
                onClick={() => setViewType("card")}
                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-0">
        <div className="col-12 col-md-6 mb-2 px-5 d-flex align-items-center gap-4">

          <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" }}
          />

          {/* Filter by funnel icon for Notes view */}
          {viewType === "notes" && (
            <div className="dropdown" style={{ width: "fit-content", minWidth: "400px" }}> {/* Added minWidth here */}
              <a
                className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center position-relative"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className={`fa-solid fa-filter ms-1 fs-5 ${selectedCreators.length > 0 || selectedOrgs.length > 0 ? "text-primary" : "text-muted"}`}></i>
                {/* Removed the numerical badge for notes filter */}
              </a>

              <div
                className="dropdown-menu p-3"
                style={{
                  minWidth: "600px",
                  maxHeight: "400px",
                  overflowY: "auto",
                  overflowX: "hidden",
                  whiteSpace: "normal"
                }}
              >
                <div className="d-flex">
                  {/* Created By */}
                  <div className="pe-3" style={{ flex: 1 }}>
                    <p className="text-muted mb-1">Created By</p>
                    {allCreators.map((name, idx) => (
                      <div className="form-check mb-1" key={`creator-${idx}`}>
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id={`creator-${idx}`}
                          checked={selectedCreators.includes(name)}
                          onChange={() => handleToggleCreator(name)}
                        />
                        <label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
                          {name}
                        </label>
                      </div>
                    ))}
                  </div>

                  {/* Divider */}
                  {/* <div style={{ width: "1px", backgroundColor: "#dee2e6", margin: "0 12px" }}></div> */}

                  {/* Organization */}
                  <div className="ps-3" style={{ flex: 1 }}>
                    <p className="text-muted mb-1">Organization</p>
                    {filteredOrganizations.map((org, idx) => (
                      <div className="form-check mb-1" key={`org-${idx}`}>
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id={`org-${idx}`}
                          checked={selectedOrgs.includes(org)}
                          onChange={() => handleToggleOrg(org)}
                        />
                        <label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
                          {org}
                        </label>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Buttons */}
                <div className="d-flex justify-content-between mt-3">
                  <button
                    className="btn btn-sm btn-outline-danger"
                    onClick={() => {
                      setSelectedCreators([]);
                      setSelectedOrgs([]);
                      setFilteredOrganizations(allOrganizations);
                      setFilterAppliedNotes(notesForFilter);
                    }}
                  >
                    Clear
                  </button>
                  <button className="btn btn-sm 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-xs ${viewType === "card" ? "btn-primary" : "btn-outline-primary"}`}
                onClick={() => setViewType("card")}
              >
                <i className="bx bx-grid-alt"></i>
              </button>
              <button
                type="button"
                className={`btn btn-xs ${viewType === "list" ? "btn-primary" : "btn-outline-primary"}`}
                onClick={() => setViewType("list")}
              >
                <i className="bx bx-list-ul me-1"></i>

              </button>
            </div>
          )}

          {/* Filter by funnel icon for Contacts view (retains numerical badge) */}
          {viewType !== "notes" && (
            <div className="dropdown-center" 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={`fa-solid fa-filter ms-1 fs-5 ${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>

                <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"
                            type="checkbox"
                            id={`bucket-${id}`}
                            checked={tempSelectedBucketIds.includes(id)}
                            onChange={() => handleTempBucketChange(id)}
                          />
                          <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"
                            type="checkbox"
                            id={`cat-${id}`}
                            checked={tempSelectedCategoryIds.includes(id)}
                            onChange={() => handleTempCategoryChange(id)}
                          />
                          <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={clearFilter}>Clear</button>
                  <button className="btn btn-xs btn-primary" onClick={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;