import React, {
  useState,
  createContext,
  useEffect,
  useContext,
  useCallback,
  useMemo,
} from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";

// ------ Components -------
import Breadcrumb from "../../components/common/Breadcrumb";
import TenantsList from "../../components/Tenant/TenantsList";
import TenantFilterPanel from "../../components/Tenant/TenantFilterPanel";

// ------ Context & Utils -------
import { useDebounce } from "../../utils/appUtils";
import { useFab } from "../../Context/FabContext";
import { setCurrentTenant } from "../../slices/globalVariablesSlice";

// ------ Schema -------
import {
  defaultFilterValues,
  filterSchema,
} from "../../components/Tenant/TenantSchema";

// ------ Constants -------
import {
  MANAGE_TENANTS,
  SUPPER_TENANT,
  VIEW_TENANTS,
} from "../../utils/constants";
import { useProfile } from "../../hooks/useProfile";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";

// ---------- Context ----------
export const TenantContext = createContext();
export const useTenantContext = () => {
  const context = useContext(TenantContext);
  if (!context) {
    throw new Error(
      "useTenantContext must be used within a TenantContext.Provider"
    );
  }
  return context;
};

const TenantPage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { profile } = useProfile();

  // ---------- State ----------
  const [searchText, setSearchText] = useState("");
  const [isRefetching, setIsRefetching] = useState(false);
  const [refetchFn, setRefetchFn] = useState(null);
  const [filters, setFilters] = useState();

  // ---------- Hooks ----------
  const debouncedSearch = useDebounce(searchText, 500);
  const { setOffcanvasContent, setShowTrigger } = useFab();

  const isSuperTenant = useHasUserPermission(SUPPER_TENANT);
  const canManageTenants = useHasUserPermission(MANAGE_TENANTS);
  const isSelfTenant = useHasUserPermission(VIEW_TENANTS);

  const methods = useForm({
    resolver: zodResolver(filterSchema),
    defaultValues: defaultFilterValues,
  });
  const { reset } = methods;

  const handleApplyFilters = useCallback((values) => {
    setFilters(values);
  }, []);

  const filterPanelElement = useMemo(
    () => <TenantFilterPanel onApply={handleApplyFilters} />,
    [handleApplyFilters]
  );
  // ---------- Fab Filter Panel ----------
  useEffect(() => {
    if (!isSuperTenant) return;
    setShowTrigger(true);
    setOffcanvasContent("Tenant Filters", filterPanelElement);

    return () => {
      setShowTrigger(false);
      setOffcanvasContent("", null);
    };
  }, [isSuperTenant, filterPanelElement, profile]);

  // ---------- Redirect for Self Tenant ----------
  useEffect(() => {
    if (!isSuperTenant && isSelfTenant) {
      // Delay navigation to next tick to avoid "update during render" warning
      setTimeout(() => {
        navigate("/tenant/self");
      }, 0);
    }
  }, [isSuperTenant, isSelfTenant, navigate]);

  // ---------- Handlers ----------
  const handleNewTenant = () => {
    dispatch(setCurrentTenant(null));
    navigate("/tenants/new-tenant");
  };

  // ---------- Context Value ----------
  const contextValue = {};

  return (
    <TenantContext.Provider value={contextValue}>
      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Tenant", link: null },
          ]}
        />
        <div className="card text-center my-4 p-5 pb-10">
          {/* Super Tenant Actions */}
          {isSuperTenant && (
            <div className="p-0">
              <div className="row align-items-center">
                {/* Search */}
                <div className="col-6 col-md-6 col-lg-3 mb-md-0">
                  <input
                    type="search"
                    value={searchText}
                    className="form-control form-control-sm"
                    onChange={(e) => setSearchText(e.target.value)}
                    placeholder="Search Tenant"
                  />
                </div>

                {/* Actions */}
                <div className="col-6 col-md-6 col-lg-9 text-end">
                  <button
                    className="btn btn-sm btn-primary"
                    type="button"
                    onClick={handleNewTenant}
                  >
                    <i className="bx bx-plus-circle me-2"></i>
                    <span className="d-none d-md-inline-block">
                      Add New Tenant
                    </span>
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* Tenant List or Access Denied */}
          {isSuperTenant ? (
            <TenantsList
              filters={filters}
              searchText={debouncedSearch}
              setIsRefetching={setIsRefetching}
              setRefetchFn={setRefetchFn}
            />
          ) : !isSelfTenant ? (
            <div className="text-center my-4 p-2">
              <i className="fa-solid fa-triangle-exclamation fs-5"></i>
              <p>
                Access Denied: You don't have permission to perform this action!
              </p>
            </div>
          ) : null}
        </div>
      </div>
    </TenantContext.Provider>
  );
};

export default TenantPage;
