import { useState, useEffect, useCallback, useMemo, CSSProperties } from 'react';
import {
  Card,
  Tabs,
  Table,
  Button,
  Input,
  Modal,
  Form,
  Switch,
  InputNumber,
  ColorPicker,
  Typography,
  message,
  Grid,
  Alert
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ArrowLeftOutlined
} from '@ant-design/icons';
import { useApi } from '@/hooks/useApi';
import { JobConfigurationService } from '@/services/jobConfiguration';
import { parseError } from '@/utils/errorHandler';
import { useNavigate } from 'react-router-dom';
import { ROUTES } from '@/constants/routes';

const { useBreakpoint } = Grid;

interface JobType {
  id: string;
  name: string;
  description: string | null;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface JobStatus {
  id: string;
  name: string;
  description: string | null;
  display_order: number;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface JobPriority {
  id: string;
  name: string;
  level: number;
  color: string | null;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface Tag {
  id: string;
  name: string;
  color: string | null;
  usage_count: number;
  created_at: string;
  updated_at: string;
}

interface JobTypesListResponse {
  items: JobType[];
  total: number;
  limit: number;
  offset: number;
}

interface JobStatusesListResponse {
  items: JobStatus[];
  total: number;
  limit: number;
  offset: number;
}

interface JobPrioritiesListResponse {
  items: JobPriority[];
  total: number;
  limit: number;
  offset: number;
}

interface TagsListResponse {
  items: Tag[];
  total: number;
  limit: number;
  offset: number;
}

const ConfigurationPage = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const screens = useBreakpoint();

  const [activeTab, setActiveTab] = useState<string>('job_types');
  const [searchJobTypes, setSearchJobTypes] = useState<string>('');
  const [searchJobStatuses, setSearchJobStatuses] = useState<string>('');
  const [searchJobPriorities, setSearchJobPriorities] = useState<string>('');
  const [searchTags, setSearchTags] = useState<string>('');
  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);

  const [jobTypeModalVisible, setJobTypeModalVisible] = useState<boolean>(false);
  const [jobStatusModalVisible, setJobStatusModalVisible] = useState<boolean>(false);
  const [jobPriorityModalVisible, setJobPriorityModalVisible] = useState<boolean>(false);
  const [tagModalVisible, setTagModalVisible] = useState<boolean>(false);

  const [editingJobType, setEditingJobType] = useState<JobType | null>(null);
  const [editingJobStatus, setEditingJobStatus] = useState<JobStatus | null>(null);
  const [editingJobPriority, setEditingJobPriority] = useState<JobPriority | null>(null);
  const [editingTag, setEditingTag] = useState<Tag | null>(null);

  const [jobTypeForm] = Form.useForm();
  const [jobStatusForm] = Form.useForm();
  const [jobPriorityForm] = Form.useForm();
  const [tagForm] = Form.useForm();

  const {
    data: jobTypesData,
    loading: jobTypesLoading,
    error: jobTypesError,
    execute: fetchJobTypes
  } = useApi<JobTypesListResponse>(JobConfigurationService.getJobTypes);

  const {
    data: jobStatusesData,
    loading: jobStatusesLoading,
    error: jobStatusesError,
    execute: fetchJobStatuses
  } = useApi<JobStatusesListResponse>(JobConfigurationService.getJobStatuses);

  const {
    data: jobPrioritiesData,
    loading: jobPrioritiesLoading,
    error: jobPrioritiesError,
    execute: fetchJobPriorities
  } = useApi<JobPrioritiesListResponse>(JobConfigurationService.getJobPriorities);

  const {
    data: tagsData,
    loading: tagsLoading,
    error: tagsError,
    execute: fetchTags
  } = useApi<TagsListResponse>(JobConfigurationService.getTags);

  useEffect(() => {
    void fetchJobTypes({ limit: 50, search: searchJobTypes });
  }, [fetchJobTypes, searchJobTypes]);

  useEffect(() => {
    void fetchJobStatuses({ limit: 50, search: searchJobStatuses });
  }, [fetchJobStatuses, searchJobStatuses]);

  useEffect(() => {
    void fetchJobPriorities({ limit: 50, search: searchJobPriorities });
  }, [fetchJobPriorities, searchJobPriorities]);

  useEffect(() => {
    void fetchTags({ limit: 50, search: searchTags });
  }, [fetchTags, searchTags]);

  const handleTabChange = useCallback((key: string) => {
    setActiveTab(key);
  }, []);

  const handleSearchJobTypes = useCallback((value: string) => {
    setSearchJobTypes(value);
  }, []);

  const handleSearchJobStatuses = useCallback((value: string) => {
    setSearchJobStatuses(value);
  }, []);

  const handleSearchJobPriorities = useCallback((value: string) => {
    setSearchJobPriorities(value);
  }, []);

  const handleSearchTags = useCallback((value: string) => {
    setSearchTags(value);
  }, []);

  const handleOpenAddJobTypeModal = useCallback(() => {
    setEditingJobType(null);
    jobTypeForm.resetFields();
    setJobTypeModalVisible(true);
  }, [jobTypeForm]);

  const handleOpenEditJobTypeModal = useCallback((record: JobType) => {
    setEditingJobType(record);
    jobTypeForm.setFieldsValue({
      name: record.name,
      description: record.description,
      is_active: record.is_active
    });
    setJobTypeModalVisible(true);
  }, [jobTypeForm]);

  const handleSaveJobType = useCallback(async () => {
    try {
      const values = await jobTypeForm.validateFields();
      if (editingJobType) {
        await JobConfigurationService.patchJobTypesById(editingJobType.id, {
          name: values.name,
          description: values.description,
          is_active: values.is_active
        });
        messageApi.success('Job type updated successfully');
      } else {
        await JobConfigurationService.createJobTypes({
          name: values.name,
          description: values.description,
          is_active: values.is_active ?? true
        });
        messageApi.success('Job type saved successfully');
      }
      setJobTypeModalVisible(false);
      jobTypeForm.resetFields();
      void fetchJobTypes({ limit: 50, search: searchJobTypes });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [editingJobType, jobTypeForm, messageApi, fetchJobTypes, searchJobTypes]);

  const handleDeleteJobType = useCallback((record: JobType) => {
    Modal.confirm({
      title: 'Delete Job Type',
      content: 'Are you sure you want to delete this job type?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await JobConfigurationService.deleteJobTypesById(record.id);
          messageApi.success('Job type deleted successfully');
          void fetchJobTypes({ limit: 50, search: searchJobTypes });
        } catch (e) {
          const { message: errorMsg } = parseError(e);
          messageApi.error(errorMsg);
        }
      }
    });
  }, [messageApi, fetchJobTypes, searchJobTypes]);

  const handleOpenAddJobStatusModal = useCallback(() => {
    setEditingJobStatus(null);
    jobStatusForm.resetFields();
    setJobStatusModalVisible(true);
  }, [jobStatusForm]);

  const handleOpenEditJobStatusModal = useCallback((record: JobStatus) => {
    setEditingJobStatus(record);
    jobStatusForm.setFieldsValue({
      name: record.name,
      description: record.description,
      display_order: record.display_order,
      is_active: record.is_active
    });
    setJobStatusModalVisible(true);
  }, [jobStatusForm]);

  const handleSaveJobStatus = useCallback(async () => {
    try {
      const values = await jobStatusForm.validateFields();
      if (editingJobStatus) {
        await JobConfigurationService.patchJobStatusesById(editingJobStatus.id, {
          name: values.name,
          description: values.description,
          display_order: values.display_order,
          is_active: values.is_active
        });
        messageApi.success('Job status updated successfully');
      } else {
        await JobConfigurationService.createJobStatuses({
          name: values.name,
          description: values.description,
          display_order: values.display_order ?? 0,
          is_active: values.is_active ?? true
        });
        messageApi.success('Job status saved successfully');
      }
      setJobStatusModalVisible(false);
      jobStatusForm.resetFields();
      void fetchJobStatuses({ limit: 50, search: searchJobStatuses });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [editingJobStatus, jobStatusForm, messageApi, fetchJobStatuses, searchJobStatuses]);

  const handleDeleteJobStatus = useCallback((record: JobStatus) => {
    Modal.confirm({
      title: 'Delete Job Status',
      content: 'Are you sure you want to delete this job status?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await JobConfigurationService.deleteJobStatusesById(record.id);
          messageApi.success('Job status deleted successfully');
          void fetchJobStatuses({ limit: 50, search: searchJobStatuses });
        } catch (e) {
          const { message: errorMsg } = parseError(e);
          messageApi.error(errorMsg);
        }
      }
    });
  }, [messageApi, fetchJobStatuses, searchJobStatuses]);

  const handleOpenAddJobPriorityModal = useCallback(() => {
    setEditingJobPriority(null);
    jobPriorityForm.resetFields();
    setJobPriorityModalVisible(true);
  }, [jobPriorityForm]);

  const handleOpenEditJobPriorityModal = useCallback((record: JobPriority) => {
    setEditingJobPriority(record);
    jobPriorityForm.setFieldsValue({
      name: record.name,
      level: record.level,
      color: record.color,
      is_active: record.is_active
    });
    setJobPriorityModalVisible(true);
  }, [jobPriorityForm]);

  const handleSaveJobPriority = useCallback(async () => {
    try {
      const values = await jobPriorityForm.validateFields();
      const colorValue = typeof values.color === 'string' ? values.color : values.color?.toHexString?.() ?? null;
      if (editingJobPriority) {
        await JobConfigurationService.patchJobPrioritiesById(editingJobPriority.id, {
          name: values.name,
          level: values.level,
          color: colorValue,
          is_active: values.is_active
        });
        messageApi.success('Job priority updated successfully');
      } else {
        await JobConfigurationService.createJobPriorities({
          name: values.name,
          level: values.level,
          color: colorValue,
          is_active: values.is_active ?? true
        });
        messageApi.success('Job priority saved successfully');
      }
      setJobPriorityModalVisible(false);
      jobPriorityForm.resetFields();
      void fetchJobPriorities({ limit: 50, search: searchJobPriorities });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [editingJobPriority, jobPriorityForm, messageApi, fetchJobPriorities, searchJobPriorities]);

  const handleDeleteJobPriority = useCallback((record: JobPriority) => {
    Modal.confirm({
      title: 'Delete Job Priority',
      content: 'Are you sure you want to delete this job priority?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await JobConfigurationService.deleteJobPrioritiesById(record.id);
          messageApi.success('Job priority deleted successfully');
          void fetchJobPriorities({ limit: 50, search: searchJobPriorities });
        } catch (e) {
          const { message: errorMsg } = parseError(e);
          messageApi.error(errorMsg);
        }
      }
    });
  }, [messageApi, fetchJobPriorities, searchJobPriorities]);

  const handleOpenAddTagModal = useCallback(() => {
    setEditingTag(null);
    tagForm.resetFields();
    setTagModalVisible(true);
  }, [tagForm]);

  const handleOpenEditTagModal = useCallback((record: Tag) => {
    setEditingTag(record);
    tagForm.setFieldsValue({
      name: record.name,
      color: record.color
    });
    setTagModalVisible(true);
  }, [tagForm]);

  const handleSaveTag = useCallback(async () => {
    try {
      const values = await tagForm.validateFields();
      const colorValue = typeof values.color === 'string' ? values.color : values.color?.toHexString?.() ?? null;
      if (editingTag) {
        await JobConfigurationService.patchTagsById(editingTag.id, {
          name: values.name,
          color: colorValue
        });
        messageApi.success('Tag updated successfully');
      } else {
        await JobConfigurationService.createTags({
          name: values.name,
          color: colorValue
        });
        messageApi.success('Tag saved successfully');
      }
      setTagModalVisible(false);
      tagForm.resetFields();
      void fetchTags({ limit: 50, search: searchTags });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [editingTag, tagForm, messageApi, fetchTags, searchTags]);

  const handleDeleteTag = useCallback((record: Tag) => {
    Modal.confirm({
      title: 'Delete Tag',
      content: 'Are you sure you want to delete this tag?',
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await JobConfigurationService.deleteTagsById(record.id);
          messageApi.success('Tag deleted successfully');
          void fetchTags({ limit: 50, search: searchTags });
        } catch (e) {
          const { message: errorMsg } = parseError(e);
          messageApi.error(errorMsg);
        }
      }
    });
  }, [messageApi, fetchTags, searchTags]);

  const handleBulkDeleteTags = useCallback(() => {
    if (selectedTagIds.length === 0) return;
    Modal.confirm({
      title: 'Delete Selected Tags',
      content: `Are you sure you want to delete ${selectedTagIds.length} tag(s)?`,
      okText: 'Delete',
      okType: 'danger',
      cancelText: 'Cancel',
      onOk: async () => {
        try {
          await Promise.all(selectedTagIds.map(id => JobConfigurationService.deleteTagsById(id)));
          messageApi.success('Selected tags deleted successfully');
          setSelectedTagIds([]);
          void fetchTags({ limit: 50, search: searchTags });
        } catch (e) {
          const { message: errorMsg } = parseError(e);
          messageApi.error(errorMsg);
        }
      }
    });
  }, [selectedTagIds, messageApi, fetchTags, searchTags]);

  const handleNavigateToDashboard = useCallback(() => {
    navigate(ROUTES.DASHBOARD);
  }, [navigate]);

  const jobTypesColumns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      render: (text: string | null) => text ?? '—'
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (active: boolean) => <Switch checked={active} disabled />
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: JobType) => (
        <div style={{ display: 'flex', gap: 8 }}>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleOpenEditJobTypeModal(record)}
          />
          <Button
            icon={<DeleteOutlined />}
            size="small"
            danger
            onClick={() => handleDeleteJobType(record)}
          />
        </div>
      )
    }
  ], [handleOpenEditJobTypeModal, handleDeleteJobType]);

  const jobStatusesColumns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Description',
      dataIndex: 'description',
      key: 'description',
      render: (text: string | null) => text ?? '—'
    },
    {
      title: 'Order',
      dataIndex: 'display_order',
      key: 'display_order'
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (active: boolean) => <Switch checked={active} disabled />
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: JobStatus) => (
        <div style={{ display: 'flex', gap: 8 }}>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleOpenEditJobStatusModal(record)}
          />
          <Button
            icon={<DeleteOutlined />}
            size="small"
            danger
            onClick={() => handleDeleteJobStatus(record)}
          />
        </div>
      )
    }
  ], [handleOpenEditJobStatusModal, handleDeleteJobStatus]);

  const jobPrioritiesColumns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Level',
      dataIndex: 'level',
      key: 'level'
    },
    {
      title: 'Color',
      dataIndex: 'color',
      key: 'color',
      render: (color: string | null) => (
        color ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div
              style={{
                width: 20,
                height: 20,
                borderRadius: 4,
                backgroundColor: color,
                border: '1px solid #d9d9d9'
              }}
            />
            <span>{color}</span>
          </div>
        ) : '—'
      )
    },
    {
      title: 'Active',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (active: boolean) => <Switch checked={active} disabled />
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: JobPriority) => (
        <div style={{ display: 'flex', gap: 8 }}>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleOpenEditJobPriorityModal(record)}
          />
          <Button
            icon={<DeleteOutlined />}
            size="small"
            danger
            onClick={() => handleDeleteJobPriority(record)}
          />
        </div>
      )
    }
  ], [handleOpenEditJobPriorityModal, handleDeleteJobPriority]);

  const tagsColumns = useMemo(() => [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: 'Color',
      dataIndex: 'color',
      key: 'color',
      render: (color: string | null) => (
        color ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div
              style={{
                width: 20,
                height: 20,
                borderRadius: 4,
                backgroundColor: color,
                border: '1px solid #d9d9d9'
              }}
            />
            <span>{color}</span>
          </div>
        ) : '—'
      )
    },
    {
      title: 'Usage Count',
      dataIndex: 'usage_count',
      key: 'usage_count'
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: Tag) => (
        <div style={{ display: 'flex', gap: 8 }}>
          <Button
            icon={<EditOutlined />}
            size="small"
            onClick={() => handleOpenEditTagModal(record)}
          />
          <Button
            icon={<DeleteOutlined />}
            size="small"
            danger
            onClick={() => handleDeleteTag(record)}
          />
        </div>
      )
    }
  ], [handleOpenEditTagModal, handleDeleteTag]);

  const tabItems = useMemo(() => [
    {
      key: 'job_types',
      label: 'Job Types',
      children: (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 16, flexWrap: screens.xs ? 'wrap' : 'nowrap' }}>
            <Input.Search
              placeholder="Search job types..."
              allowClear
              value={searchJobTypes}
              onChange={(e) => handleSearchJobTypes(e.target.value)}
              style={{ width: screens.xs ? '100%' : 300 }}
            />
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleOpenAddJobTypeModal}
              style={{ width: screens.xs ? '100%' : 'auto' }}
            >
              Add Job Type
            </Button>
          </div>
          {jobTypesError && (
            <Alert
              message="Error"
              description={parseError(jobTypesError).message}
              type="error"
              closable
              style={{ marginBottom: 16 }}
            />
          )}
          <Table
            columns={jobTypesColumns}
            dataSource={jobTypesData?.items ?? []}
            rowKey="id"
            loading={jobTypesLoading}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 'max-content' }}
            size={screens.xs ? 'small' : 'middle'}
          />
        </div>
      )
    },
    {
      key: 'job_statuses',
      label: 'Job Statuses',
      children: (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 16, flexWrap: screens.xs ? 'wrap' : 'nowrap' }}>
            <Input.Search
              placeholder="Search job statuses..."
              allowClear
              value={searchJobStatuses}
              onChange={(e) => handleSearchJobStatuses(e.target.value)}
              style={{ width: screens.xs ? '100%' : 300 }}
            />
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleOpenAddJobStatusModal}
              style={{ width: screens.xs ? '100%' : 'auto' }}
            >
              Add Status
            </Button>
          </div>
          {jobStatusesError && (
            <Alert
              message="Error"
              description={parseError(jobStatusesError).message}
              type="error"
              closable
              style={{ marginBottom: 16 }}
            />
          )}
          <Table
            columns={jobStatusesColumns}
            dataSource={jobStatusesData?.items ?? []}
            rowKey="id"
            loading={jobStatusesLoading}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 'max-content' }}
            size={screens.xs ? 'small' : 'middle'}
          />
        </div>
      )
    },
    {
      key: 'job_priorities',
      label: 'Job Priorities',
      children: (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 16, flexWrap: screens.xs ? 'wrap' : 'nowrap' }}>
            <Input.Search
              placeholder="Search job priorities..."
              allowClear
              value={searchJobPriorities}
              onChange={(e) => handleSearchJobPriorities(e.target.value)}
              style={{ width: screens.xs ? '100%' : 300 }}
            />
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleOpenAddJobPriorityModal}
              style={{ width: screens.xs ? '100%' : 'auto' }}
            >
              Add Priority
            </Button>
          </div>
          {jobPrioritiesError && (
            <Alert
              message="Error"
              description={parseError(jobPrioritiesError).message}
              type="error"
              closable
              style={{ marginBottom: 16 }}
            />
          )}
          <Table
            columns={jobPrioritiesColumns}
            dataSource={jobPrioritiesData?.items ?? []}
            rowKey="id"
            loading={jobPrioritiesLoading}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 'max-content' }}
            size={screens.xs ? 'small' : 'middle'}
          />
        </div>
      )
    },
    {
      key: 'tags',
      label: 'Tags',
      children: (
        <div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 16, flexWrap: screens.xs ? 'wrap' : 'nowrap' }}>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flex: 1, flexWrap: screens.xs ? 'wrap' : 'nowrap' }}>
              <Input.Search
                placeholder="Search tags..."
                allowClear
                value={searchTags}
                onChange={(e) => handleSearchTags(e.target.value)}
                style={{ width: screens.xs ? '100%' : 300 }}
              />
              <Button
                type="default"
                danger
                icon={<DeleteOutlined />}
                disabled={selectedTagIds.length === 0}
                onClick={handleBulkDeleteTags}
                style={{ width: screens.xs ? '100%' : 'auto' }}
              >
                Delete Selected
              </Button>
            </div>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleOpenAddTagModal}
              style={{ width: screens.xs ? '100%' : 'auto' }}
            >
              Add Tag
            </Button>
          </div>
          {tagsError && (
            <Alert
              message="Error"
              description={parseError(tagsError).message}
              type="error"
              closable
              style={{ marginBottom: 16 }}
            />
          )}
          <Table
            columns={tagsColumns}
            dataSource={tagsData?.items ?? []}
            rowKey="id"
            loading={tagsLoading}
            pagination={{ pageSize: 10 }}
            scroll={{ x: 'max-content' }}
            size={screens.xs ? 'small' : 'middle'}
            rowSelection={{
              type: 'checkbox',
              selectedRowKeys: selectedTagIds,
              onChange: (selectedKeys: React.Key[]) => {
                setSelectedTagIds(selectedKeys as string[]);
              }
            }}
          />
        </div>
      )
    }
  ], [
    screens,
    searchJobTypes,
    searchJobStatuses,
    searchJobPriorities,
    searchTags,
    jobTypesColumns,
    jobStatusesColumns,
    jobPrioritiesColumns,
    tagsColumns,
    jobTypesData,
    jobStatusesData,
    jobPrioritiesData,
    tagsData,
    jobTypesLoading,
    jobStatusesLoading,
    jobPrioritiesLoading,
    tagsLoading,
    jobTypesError,
    jobStatusesError,
    jobPrioritiesError,
    tagsError,
    selectedTagIds,
    handleSearchJobTypes,
    handleSearchJobStatuses,
    handleSearchJobPriorities,
    handleSearchTags,
    handleOpenAddJobTypeModal,
    handleOpenAddJobStatusModal,
    handleOpenAddJobPriorityModal,
    handleOpenAddTagModal,
    handleBulkDeleteTags
  ]);

  const containerPadding = screens.xs ? 12 : 24;

  return (
    <div style={{ minHeight: '100vh', width: '100%', background: '#f5f5f5' }}>
      {contextHolder}
      <div style={{ padding: `${containerPadding}px ${containerPadding}px 0 ${containerPadding}px`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: screens.xs ? 'wrap' : 'nowrap', gap: 16 }}>
        <div>
          <Typography.Title level={screens.xs ? 4 : 2} style={{ marginBottom: 4 }}>
            Configuration
          </Typography.Title>
          <Typography.Text type="secondary">
            Manage job types, statuses, priorities, and tags
          </Typography.Text>
        </div>
        <Button
          type="default"
          icon={<ArrowLeftOutlined />}
          onClick={handleNavigateToDashboard}
          style={{ width: screens.xs ? '100%' : 'auto' }}
        >
          Back to Dashboard
        </Button>
      </div>
      <div style={{ padding: containerPadding }}>
        <Card bordered={false}>
          <Tabs
            activeKey={activeTab}
            onChange={handleTabChange}
            items={tabItems}
          />
        </Card>
      </div>

      <Modal
        title={editingJobType ? 'Edit Job Type' : 'Add Job Type'}
        open={jobTypeModalVisible}
        onOk={handleSaveJobType}
        onCancel={() => {
          setJobTypeModalVisible(false);
          jobTypeForm.resetFields();
        }}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={jobTypeForm} layout="vertical">
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please enter a name' }]}
          >
            <Input placeholder="Enter job type name" />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
          <Form.Item
            label="Active"
            name="is_active"
            valuePropName="checked"
            initialValue={true}
          >
            <Switch defaultChecked />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingJobStatus ? 'Edit Job Status' : 'Add Job Status'}
        open={jobStatusModalVisible}
        onOk={handleSaveJobStatus}
        onCancel={() => {
          setJobStatusModalVisible(false);
          jobStatusForm.resetFields();
        }}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={jobStatusForm} layout="vertical">
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please enter a name' }]}
          >
            <Input placeholder="Enter status name" />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input.TextArea placeholder="Enter description" rows={3} />
          </Form.Item>
          <Form.Item
            label="Display Order"
            name="display_order"
            rules={[{ required: true, message: 'Please enter display order' }]}
          >
            <InputNumber placeholder="Enter display order" min={0} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item
            label="Active"
            name="is_active"
            valuePropName="checked"
            initialValue={true}
          >
            <Switch defaultChecked />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingJobPriority ? 'Edit Job Priority' : 'Add Job Priority'}
        open={jobPriorityModalVisible}
        onOk={handleSaveJobPriority}
        onCancel={() => {
          setJobPriorityModalVisible(false);
          jobPriorityForm.resetFields();
        }}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={jobPriorityForm} layout="vertical">
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please enter a name' }]}
          >
            <Input placeholder="Enter priority name" />
          </Form.Item>
          <Form.Item
            label="Level"
            name="level"
            rules={[{ required: true, message: 'Please enter a level' }]}
          >
            <InputNumber placeholder="Enter priority level" min={1} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="Color" name="color">
            <ColorPicker />
          </Form.Item>
          <Form.Item
            label="Active"
            name="is_active"
            valuePropName="checked"
            initialValue={true}
          >
            <Switch defaultChecked />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingTag ? 'Edit Tag' : 'Add Tag'}
        open={tagModalVisible}
        onOk={handleSaveTag}
        onCancel={() => {
          setTagModalVisible(false);
          tagForm.resetFields();
        }}
        okText="Save"
        cancelText="Cancel"
        destroyOnClose
      >
        <Form form={tagForm} layout="vertical">
          <Form.Item
            label="Name"
            name="name"
            rules={[{ required: true, message: 'Please enter a name' }]}
          >
            <Input placeholder="Enter tag name" />
          </Form.Item>
          <Form.Item label="Color" name="color">
            <ColorPicker />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ConfigurationPage;