// src/PrintJobs.js

import React, { useEffect, useState, useCallback, useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import {
  Table,
  Button,
  Flex,
  Space,
  Modal,
  Dropdown,
  message,
  notification,
  Input,
  Typography,
  Checkbox,
  Popover,
  Spin
} from 'antd'
import { createStyles } from 'antd-style'
import {
  LoadingOutlined,
  PlayCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  PauseCircleOutlined,
  QuestionCircleOutlined
} from '@ant-design/icons'

import { AuthContext } from '../../Auth/AuthContext'
import { SocketContext } from '../context/SocketContext'
import NewPrintJob from './PrintJobs/NewPrintJob'
import JobState from '../common/JobState'
import SubJobCounter from '../common/SubJobCounter'
import TimeDisplay from '../common/TimeDisplay'
import IdText from '../common/IdText'
import useColumnVisibility from '../hooks/useColumnVisibility'
import JobIcon from '../../Icons/JobIcon'
import InfoCircleIcon from '../../Icons/InfoCircleIcon'
import PlusIcon from '../../Icons/PlusIcon'
import ReloadIcon from '../../Icons/ReloadIcon'
import EditIcon from '../../Icons/EditIcon.jsx'
import XMarkIcon from '../../Icons/XMarkIcon.jsx'
import CheckIcon from '../../Icons/CheckIcon.jsx'

import config from '../../../config.js'

const { Text } = Typography

const useStyle = createStyles(({ css, token }) => {
  const { antCls } = token
  return {
    customTable: css`
      ${antCls}-table {
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
    `
  }
})

const PrintJobs = () => {
  const { styles } = useStyle()
  const [messageApi, contextHolder] = message.useMessage()
  const [notificationApi, notificationContextHolder] =
    notification.useNotification()
  const navigate = useNavigate()
  const [printJobsData, setPrintJobsData] = useState([])
  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [lazyLoading, setLazyLoading] = useState(false)

  const [filters, setFilters] = useState({})
  const [sorter, setSorter] = useState({})

  const [newPrintJobOpen, setNewPrintJobOpen] = useState(false)
  const [loading, setLoading] = useState(true)

  const getFilterDropdown = ({
    setSelectedKeys,
    selectedKeys,
    confirm,
    clearFilters,
    propertyName
  }) => {
    return (
      <div style={{ padding: 8 }}>
        <Space.Compact>
          <Input
            placeholder={'Search ' + propertyName}
            value={selectedKeys[0]}
            onChange={(e) =>
              setSelectedKeys(e.target.value ? [e.target.value] : [])
            }
            onPressEnter={() => confirm()}
            style={{ width: 200, display: 'block' }}
          />
          <Button
            onClick={() => {
              clearFilters()
              confirm()
            }}
            icon={<XMarkIcon />}
          />
          <Button
            type='primary'
            onClick={() => confirm()}
            icon={<CheckIcon />}
          />
        </Space.Compact>
      </div>
    )
  }

  // Column definitions
  const columns = [
    {
      title: '',
      dataIndex: '',
      key: '',
      width: 40,
      fixed: 'left',
      render: () => <JobIcon />
    },
    {
      title: 'GCode File Name',
      dataIndex: 'gcodeFile',
      key: 'gcodeFileName',
      width: 200,
      fixed: 'left',
      render: (gcodeFile) => <Text ellipsis>{gcodeFile.name}</Text>,
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters
      }) =>
        getFilterDropdown({
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          propertyName: 'GCode file name'
        }),
      onFilter: (value, record) =>
        record.gcodeFile.name.toLowerCase().includes(value.toLowerCase())
    },
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 165,
      render: (text) => <IdText id={text} type={'job'} longId={false} />,
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters
      }) =>
        getFilterDropdown({
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          propertyName: 'ID'
        }),
      onFilter: (value, record) =>
        record.id.toLowerCase().includes(value.toLowerCase())
    },
    {
      title: 'State',
      key: 'state',
      width: 240,
      render: (record) => {
        return <JobState job={record} showQuantity={false} showId={false} />
      },
      filterDropdown: ({
        setSelectedKeys,
        selectedKeys,
        confirm,
        clearFilters
      }) =>
        getFilterDropdown({
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          propertyName: 'state'
        }),
      onFilter: (value, record) =>
        record.state.type.toLowerCase().includes(value.toLowerCase())
    },
    {
      title: <CheckCircleOutlined />,
      key: 'complete',
      width: 70,
      render: (record) => {
        return <SubJobCounter job={record} state={{ type: 'complete' }} />
      }
    },
    {
      title: <PauseCircleOutlined />,
      key: 'queued',
      width: 70,
      render: (record) => {
        return <SubJobCounter job={record} state={{ type: 'queued' }} />
      }
    },
    {
      title: <CloseCircleOutlined />,
      key: 'failed',
      width: 70,
      render: (record) => {
        return <SubJobCounter job={record} state={{ type: 'failed' }} />
      }
    },
    {
      title: <QuestionCircleOutlined />,
      key: 'draft',
      width: 70,
      render: (record) => {
        return <SubJobCounter job={record} state={{ type: 'draft' }} />
      }
    },
    {
      title: 'Created At',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 180,
      render: (createdAt) => {
        if (createdAt) {
          return <TimeDisplay dateTime={createdAt} />
        } else {
          return 'n/a'
        }
      },
      sorter: true
    },
    {
      title: 'Started At',
      dataIndex: 'startedAt',
      key: 'startedAt',
      width: 180,
      render: (startedAt) => {
        if (startedAt) {
          return <TimeDisplay dateTime={startedAt} />
        } else {
          return 'n/a'
        }
      },
      sorter: true
    },
    {
      title: 'Actions',
      key: 'operation',
      fixed: 'right',
      width: 150,
      render: (record) => {
        return (
          <Space size='small'>
            {record.state.type === 'draft' ? (
              <Button
                icon={<PlayCircleOutlined />}
                onClick={() => handleDeployPrintJob(record.id)}
              />
            ) : (
              <Button
                icon={<InfoCircleIcon />}
                onClick={() =>
                  navigate(
                    `/dashboard/production/printjobs/info?printJobId=${record.id}`
                  )
                }
              />
            )}
            <Dropdown menu={getPrintJobActionItems(record.id)}>
              <Button>Actions</Button>
            </Dropdown>
          </Space>
        )
      }
    }
  ]

  const { authenticated } = useContext(AuthContext)
  const { socket } = useContext(SocketContext)

  const [columnVisibility, updateColumnVisibility] = useColumnVisibility(
    'PrintJobs',
    columns
  )

  const handleDeployPrintJob = (printJobId) => {
    if (socket) {
      messageApi.info(`Print job ${printJobId} deployment initiated`)
      socket.emit('server.job_queue.deploy', { printJobId }, (response) => {
        if (response == false) {
          notificationApi.error({
            message: 'Print job deployment failed',
            description: 'Please try again later'
          })
        } else {
          notificationApi.success({
            message: 'Print job deployment initiated',
            description: 'Please wait for the print job to start'
          })
        }
      })
      navigate(`/dashboard/production/printjobs/info?printJobId=${printJobId}`)
    } else {
      messageApi.error('Socket connection not available')
    }
  }

  const fetchPrintJobsData = useCallback(
    async (pageNum = 1, append = false) => {
      if (!authenticated) {
        return
      }
      try {
        const params = {
          page: pageNum,
          limit: 25,
          ...filters,
          sort: sorter.field,
          order: sorter.order
        }

        const response = await axios.get(`${config.backendUrl}/printjobs`, {
          params,
          headers: {
            Accept: 'application/json'
          },
          withCredentials: true
        })

        const newData = response.data
        setHasMore(newData.length === 25)

        if (append) {
          setPrintJobsData((prev) => [...prev, ...newData])
        } else {
          setPrintJobsData(newData)
        }

        setLoading(false)
        setLazyLoading(false)
      } catch (error) {
        setLoading(false)
        setLazyLoading(false)
        if (error.response) {
          messageApi.error(
            'Error fetching print jobs data:',
            error.response.status
          )
        } else {
          messageApi.error(
            'An unexpected error occurred. Please try again later.'
          )
        }
      }
    },
    [authenticated, messageApi, filters, sorter]
  )

  const handleScroll = useCallback(
    (e) => {
      const { target } = e
      const scrollHeight = target.scrollHeight
      const scrollTop = target.scrollTop
      const clientHeight = target.clientHeight

      // If we're near the bottom (within 100px) and not currently loading
      if (
        scrollHeight - scrollTop - clientHeight < 100 &&
        !lazyLoading &&
        hasMore
      ) {
        setLazyLoading(true)
        const nextPage = page + 1
        setPage(nextPage)
        fetchPrintJobsData(nextPage, true)
      }
    },
    [page, lazyLoading, hasMore, fetchPrintJobsData]
  )

  useEffect(() => {
    // Fetch initial data
    if (authenticated) {
      fetchPrintJobsData()
    }
  }, [authenticated, fetchPrintJobsData])

  const handleTableChange = (pagination, filters, sorter) => {
    const newFilters = {}
    Object.entries(filters).forEach(([key, value]) => {
      if (value && value.length > 0) {
        newFilters[key] = value[0]
      }
    })

    setFilters(newFilters)
    setSorter({
      field: sorter.field,
      order: sorter.order
    })
    setPage(1)
    fetchPrintJobsData(1)
  }

  const getPrintJobActionItems = (printJobId) => {
    return {
      items: [
        {
          label: 'Info',
          key: 'info',
          icon: <InfoCircleIcon />
        },
        {
          label: 'Edit',
          key: 'edit',
          icon: <EditIcon />
        }
      ],
      onClick: ({ key }) => {
        if (key === 'edit') {
          showNewPrintJobModal(printJobId)
        } else if (key === 'info') {
          navigate(
            `/dashboard/production/printjobs/info?printJobId=${printJobId}`
          )
        }
      }
    }
  }

  const actionItems = {
    items: [
      {
        label: 'New Print Job',
        key: 'newPrintJob',
        icon: <PlusIcon />
      },
      { type: 'divider' },
      {
        label: 'Reload List',
        key: 'reloadList',
        icon: <ReloadIcon />
      }
    ],
    onClick: ({ key }) => {
      if (key === 'newPrintJob') {
        showNewPrintJobModal()
      } else if (key === 'reloadList') {
        fetchPrintJobsData()
      }
    }
  }

  const showNewPrintJobModal = () => {
    setNewPrintJobOpen(true)
  }

  const getViewDropdownItems = () => {
    const columnItems = columns
      .filter((col) => col.key && col.title !== '')
      .map((col) => (
        <Checkbox
          checked={columnVisibility[col.key]}
          key={col.key}
          onChange={(e) => {
            updateColumnVisibility(col.key, e.target.checked)
          }}
        >
          {col.title}
        </Checkbox>
      ))

    return (
      <Flex vertical>
        <Flex vertical gap='middle' style={{ margin: '4px 8px' }}>
          {columnItems}
        </Flex>
      </Flex>
    )
  }

  const visibleColumns = columns.filter(
    (col) => !col.key || columnVisibility[col.key]
  )

  return (
    <>
      {notificationContextHolder}
      <Flex vertical={'true'} gap='large' style={{ height: '100%' }}>
        {contextHolder}
        <Space size='small'>
          <Dropdown menu={actionItems}>
            <Button>Actions</Button>
          </Dropdown>
          <Popover
            content={getViewDropdownItems()}
            placement='bottomLeft'
            arrow={false}
          >
            <Button>View</Button>
          </Popover>
          {lazyLoading && <Spin indicator={<LoadingOutlined />} />}
        </Space>

        <Table
          className={styles.customTable}
          dataSource={printJobsData}
          columns={visibleColumns}
          rowKey='id'
          pagination={false}
          loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
          scroll={{ y: 'calc(100vh - 270px)' }}
          onChange={handleTableChange}
          onScroll={handleScroll}
          showSorterTooltip={false}
        />
      </Flex>
      <Modal
        open={newPrintJobOpen}
        footer={null}
        width={700}
        onCancel={() => {
          setNewPrintJobOpen(false)
        }}
      >
        <NewPrintJob
          onOk={() => {
            setNewPrintJobOpen(false)
            messageApi.success('New print job created successfully.')
            fetchPrintJobsData()
          }}
          reset={newPrintJobOpen}
        />
      </Modal>
    </>
  )
}

export default PrintJobs