import { useState, useMemo, useEffect, useCallback } from 'react';
import {
  Table,
  Button,
  Input,
  Select,
  Card,
  Row,
  Col,
  Drawer,
  Form,
  DatePicker,
  Typography,
  Modal,
  Tabs,
  Upload,
  Badge,
  Tag,
  Space,
  Tooltip,
  Avatar,
  message,
  Grid,
  Alert
} from 'antd';
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  InboxOutlined,
  UserOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { JobsService } from '@/services/jobs';
import { JobConfigurationService } from '@/services/jobConfiguration';
import { UsersService } from '@/services/users';
import { OrganizationService } from '@/services/organization';
import { ROUTES } from '@/constants/routes';
import { parseError } from '@/utils/errorHandler';
import dayjs from 'dayjs';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { Dayjs } from 'dayjs';

const { useBreakpoint } = Grid;

interface Job {
  id: string;
  title: string;
  description?: string;
  job_type_id: string;
  job_status_id: string;
  job_priority_id: string;
  created_by_user_id: string;
  assigned_to_user_id?: string;
  department_id: string;
  team_id?: string;
  parent_job_id?: string;
  due_date?: string;
  started_at?: string;
  completed_at?: string;
  estimated_hours?: number;
  created_at: string;
  updated_at: string;
}

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

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

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

interface User {
  id: string;
  email: string;
  first_name: string;
  last_name: string;
  role: string;
  department_id?: string;
  phone?: string;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface Department {
  id: string;
  name: string;
  description?: string;
  created_at: string;
  updated_at: string;
}

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

interface JobListResponse {
  items: Job[];
  total: number;
  limit: number;
  offset: number;
}

interface StatusBadgeProps {
  statusId: string;
  statuses: JobStatus[];
}

const StatusBadge = ({ statusId, statuses }: StatusBadgeProps) => {
  const status = statuses?.find((s) => s.id === statusId);
  return <Badge status="processing" text={status?.name ?? '—'} />;
};

interface PriorityBadgeProps {
  priorityId: string;
  priorities: JobPriority[];
}

const PriorityBadge = ({ priorityId, priorities }: PriorityBadgeProps) => {
  const priority = priorities?.find((p) => p.id === priorityId);
  return (
    <Tag color={priority?.color ?? 'default'}>
      {priority?.name ?? '—'}
    </Tag>
  );
};

interface AssigneeAvatarProps {
  userId?: string;
  users: User[];
}

const AssigneeAvatar = ({ userId, users }: AssigneeAvatarProps) => {
  const user = users?.find((u) => u.id === userId);
  if (!user) return <Typography.Text type="secondary">Unassigned</Typography.Text>;
  return (
    <Space>
      <Avatar size="small" icon={<UserOutlined />} />
      <span>{`${user.first_name ?? ''} ${user.last_name ?? ''}`.trim()}</span>
    </Space>
  );
};

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

  const [jobs, setJobs] = useState<Job[]>([]);
  const [jobsTotal, setJobsTotal] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize] = useState<number>(25);
  const [activeStatusTab, setActiveStatusTab] = useState<string>('all');
  const [searchText, setSearchText] = useState<string>('');
  const [filterStatus, setFilterStatus] = useState<string | null>(null);
  const [filterPriority, setFilterPriority] = useState<string | null>(null);
  const [filterAssignee, setFilterAssignee] = useState<string | null>(null);
  const [filterDepartment, setFilterDepartment] = useState<string | null>(null);
  const [filterJobType, setFilterJobType] = useState<string | null>(null);
  const [filterDateRange, setFilterDateRange] = useState<[Dayjs, Dayjs] | null>(null);
  const [sortField] = useState<string>('created_at');
  const [sortOrder] = useState<string>('descend');
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [createDrawerVisible, setCreateDrawerVisible] = useState<boolean>(false);
  const [editDrawerVisible, setEditDrawerVisible] = useState<boolean>(false);
  const [editingJob, setEditingJob] = useState<Job | null>(null);
  const [deleteConfirmVisible, setDeleteConfirmVisible] = useState<boolean>(false);
  const [deletingJobId, setDeletingJobId] = useState<string | null>(null);
  const [bulkActionModalVisible, setBulkActionModalVisible] = useState<boolean>(false);
  const [bulkActionType, setBulkActionType] = useState<string | null>(null);

  const [jobTypes, setJobTypes] = useState<JobType[]>([]);
  const [jobStatuses, setJobStatuses] = useState<JobStatus[]>([]);
  const [jobPriorities, setJobPriorities] = useState<JobPriority[]>([]);
  const [users, setUsers] = useState<User[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);
  const [tags, setTags] = useState<Tag[]>([]);

  const [createForm] = Form.useForm();
  const [editForm] = Form.useForm();
  const [bulkStatusValue, setBulkStatusValue] = useState<string | null>(null);
  const [bulkAssigneeValue, setBulkAssigneeValue] = useState<string | null>(null);

  const hasSelectedRows = useMemo(() => selectedRowKeys.length > 0, [selectedRowKeys]);
  const selectedCount = useMemo(() => selectedRowKeys.length, [selectedRowKeys]);

  const {
    data: jobsData,
    loading: jobsLoading,
    error: jobsError,
    execute: fetchJobs
  } = useApi<JobListResponse>(JobsService.list);

  const {
    data: jobTypesData,
    error: jobTypesError,
    execute: fetchJobTypes
  } = useApi<{ items: JobType[] }>(JobConfigurationService.getJobTypes);

  const {
    data: jobStatusesData,
    error: jobStatusesError,
    execute: fetchJobStatuses
  } = useApi<{ items: JobStatus[] }>(JobConfigurationService.getJobStatuses);

  const {
    data: jobPrioritiesData,
    error: jobPrioritiesError,
    execute: fetchJobPriorities
  } = useApi<{ items: JobPriority[] }>(JobConfigurationService.getJobPriorities);

  const {
    data: usersData,
    error: usersError,
    execute: fetchUsers
  } = useApi<{ items: User[] }>(UsersService.list);

  const {
    data: departmentsData,
    error: departmentsError,
    execute: fetchDepartments
  } = useApi<{ items: Department[] }>(OrganizationService.getDepartments);

  const {
    data: tagsData,
    error: tagsError,
    execute: fetchTags
  } = useApi<{ items: Tag[] }>(JobConfigurationService.getTags);

  useEffect(() => {
    void fetchJobTypes({ limit: 100, is_active: true });
    void fetchJobStatuses({ limit: 100, is_active: true });
    void fetchJobPriorities({ limit: 100, is_active: true });
    void fetchUsers({ limit: 100, is_active: true });
    void fetchDepartments({ limit: 100 });
    void fetchTags({ limit: 100 });
  }, [fetchJobTypes, fetchJobStatuses, fetchJobPriorities, fetchUsers, fetchDepartments, fetchTags]);

  useEffect(() => {
    if (jobTypesData?.items) setJobTypes(jobTypesData.items);
  }, [jobTypesData]);

  useEffect(() => {
    if (jobStatusesData?.items) setJobStatuses(jobStatusesData.items);
  }, [jobStatusesData]);

  useEffect(() => {
    if (jobPrioritiesData?.items) setJobPriorities(jobPrioritiesData.items);
  }, [jobPrioritiesData]);

  useEffect(() => {
    if (usersData?.items) setUsers(usersData.items);
  }, [usersData]);

  useEffect(() => {
    if (departmentsData?.items) setDepartments(departmentsData.items);
  }, [departmentsData]);

  useEffect(() => {
    if (tagsData?.items) setTags(tagsData.items);
  }, [tagsData]);

  useEffect(() => {
    void fetchJobs({
      limit: pageSize,
      offset: (currentPage - 1) * pageSize,
      job_status_id: filterStatus ?? undefined,
      job_priority_id: filterPriority ?? undefined,
      assigned_to_user_id: filterAssignee ?? undefined,
      department_id: filterDepartment ?? undefined
    });
  }, [fetchJobs, currentPage, pageSize, filterStatus, filterPriority, filterAssignee, filterDepartment]);

  useEffect(() => {
    if (jobsData) {
      setJobs(jobsData.items ?? []);
      setJobsTotal(jobsData.total ?? 0);
    }
  }, [jobsData]);

  useEffect(() => {
    if (jobsError) {
      const { message: errMsg } = parseError(jobsError);
      messageApi.error(errMsg);
    }
  }, [jobsError, messageApi]);

  useEffect(() => {
    if (jobTypesError) {
      const { message: errMsg } = parseError(jobTypesError);
      messageApi.error(errMsg);
    }
  }, [jobTypesError, messageApi]);

  useEffect(() => {
    if (jobStatusesError) {
      const { message: errMsg } = parseError(jobStatusesError);
      messageApi.error(errMsg);
    }
  }, [jobStatusesError, messageApi]);

  useEffect(() => {
    if (jobPrioritiesError) {
      const { message: errMsg } = parseError(jobPrioritiesError);
      messageApi.error(errMsg);
    }
  }, [jobPrioritiesError, messageApi]);

  useEffect(() => {
    if (usersError) {
      const { message: errMsg } = parseError(usersError);
      messageApi.error(errMsg);
    }
  }, [usersError, messageApi]);

  useEffect(() => {
    if (departmentsError) {
      const { message: errMsg } = parseError(departmentsError);
      messageApi.error(errMsg);
    }
  }, [departmentsError, messageApi]);

  useEffect(() => {
    if (tagsError) {
      const { message: errMsg } = parseError(tagsError);
      messageApi.error(errMsg);
    }
  }, [tagsError, messageApi]);

  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value);
    setCurrentPage(1);
  }, []);

  const handleStatusTabChange = useCallback((key: string) => {
    setActiveStatusTab(key);
    setFilterStatus(key === 'all' ? null : key);
    setCurrentPage(1);
  }, []);

  const handleFilterStatusChange = useCallback((value: string) => {
    setFilterStatus(value);
    setCurrentPage(1);
  }, []);

  const handleFilterPriorityChange = useCallback((value: string) => {
    setFilterPriority(value);
    setCurrentPage(1);
  }, []);

  const handleFilterAssigneeChange = useCallback((value: string) => {
    setFilterAssignee(value);
    setCurrentPage(1);
  }, []);

  const handleFilterDepartmentChange = useCallback((value: string) => {
    setFilterDepartment(value);
    setCurrentPage(1);
  }, []);

  const handleFilterJobTypeChange = useCallback((value: string) => {
    setFilterJobType(value);
    setCurrentPage(1);
  }, []);

  const handleFilterDateRangeChange = useCallback((dates: [Dayjs, Dayjs] | null) => {
    setFilterDateRange(dates);
    setCurrentPage(1);
  }, []);

  const handlePageChange = useCallback((page: number) => {
    setCurrentPage(page);
  }, []);

  const handleRowSelectionChange = useCallback((keys: React.Key[]) => {
    setSelectedRowKeys(keys);
  }, []);

  const handleOpenCreateDrawer = useCallback(() => {
    setCreateDrawerVisible(true);
  }, []);

  const handleCloseCreateDrawer = useCallback(() => {
    setCreateDrawerVisible(false);
    createForm.resetFields();
  }, [createForm]);

  const handleOpenEditDrawer = useCallback((record: Job) => {
    setEditDrawerVisible(true);
    setEditingJob(record);
    editForm.setFieldsValue({
      ...record,
      due_date: record.due_date ? dayjs(record.due_date) : null
    });
  }, [editForm]);

  const handleCloseEditDrawer = useCallback(() => {
    setEditDrawerVisible(false);
    setEditingJob(null);
    editForm.resetFields();
  }, [editForm]);

  const handleOpenDeleteConfirm = useCallback((jobId: string) => {
    setDeleteConfirmVisible(true);
    setDeletingJobId(jobId);
  }, []);

  const handleCloseDeleteConfirm = useCallback(() => {
    setDeleteConfirmVisible(false);
    setDeletingJobId(null);
  }, []);

  const handleOpenBulkActionModal = useCallback((actionType: string) => {
    setBulkActionModalVisible(true);
    setBulkActionType(actionType);
  }, []);

  const handleCloseBulkActionModal = useCallback(() => {
    setBulkActionModalVisible(false);
    setBulkActionType(null);
    setBulkStatusValue(null);
    setBulkAssigneeValue(null);
  }, []);

  const handleCreateJob = useCallback(async () => {
    try {
      const values = await createForm.validateFields();
      await JobsService.create({
        title: values.title,
        description: values.description,
        job_type_id: values.job_type_id,
        job_priority_id: values.job_priority_id,
        job_status_id: values.job_status_id ?? jobStatuses[0]?.id,
        department_id: values.department_id,
        assigned_to_user_id: values.assigned_to_user_id,
        due_date: values.due_date ? values.due_date.toISOString() : undefined,
        estimated_hours: values.estimated_hours,
        created_by_user_id: '1'
      });
      messageApi.success('Job created successfully!');
      setCreateDrawerVisible(false);
      createForm.resetFields();
      void fetchJobs({
        limit: pageSize,
        offset: (currentPage - 1) * pageSize,
        job_status_id: filterStatus ?? undefined,
        job_priority_id: filterPriority ?? undefined,
        assigned_to_user_id: filterAssignee ?? undefined,
        department_id: filterDepartment ?? undefined
      });
    } catch (e) {
      const { message: errMsg } = parseError(e);
      messageApi.error(errMsg);
    }
  }, [createForm, jobStatuses, messageApi, fetchJobs, pageSize, currentPage, filterStatus, filterPriority, filterAssignee, filterDepartment]);

  const handleEditJob = useCallback(async () => {
    if (!editingJob) return;
    try {
      const values = await editForm.validateFields();
      await JobsService.patch(editingJob.id, {
        title: values.title,
        description: values.description,
        job_type_id: values.job_type_id,
        job_priority_id: values.job_priority_id,
        job_status_id: values.job_status_id,
        department_id: values.department_id,
        assigned_to_user_id: values.assigned_to_user_id,
        due_date: values.due_date ? values.due_date.toISOString() : undefined,
        estimated_hours: values.estimated_hours
      });
      messageApi.success('Job updated successfully!');
      setEditDrawerVisible(false);
      setEditingJob(null);
      editForm.resetFields();
      void fetchJobs({
        limit: pageSize,
        offset: (currentPage - 1) * pageSize,
        job_status_id: filterStatus ?? undefined,
        job_priority_id: filterPriority ?? undefined,
        assigned_to_user_id: filterAssignee ?? undefined,
        department_id: filterDepartment ?? undefined
      });
    } catch (e) {
      const { message: errMsg } = parseError(e);
      messageApi.error(errMsg);
    }
  }, [editingJob, editForm, messageApi, fetchJobs, pageSize, currentPage, filterStatus, filterPriority, filterAssignee, filterDepartment]);

  const handleDeleteJob = useCallback(async () => {
    if (!deletingJobId) return;
    try {
      await JobsService.delete(deletingJobId);
      messageApi.success('Job deleted successfully!');
      setDeleteConfirmVisible(false);
      setDeletingJobId(null);
      void fetchJobs({
        limit: pageSize,
        offset: (currentPage - 1) * pageSize,
        job_status_id: filterStatus ?? undefined,
        job_priority_id: filterPriority ?? undefined,
        assigned_to_user_id: filterAssignee ?? undefined,
        department_id: filterDepartment ?? undefined
      });
    } catch (e) {
      const { message: errMsg } = parseError(e);
      messageApi.error(errMsg);
    }
  }, [deletingJobId, messageApi, fetchJobs, pageSize, currentPage, filterStatus, filterPriority, filterAssignee, filterDepartment]);

  const handleBulkAction = useCallback(async () => {
    if (bulkActionType === 'status' && bulkStatusValue) {
      try {
        for (const jobId of selectedRowKeys) {
          await JobsService.createStatus(String(jobId), { job_status_id: bulkStatusValue });
        }
        messageApi.success('Bulk status update completed!');
        setBulkActionModalVisible(false);
        setSelectedRowKeys([]);
        setBulkStatusValue(null);
        void fetchJobs({
          limit: pageSize,
          offset: (currentPage - 1) * pageSize,
          job_status_id: filterStatus ?? undefined,
          job_priority_id: filterPriority ?? undefined,
          assigned_to_user_id: filterAssignee ?? undefined,
          department_id: filterDepartment ?? undefined
        });
      } catch (e) {
        const { message: errMsg } = parseError(e);
        messageApi.error(errMsg);
      }
    } else if (bulkActionType === 'assign' && bulkAssigneeValue) {
      try {
        for (const jobId of selectedRowKeys) {
          await JobsService.createAssign(String(jobId), { assigned_to_user_id: bulkAssigneeValue });
        }
        messageApi.success('Bulk assignment completed!');
        setBulkActionModalVisible(false);
        setSelectedRowKeys([]);
        setBulkAssigneeValue(null);
        void fetchJobs({
          limit: pageSize,
          offset: (currentPage - 1) * pageSize,
          job_status_id: filterStatus ?? undefined,
          job_priority_id: filterPriority ?? undefined,
          assigned_to_user_id: filterAssignee ?? undefined,
          department_id: filterDepartment ?? undefined
        });
      } catch (e) {
        const { message: errMsg } = parseError(e);
        messageApi.error(errMsg);
      }
    }
  }, [bulkActionType, bulkStatusValue, bulkAssigneeValue, selectedRowKeys, messageApi, fetchJobs, pageSize, currentPage, filterStatus, filterPriority, filterAssignee, filterDepartment]);

  const handleRowClick = useCallback((record: Job) => {
    navigate(ROUTES.JOB_DETAIL.replace(':id', record.id));
  }, [navigate]);

  const jobTypeOptions = useMemo(() => {
    return (jobTypes ?? []).map((jt) => ({ label: jt.name, value: jt.id }));
  }, [jobTypes]);

  const jobStatusOptions = useMemo(() => {
    return (jobStatuses ?? []).map((js) => ({ label: js.name, value: js.id }));
  }, [jobStatuses]);

  const jobPriorityOptions = useMemo(() => {
    return (jobPriorities ?? []).map((jp) => ({ label: jp.name, value: jp.id }));
  }, [jobPriorities]);

  const userOptions = useMemo(() => {
    return (users ?? []).map((u) => ({
      label: `${u.first_name ?? ''} ${u.last_name ?? ''}`.trim(),
      value: u.id
    }));
  }, [users]);

  const departmentOptions = useMemo(() => {
    return (departments ?? []).map((d) => ({ label: d.name, value: d.id }));
  }, [departments]);

  const tagOptions = useMemo(() => {
    return (tags ?? []).map((t) => ({ label: t.name, value: t.id }));
  }, [tags]);

  const columns: ColumnsType<Job> = useMemo(() => {
    const cols: ColumnsType<Job> = [
      {
        title: 'Job ID',
        dataIndex: 'id',
        key: 'id',
        width: 100,
        sorter: true,
        ellipsis: true,
        render: (id: string) => <Typography.Text copyable>{id.substring(0, 8)}</Typography.Text>
      },
      {
        title: 'Title',
        dataIndex: 'title',
        key: 'title',
        sorter: true,
        ellipsis: true
      },
      {
        title: 'Status',
        dataIndex: 'job_status_id',
        key: 'job_status_id',
        sorter: true,
        render: (statusId: string) => <StatusBadge statusId={statusId} statuses={jobStatuses} />
      },
      {
        title: 'Priority',
        dataIndex: 'job_priority_id',
        key: 'job_priority_id',
        sorter: true,
        render: (priorityId: string) => <PriorityBadge priorityId={priorityId} priorities={jobPriorities} />
      },
      {
        title: 'Assignee',
        dataIndex: 'assigned_to_user_id',
        key: 'assigned_to_user_id',
        sorter: true,
        render: (userId?: string) => <AssigneeAvatar userId={userId} users={users} />
      },
      {
        title: 'Due Date',
        dataIndex: 'due_date',
        key: 'due_date',
        sorter: true,
        render: (date?: string) => date ? dayjs(date).format('MMM D, YYYY') : '—'
      },
      {
        title: 'Created',
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: true,
        responsive: ['lg'],
        render: (date: string) => dayjs(date).format('MMM D, YYYY')
      },
      {
        title: 'Actions',
        key: 'actions',
        width: 150,
        fixed: 'right',
        render: (_: unknown, record: Job) => (
          <Space size="small">
            <Tooltip title="View">
              <Button
                size="small"
                icon={<EyeOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  handleRowClick(record);
                }}
              />
            </Tooltip>
            <Tooltip title="Edit">
              <Button
                size="small"
                icon={<EditOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  handleOpenEditDrawer(record);
                }}
              />
            </Tooltip>
            <Tooltip title="Delete">
              <Button
                size="small"
                danger
                icon={<DeleteOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                  handleOpenDeleteConfirm(record.id);
                }}
              />
            </Tooltip>
          </Space>
        )
      }
    ];
    return cols;
  }, [jobStatuses, jobPriorities, users, handleRowClick, handleOpenEditDrawer, handleOpenDeleteConfirm]);

  const tabItems = useMemo(() => [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'assigned', label: 'Assigned' },
    { key: 'in_progress', label: 'In Progress' },
    { key: 'blocked', label: 'Blocked' },
    { key: 'pending_review', label: 'Pending Review' },
    { key: 'completed', label: 'Completed' },
    { key: 'cancelled', label: 'Cancelled' }
  ], []);

  const pagination: TablePaginationConfig = useMemo(() => ({
    current: currentPage,
    pageSize,
    total: jobsTotal,
    onChange: handlePageChange,
    showSizeChanger: false,
    showTotal: (total) => `Total ${total} jobs`
  }), [currentPage, pageSize, jobsTotal, handlePageChange]);

  return (
    <div style={{ padding: (screens.xs ?? false) ? 12 : 24, minHeight: '100%' }}>
      {contextHolder}
      
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <Typography.Title level={2} style={{ margin: 0 }}>Jobs</Typography.Title>
        <Button
          type="primary"
          icon={<PlusOutlined />}
          size="large"
          onClick={handleOpenCreateDrawer}
        >
          Create Job
        </Button>
      </div>

      <Tabs
        activeKey={activeStatusTab}
        onChange={handleStatusTabChange}
        type="card"
        style={{ marginBottom: 16 }}
        items={tabItems}
      />

      <Card size="small" style={{ marginBottom: 16 }}>
        <Row gutter={[12, 12]} align="middle">
          <Col xs={24} sm={12} md={8} lg={6}>
            <Input.Search
              placeholder="Search by title or description..."
              value={searchText}
              onChange={handleSearchChange}
              allowClear
            />
          </Col>
          <Col xs={12} sm={8} md={4} lg={3}>
            <Select
              placeholder="Status"
              value={filterStatus}
              onChange={handleFilterStatusChange}
              allowClear
              style={{ width: '100%' }}
              options={jobStatusOptions}
            />
          </Col>
          <Col xs={12} sm={8} md={4} lg={3}>
            <Select
              placeholder="Priority"
              value={filterPriority}
              onChange={handleFilterPriorityChange}
              allowClear
              style={{ width: '100%' }}
              options={jobPriorityOptions}
            />
          </Col>
          <Col xs={12} sm={8} md={4} lg={3}>
            <Select
              placeholder="Assignee"
              value={filterAssignee}
              onChange={handleFilterAssigneeChange}
              allowClear
              showSearch
              optionFilterProp="label"
              style={{ width: '100%' }}
              options={userOptions}
            />
          </Col>
          <Col xs={12} sm={8} md={4} lg={3}>
            <Select
              placeholder="Department"
              value={filterDepartment}
              onChange={handleFilterDepartmentChange}
              allowClear
              style={{ width: '100%' }}
              options={departmentOptions}
            />
          </Col>
          <Col xs={12} sm={8} md={4} lg={3}>
            <Select
              placeholder="Job Type"
              value={filterJobType}
              onChange={handleFilterJobTypeChange}
              allowClear
              style={{ width: '100%' }}
              options={jobTypeOptions}
            />
          </Col>
          <Col xs={24} sm={12} md={8} lg={6}>
            <DatePicker.RangePicker
              value={filterDateRange}
              onChange={handleFilterDateRangeChange}
              placeholder={['Start Date', 'End Date']}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </Card>

      {hasSelectedRows && (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            padding: 12,
            backgroundColor: '#e6f4ff',
            borderRadius: 6,
            marginBottom: 16
          }}
        >
          <Typography.Text strong>{selectedCount} selected</Typography.Text>
          <Button
            type="default"
            size="small"
            onClick={() => handleOpenBulkActionModal('status')}
          >
            Update Status
          </Button>
          <Button
            type="default"
            size="small"
            onClick={() => handleOpenBulkActionModal('assign')}
          >
            Assign To
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => setSelectedRowKeys([])}
          >
            Clear Selection
          </Button>
        </div>
      )}

      <Card bodyStyle={{ padding: 0 }}>
        <Table<Job>
          rowKey="id"
          columns={columns}
          dataSource={jobs}
          loading={jobsLoading}
          pagination={pagination}
          scroll={{ x: 'max-content' }}
          size={(screens.xs ?? false) ? 'small' : 'middle'}
          rowSelection={{
            selectedRowKeys,
            onChange: handleRowSelectionChange
          }}
          onRow={(record) => ({
            onClick: () => handleRowClick(record),
            style: { cursor: 'pointer' }
          })}
        />
      </Card>

      <Drawer
        title="Create New Job"
        open={createDrawerVisible}
        onClose={handleCloseCreateDrawer}
        width={(screens.xs ?? false) ? '100%' : 720}
        placement="right"
        destroyOnClose
      >
        <Form
          form={createForm}
          layout="vertical"
          requiredMark
          onFinish={handleCreateJob}
        >
          <Form.Item
            label="Title"
            name="title"
            rules={[
              { required: true, message: 'Title is required' },
              { min: 5, message: 'Title must be at least 5 characters' }
            ]}
          >
            <Input placeholder="Enter job title" maxLength={200} />
          </Form.Item>

          <Form.Item
            label="Description"
            name="description"
            rules={[{ required: true, message: 'Description is required' }]}
          >
            <Input.TextArea
              placeholder="Enter job description"
              rows={4}
              showCount
              maxLength={5000}
            />
          </Form.Item>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="Job Type"
                name="job_type_id"
                rules={[{ required: true, message: 'Job type is required' }]}
              >
                <Select placeholder="Select job type" options={jobTypeOptions} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="Priority"
                name="job_priority_id"
                rules={[{ required: true, message: 'Priority is required' }]}
              >
                <Select placeholder="Select priority" options={jobPriorityOptions} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Due Date" name="due_date">
                <DatePicker
                  style={{ width: '100%' }}
                  placeholder="Select due date"
                  showTime
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Assignee" name="assigned_to_user_id">
                <Select
                  placeholder="Select assignee"
                  showSearch
                  optionFilterProp="label"
                  allowClear
                  options={userOptions}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="Department"
                name="department_id"
                rules={[{ required: true, message: 'Department is required' }]}
              >
                <Select placeholder="Select department" options={departmentOptions} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Tags" name="tag_ids">
                <Select
                  placeholder="Select tags"
                  mode="multiple"
                  options={tagOptions}
                  allowClear
                />
              </Form.Item>
            </Col>
          </Row>

          <div style={{ marginTop: 16 }}>
            <Typography.Title level={5}>Attachments</Typography.Title>
            <Upload.Dragger
              multiple
              maxCount={10}
              accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png,.gif,.zip"
            >
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">Click or drag file to upload</p>
            </Upload.Dragger>
          </div>

          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              gap: 12,
              marginTop: 24
            }}
          >
            <Button type="default" onClick={handleCloseCreateDrawer}>
              Cancel
            </Button>
            <Button type="primary" htmlType="submit">
              Create Job
            </Button>
          </div>
        </Form>
      </Drawer>

      <Drawer
        title="Edit Job"
        open={editDrawerVisible}
        onClose={handleCloseEditDrawer}
        width={(screens.xs ?? false) ? '100%' : 720}
        placement="right"
        destroyOnClose
      >
        <Form
          form={editForm}
          layout="vertical"
          requiredMark
          onFinish={handleEditJob}
        >
          <Form.Item
            label="Title"
            name="title"
            rules={[
              { required: true, message: 'Title is required' },
              { min: 5, message: 'Title must be at least 5 characters' }
            ]}
          >
            <Input placeholder="Enter job title" maxLength={200} />
          </Form.Item>

          <Form.Item label="Description" name="description">
            <Input.TextArea
              placeholder="Enter job description"
              rows={4}
              showCount
              maxLength={5000}
            />
          </Form.Item>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Job Type" name="job_type_id">
                <Select placeholder="Select job type" options={jobTypeOptions} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Priority" name="job_priority_id">
                <Select placeholder="Select priority" options={jobPriorityOptions} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Status" name="job_status_id">
                <Select placeholder="Select status" options={jobStatusOptions} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Assignee" name="assigned_to_user_id">
                <Select
                  placeholder="Select assignee"
                  showSearch
                  optionFilterProp="label"
                  allowClear
                  options={userOptions}
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="Department" name="department_id">
                <Select placeholder="Select department" options={departmentOptions} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="Due Date" name="due_date">
                <DatePicker
                  style={{ width: '100%' }}
                  placeholder="Select due date"
                  showTime
                />
              </Form.Item>
            </Col>
          </Row>

          <div
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              gap: 12,
              marginTop: 24
            }}
          >
            <Button type="default" onClick={handleCloseEditDrawer}>
              Cancel
            </Button>
            <Button type="primary" htmlType="submit">
              Update Job
            </Button>
          </div>
        </Form>
      </Drawer>

      <Modal
        title="Confirm Deletion"
        open={deleteConfirmVisible}
        onOk={handleDeleteJob}
        onCancel={handleCloseDeleteConfirm}
        okText="Delete"
        okButtonProps={{ danger: true }}
        cancelText="Cancel"
      >
        <Typography.Text type="danger">
          Are you sure you want to delete this job? This action cannot be undone.
        </Typography.Text>
      </Modal>

      <Modal
        title="Bulk Action"
        open={bulkActionModalVisible}
        onOk={handleBulkAction}
        onCancel={handleCloseBulkActionModal}
        okText="Apply"
        cancelText="Cancel"
      >
        {bulkActionType === 'status' && (
          <Select
            placeholder="Select new status"
            value={bulkStatusValue}
            onChange={setBulkStatusValue}
            options={jobStatusOptions}
            style={{ width: '100%' }}
          />
        )}
        {bulkActionType === 'assign' && (
          <Select
            placeholder="Select assignee"
            value={bulkAssigneeValue}
            onChange={setBulkAssigneeValue}
            showSearch
            optionFilterProp="label"
            options={userOptions}
            style={{ width: '100%' }}
          />
        )}
      </Modal>
    </div>
  );
};

export default JobListPage;