'use client';
import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Switch, Button, Form, notification, Space, Alert } from 'antd';
import { fetchAllRoles, fetchFeaturesList, fetchPermissions } from '../role/slice';
import { addPermissions } from '../role/service';
import type { AppDispatch, RootState } from '@/store/store';
import MasterRoles from '@/components/masterDropdowns/MasterRoles';
import PageHeader from '@/components/pageHeader';
import PageLoader from '@/components/pageLoader/page';
import { useRoles } from '@/hooks/useRoles';

interface PermissionResponse {
    feature_id: number
}
interface Feature {
  id: number;
  name: string;
}
const Mapping: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const [form] = Form.useForm();
  const { getRoleByName } = useRoles();
  const superAdminId = getRoleByName('super_admin')?.id ?? 1;

  const status = useSelector((state: RootState) => state.roles?.status);
  const features = useSelector((state: RootState) => state.roles?.features);
  const permissions = useSelector((state: RootState) => state.roles?.permissions);

  const [selectedRole, setSelectedRole] = useState<number | null>(null);
  const [initialSelectedRole, setInitialSelectedRole] = useState<number | null>(null); // Initialize as Super Admin Id
  const [showPermissions, setShowPermissions] = useState(false);

  // Maintain a mapping of feature IDs to their checked states
  const featureCheckStates: Record<number, boolean> = {};

  // Initialize the featureCheckStates based on existing permissions
  useEffect(() => {
    if (permissions !== null) {
      permissions.forEach((permission: PermissionResponse) => {
        featureCheckStates[permission.feature_id] = true;
      });
    }
  }, [permissions]);

  // Fetch permissions for the selected role when component mounts
  useEffect(() => {
    if (initialSelectedRole !== null) {
      dispatch(fetchFeaturesList()).then(() => {
        dispatch(fetchPermissions(initialSelectedRole)).then(
          (response: any) => {
            setShowPermissions(true);
            setSelectedRole(superAdminId);
            // Call handleSwitchToggle with proper parameters here
            handleSwitchToggle(true, response.feature_id); // Replace featureId with the actual featureId
          }
        );
      });
    }
  }, [initialSelectedRole, dispatch]);

  const handleSwitchToggle = (checked: boolean, featureId: number): void => {
    featureCheckStates[featureId] = checked;
  };

  const handleRoleChange = (selectedValue: any): void => {
    dispatch(fetchFeaturesList()).then(() => {
      dispatch(fetchPermissions(selectedValue));
    });
    setShowPermissions(true);
    if (selectedValue !== superAdminId) {
      setInitialSelectedRole(null);
      setSelectedRole(selectedValue);
      setShowPermissions(true);
    }
    if (selectedValue === superAdminId) {
      setInitialSelectedRole(superAdminId);
      setShowPermissions(true);
    }
  };

  const handleSaveClick = (): void => {
    const checkedFeatures = Object.keys(featureCheckStates)
      .filter((featureId) => featureCheckStates[parseInt(featureId)])
      ?.map((featureId) => parseInt(featureId));

    const inputValues = {
      role_id: selectedRole,
      features: checkedFeatures,
    };

    addPermissions(inputValues)
      .then((res) => {
        if (res.status === 200) {
          notification.success({
            message: 'Success',
            description: 'The permission has been added successfully.',
          });
        }
      })
      .catch((err) => {
        notification.error({
          message: 'Error',
          description: `${err}`,
        });
      });

    if (selectedRole !== superAdminId) {
      setSelectedRole(selectedRole);
      setShowPermissions(true);
    } else if (selectedRole === superAdminId) {
      setInitialSelectedRole(selectedRole);
      setShowPermissions(true);
    }
    form.resetFields();
  };

  const columns = [
    {
      title: 'Serial No.',
      dataIndex: 'index',
      key: 'index',
      className: 'w-1 nowrap text-center',
      render: (text: string, record: Feature, index: number) => <span>{index + 1}</span>,
    },
    {
      title: 'Features',
      dataIndex: 'name',
      key: 'features',
      className: 'word-break',
    },
    {
      title: 'Permission',
      dataIndex: 'permission',
      key: 'permission',
      width: '120px',
      className: 'text-center',
      render: (text: string, record: Feature) => (
        <Switch
          defaultChecked={permissions?.some(
            (item: PermissionResponse) => item.feature_id === record.id
          )}
          onChange={(checked) => {
            handleSwitchToggle(checked, record.id);
          }}
        />
      ),
    },
  ];

  useEffect(() => {
    dispatch(fetchAllRoles());
  }, [dispatch]);

  return (
    <div>
      <PageHeader
        title="Roles Mapping"
        isBack={false}
        extra={
          <Space size="middle" align="start">
            <Form form={form}>
              <div className="role-select-dropdown">
                <MasterRoles
                  label="Role"
                  name="role_id"
                  initialValue={
                    initialSelectedRole === superAdminId ? initialSelectedRole : selectedRole
                  }
                  filter={{
                    exclude_id: superAdminId,
                  }}
                  rules={[{ required: true, message: 'Please Select A Role!' }]}
                  onChange={handleRoleChange}
                  onClear={() => setSelectedRole(null)}
                />
              </div>
            </Form>
            {status !== 'failed'
              ? showPermissions && (
                <Button type="primary" onClick={handleSaveClick}>
                                    Save
                </Button>
              )
              : null}
          </Space>
        }
      />
      <Alert
        message="Select the role to view the permissions."
        type="info"
        showIcon
      />

      {status === 'loading' ? (
        <PageLoader/>
      ) : status === 'failed' ? (
        <></>
      ) : (
        <div className="mt-5">
          {selectedRole && showPermissions && (
            <Table
              dataSource={features}
              rowKey="id"
              columns={columns}
              pagination={false}
              bordered
              tableLayout="fixed"
              scroll={{ x: true }}
            />
          )}
        </div>
      )}
    </div>
  );
};

export default Mapping;