'use client';

import CustomModal from '@/components/common/custom-modal';
import PrimaryButton from '../../common/primary-button';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { Checkbox } from 'rizzui';

const modules = ['Users', 'Labor', 'Calls', 'Contacts', 'Leads'];

type Permission = {
  module: string;
  add: boolean;
  edit: boolean;
  delete: boolean;
  view: boolean;
};

type RoleFormValues = {
  role_name: string;
  description: string;
  permissions: Permission[];
};

type PermissionKey = 'add' | 'edit' | 'delete' | 'view';

export default function RoleModal({
  open,
  onClose,
  onSubmit,
  initialData,
}: any) {
  const formik = useFormik<RoleFormValues>({
    enableReinitialize: true,
    initialValues: {
        role_name: initialData?.role_name || '',
        description: initialData?.description || '',
        permissions:
        initialData?.permissions ||
        modules.map((m) => ({
        module: m,
        add: false,
        edit: false,
        delete: false,
        view: true,
        })),
    },
    validationSchema: Yup.object({
      role_name: Yup.string().required('Role name is required').min(3),
      description: Yup.string().required('Description is required').min(5),
    }),
    onSubmit: (values, { resetForm }) => {
        onSubmit({
            ...values,
            id: initialData?.id,
        });

        resetForm();
        onClose();
    },
  });

  const handlePermissionChange = (
    index: number,
    field: PermissionKey
  ) => {
    const updated = formik.values.permissions.map((p, i) =>
      i === index ? { ...p, [field]: !p[field] } : p
    );

    formik.setFieldValue('permissions', updated);
  };

  // ✅ GLOBAL SELECT ALL
  const toggleAll = (checked: boolean) => {
    const updated = formik.values.permissions.map((p) => ({
      ...p,
      add: checked,
      edit: checked,
      delete: checked,
      view: checked,
    }));

    formik.setFieldValue('permissions', updated);
  };

  // ✅ ROW SELECT ALL (MODULE LEVEL)
  const toggleRow = (index: number, checked: boolean) => {
    const updated = formik.values.permissions.map((p, i) =>
      i === index
        ? {
            ...p,
            add: checked,
            edit: checked,
            delete: checked,
            view: checked,
          }
        : p
    );

    formik.setFieldValue('permissions', updated);
  };

  const allChecked =
    formik.values.permissions.length > 0 &&
    formik.values.permissions.every(
      (p) => p.add && p.edit && p.delete && p.view
    );

  return (
    <CustomModal open={open} onClose={onClose} title="Create Role">
      <form onSubmit={formik.handleSubmit} className="space-y-6">

        {/* ROLE NAME */}
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Role
          </label>
          <input
            type="text"
            name="role_name"
            placeholder="Enter role name"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.role_name}
            onChange={formik.handleChange}
          />
          {formik.errors.role_name && (
            <p className="text-red-500 text-sm">
              {formik.errors.role_name}
            </p>
          )}
        </div>

        {/* DESCRIPTION */}
        <div>
          <label className="block text-sm font-medium mb-1 text-gray-700">
            Description
          </label>
          <textarea
            name="description"
            placeholder="Enter description"
            className="w-full rounded-lg border px-4 py-2"
            value={formik.values.description}
            onChange={formik.handleChange}
          />
          {formik.errors.description && (
            <p className="text-red-500 text-sm">
              {formik.errors.description}
            </p>
          )}
        </div>

        {/* PERMISSIONS TABLE */}
        <div>
          <p className="text-sm text-gray-700 font-semibold mb-2">
            Permissions
          </p>

          <div className="border rounded-lg overflow-hidden max-h-[400px] overflow-y-auto">
            <table className="w-full text-sm">

              {/* HEADER */}
              <thead className="bg-gray-100 sticky top-0 z-10">
                <tr>
                  <th className="text-left p-2 flex items-center gap-2">
                    <Checkbox
                      size="sm"
                      checked={allChecked}
                      onChange={(e) => toggleAll(e.target.checked)}
                    />
                    Module
                  </th>
                  <th>Add</th>
                  <th>Edit</th>
                  <th>Delete</th>
                  <th>View</th>
                </tr>
              </thead>

              {/* BODY */}
              <tbody>
                {formik.values.permissions.map((perm, index) => {
                  const rowChecked =
                    perm.add &&
                    perm.edit &&
                    perm.delete &&
                    perm.view;

                  return (
                    <tr key={perm.module} className="border-t">

                      {/* MODULE + ROW SELECT ALL */}
                      <td className="p-2 flex items-center text-dark gap-2">
                        <Checkbox
                          size="sm"
                          checked={rowChecked}
                          onChange={(e) =>
                            toggleRow(index, e.target.checked)
                          }
                        />
                        {perm.module}
                      </td>

                      <td className="text-right">
                        <Checkbox
                          size="sm"
                          checked={perm.add}
                          onChange={() =>
                            handlePermissionChange(index, 'add')
                          }
                        />
                      </td>

                      <td className="text-right">
                        <Checkbox
                          size="sm"
                          checked={perm.edit}
                          onChange={() =>
                            handlePermissionChange(index, 'edit')
                          }
                        />
                      </td>

                      <td className="text-right">
                        <Checkbox
                          size="sm"
                          checked={perm.delete}
                          onChange={() =>
                            handlePermissionChange(index, 'delete')
                          }
                        />
                      </td>

                      <td className="text-right">
                        <Checkbox
                          size="sm"
                          checked={perm.view}
                          onChange={() =>
                            handlePermissionChange(index, 'view')
                          }
                        />
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        {/* ACTIONS */}
        <div className="flex justify-end gap-2">
          <button
            type="button"
            onClick={onClose}
            className="px-4 py-2 border rounded-lg"
          >
            Cancel
          </button>

          <PrimaryButton type="submit">
            Save Role
          </PrimaryButton>
        </div>
      </form>
    </CustomModal>
  );
}