"use client";

/* eslint-disable @typescript-eslint/no-explicit-any */

import React, { useState } from "react";
import ReactDOM from "react-dom";
import styles from "../modal-styles.module.scss";
import { router, useForm } from "@inertiajs/react";
import { FiShield } from "react-icons/fi";
import { motion } from "framer-motion";
import PageIntro from "@/components/dashboard/page-intro";

interface Props {
  closeModal: () => void;
  user: any;
  permissions: any[];
}

const ManagePermissionsModal: React.FC<Props> = ({
  closeModal,
  user,
  permissions,
}) => {
  /*
  |--------------------------------------------------------------------------
  | PRESETS (KEEP FINANCE)
  |--------------------------------------------------------------------------
  */
  const PRESETS = {
    accountant: {
      label: "Finance Manager",
      groups: ["finance", "pledges", "remittances"],
    },
    attendance: {
      label: "Attendance Officer",
      groups: ["attendance"],
    },
    firstTimers: {
      label: "First Timer Manager",
      groups: ["first_timers"],
    },
    businessManager: {
      label: "Business Manager",
      groups: ["businesses"],
    },
  };

  const storageKey = `user-preset-${user.id}`;

  const getInitialPreset = (): keyof typeof PRESETS => {
    if (typeof window === "undefined") return "accountant";
    const saved = localStorage.getItem(storageKey);
    return saved && saved in PRESETS
      ? (saved as keyof typeof PRESETS)
      : "accountant";
  };

  const [activePreset, setActivePreset] =
    useState<keyof typeof PRESETS>(getInitialPreset);

  const { data, setData, post, processing } = useForm<{
    permissions: string[];
  }>({
    permissions: user?.permissions || [],
  });

  const handlePresetChange = (preset: keyof typeof PRESETS) => {
    setActivePreset(preset);
    if (typeof window !== "undefined") {
      localStorage.setItem(storageKey, preset);
    }
  };

  /*
  |--------------------------------------------------------------------------
  | GROUP ORDER (IMPORTANT FOR UI FLOW)
  |--------------------------------------------------------------------------
  */
  const groups = PRESETS[activePreset].groups;

  /*
  |--------------------------------------------------------------------------
  | FORMAT LABEL
  |--------------------------------------------------------------------------
  */
  const formatLabel = (str: string) =>
    str
      .replace(/\./g, " ")
      .replace(/_/g, " ")
      .replace(/\b\w/g, (c) => c.toUpperCase());

  /*
  |--------------------------------------------------------------------------
  | TOGGLE
  |--------------------------------------------------------------------------
  */
  const togglePermission = (name: string) => {
    setData(
      "permissions",
      data.permissions.includes(name)
        ? data.permissions.filter((p) => p !== name)
        : [...data.permissions, name]
    );
  };

  /*
  |--------------------------------------------------------------------------
  | SAVE
  |--------------------------------------------------------------------------
  */
  const handleSave = () => {
    post(route("dashboard.permissions.update", user.id), {
      preserveScroll: true,
      onSuccess: () => {
        closeModal();
        router.reload({ only: ["users"] });
      },
    });
  };

  /*
  |--------------------------------------------------------------------------
  | RENDER
  |--------------------------------------------------------------------------
  */
  return ReactDOM.createPortal(
    <div className={styles.modalBackdrop} onClick={closeModal}>
      <div
        className={styles.modalContent}
        onClick={(e) => e.stopPropagation()}
      >
        {/* HEADER */}
        <div className={styles.modalHeader}>
          <PageIntro
            title="Assign Responsibility"
            description="Select role and adjust permissions"
          />
          <button className={styles.closeBtn} onClick={closeModal}>
            ×
          </button>
        </div>

        {/* USER */}
        <div className={styles.permissionUser}>
          <div className={styles.avatar}>
            {user.first_name?.charAt(0)}
          </div>
          <div>
            <strong>
              {user.first_name} {user.last_name}
            </strong>
            <small>{user.email}</small>
          </div>
        </div>

        {/* PRESETS */}
        <div className={styles.presetTabs}>
          {Object.entries(PRESETS).map(([key, preset]) => (
            <button
              key={key}
              className={`${styles.presetTab} ${
                activePreset === key ? styles.activePresetTab : ""
              }`}
              onClick={() =>
                handlePresetChange(key as keyof typeof PRESETS)
              }
            >
              {preset.label}
            </button>
          ))}
        </div>

        {/* INFO */}
        <div className={styles.infoBox}>
          Editing <b>{PRESETS[activePreset].label}</b>
        </div>

        {/* 🔥 PERMISSIONS (FLAT + GROUP HEADERS) */}
        <div className={styles.permissionsList}>
          {groups.map((group, index) => {
            const groupPerms = permissions.filter(
              (p: any) => p.group === group
            );

            if (groupPerms.length === 0) return null;

            return (
              <React.Fragment key={group}>
                {/* 🔥 GROUP TITLE (INLINE STYLE ONLY) */}
                <div
                  style={{
                    marginTop: index === 0 ? "0.5rem" : "1.2rem",
                    marginBottom: "0.4rem",
                    fontSize: "0.75rem",
                    fontWeight: 700,
                    color: "#7a4b20",
                    letterSpacing: "0.3px",
                  }}
                >
                  {formatLabel(group)}
                </div>

                {groupPerms.map((perm: any) => {
                  const active = data.permissions.includes(perm.name);

                  return (
                    <motion.div
                      key={perm.name}
                      layout
                      initial={{ opacity: 0, y: 6 }}
                      animate={{ opacity: 1, y: 0 }}
                      className={`${styles.permissionItem} ${
                        active ? styles.permissionActive : ""
                      }`}
                    >
                      <div className={styles.permIcon}>
                        <FiShield size={14} />
                      </div>

                      <div className={styles.permText}>
                        <strong>
                          {formatLabel(perm.name)}
                        </strong>
                        <small>{perm.description}</small>
                      </div>

                      <label className={styles.switch}>
                        <input
                          type="checkbox"
                          checked={active}
                          onChange={() =>
                            togglePermission(perm.name)
                          }
                        />
                        <span className={styles.slider}></span>
                      </label>
                    </motion.div>
                  );
                })}
              </React.Fragment>
            );
          })}
        </div>

        {/* ACTION */}
        <button
          onClick={handleSave}
          disabled={processing}
          className={styles.submitBtn}
        >
          {processing ? "Saving..." : "Save Changes"}
        </button>
      </div>
    </div>,
    document.body
  );
};

export default ManagePermissionsModal;