'use client';

import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Table, Switch, Modal, notification } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { AppDispatch, RootState } from '@/store/store';
import PageHeader from '@/components/pageHeader';
import { fetchFeatureControls } from './slice';
import { updateFeatureControlStatus } from './service';
import type { FeatureControlData } from './interface';

const FeatureControlList: React.FC = () => {
  const { featureControls, status } = useSelector((state: RootState) => state.featureControls);
  const dispatch: AppDispatch = useDispatch();
  const [updatingId, setUpdatingId] = useState<number | null>(null);

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

  const onChange = (checked: boolean, record: FeatureControlData): void => {
    Modal.confirm({
      title: 'Confirm Status Change',
      content: `Are you sure you want to turn ${checked ? 'on' : 'off'} "${record.name}"?`,
      okText: 'Yes',
      cancelText: 'No',
      onOk() {
        setUpdatingId(record.id);
        updateFeatureControlStatus(record.id, checked)
          .then((response) => {
            notification.success({
              message: 'Success',
              description: response?.data?.message,
            });
            dispatch(fetchFeatureControls());
          })
          .catch((error) => {
            notification.error({
              message: 'Error',
              description: error?.response?.data?.message,
            });
          })
          .finally(() => {
            setUpdatingId(null);
          });
      },
    });
  };

  const columns: ColumnsType<FeatureControlData> = [
    {
      title: 'Feature Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Action',
      key: 'action',
      width: 120,
      align: 'center',
      render: (text, record) => (
        <Switch
          checked={record.is_enabled}
          loading={updatingId === record.id}
          onChange={(checked) => onChange(checked, record)}
        />
      ),
    },
  ];

  return (
    <div>
      <PageHeader title="Feature Control" isBack={false} />
      <Table
        loading={status === 'loading'}
        columns={columns}
        rowKey="id"
        bordered
        dataSource={featureControls}
        pagination={false}
      />
    </div>
  );
};

export default FeatureControlList;