import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import {
  Layout,
  Row,
  Col,
  Card,
  Statistic,
  Button,
  Space,
  Form,
  DatePicker,
  Select,
  Table,
  Tabs,
  Modal,
  Input,
  Typography,
  message,
  Grid,
  Alert
} from 'antd';
import {
  ArrowLeftOutlined,
  PlusOutlined,
  BarChartOutlined,
  FilePdfOutlined,
  FileExcelOutlined,
  FileTextOutlined,
  SaveOutlined,
  PlayCircleOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { ReportsService } from '@/services/reports';
import { JobsService } from '@/services/jobs';
import { OrganizationService } from '@/services/organization';
import { JobConfigurationService } from '@/services/jobConfiguration';
import { ROUTES } from '@/constants/routes';
import { parseError } from '@/utils/errorHandler';
import { useAppContext } from '@/store/AppStore';
import type { ColumnsType } from 'antd/es/table';
import type { Dayjs } from 'dayjs';

const { useBreakpoint } = Grid;

interface ReportMetrics {
  totalJobs: number;
  completionRate: number;
  avgCompletionTime: number;
  onTimeRate: number;
  overduePercentage: number;
}

interface ReportResponse {
  id: string;
  name: string;
  description?: string;
  report_type: string;
  parameters?: Record<string, unknown>;
  file_path?: string;
  export_format?: string;
  generated_at?: string;
  generated_by_user_id: string;
  created_at: string;
  updated_at: string;
}

interface ReportListResponse {
  items: ReportResponse[];
  total: number;
  limit: number;
  offset: number;
}

interface JobResponse {
  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 PaginatedJobResponse {
  items: JobResponse[];
  total: number;
  limit: number;
  offset: number;
}

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

interface PaginatedDepartmentResponse {
  items: DepartmentResponse[];
  total: number;
  limit: number;
  offset: number;
}

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

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

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

const ReportsPage = () => {
  const navigate = useNavigate();
  const screens = useBreakpoint();
  const [messageApi, contextHolder] = message.useMessage();
  const { currentUser } = useAppContext();

  const [reportMetrics, setReportMetrics] = useState<ReportMetrics>({
    totalJobs: 0,
    completionRate: 0,
    avgCompletionTime: 0,
    onTimeRate: 0,
    overduePercentage: 0
  });

  const [filterDateRange, setFilterDateRange] = useState<[Dayjs, Dayjs] | null>(null);
  const [filterDepartmentId, setFilterDepartmentId] = useState<string | null>(null);
  const [filterJobTypeId, setFilterJobTypeId] = useState<string | null>(null);
  const [filterStatusIds, setFilterStatusIds] = useState<string[]>([]);
  const [filterPriorityIds, setFilterPriorityIds] = useState<string[]>([]);
  const [jobs, setJobs] = useState<JobResponse[]>([]);
  const [jobsTotal, setJobsTotal] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);
  const [saveModalVisible, setSaveModalVisible] = useState<boolean>(false);
  const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
  const [activeTab, setActiveTab] = useState<string>('results');
  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);

  const [saveForm] = Form.useForm();
  const [createForm] = Form.useForm();

  const {
    data: savedReportsData,
    loading: savedReportsLoading,
    error: savedReportsError,
    execute: fetchSavedReports
  } = useApi<ReportListResponse>(ReportsService.list);

  const {
    data: departmentsData,
    loading: departmentsLoading,
    error: departmentsError,
    execute: fetchDepartments
  } = useApi<PaginatedDepartmentResponse>(OrganizationService.getDepartments);

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

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

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

  useEffect(() => {
    void fetchSavedReports({ limit: 50, offset: 0, generated_by_user_id: currentUser?.id });
    void fetchDepartments({ limit: 100, offset: 0 });
    void fetchJobTypes({ limit: 100, offset: 0, is_active: true });
    void fetchJobStatuses({ limit: 100, offset: 0, is_active: true });
    void fetchJobPriorities({ limit: 100, offset: 0, is_active: true });
  }, [fetchSavedReports, fetchDepartments, fetchJobTypes, fetchJobStatuses, fetchJobPriorities, currentUser?.id]);

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

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

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

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

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

  const savedReports = useMemo(() => savedReportsData?.items ?? [], [savedReportsData]);
  const departments = useMemo(() => departmentsData?.items ?? [], [departmentsData]);
  const jobTypes = useMemo(() => jobTypesData?.items ?? [], [jobTypesData]);
  const jobStatuses = useMemo(() => jobStatusesData?.items ?? [], [jobStatusesData]);
  const jobPriorities = useMemo(() => jobPrioritiesData?.items ?? [], [jobPrioritiesData]);

  const completionRateDisplay = useMemo(
    () => `${reportMetrics.completionRate}%`,
    [reportMetrics.completionRate]
  );

  const avgCompletionTimeDisplay = useMemo(
    () => `${reportMetrics.avgCompletionTime} hrs`,
    [reportMetrics.avgCompletionTime]
  );

  const onTimeRateDisplay = useMemo(
    () => `${reportMetrics.onTimeRate}%`,
    [reportMetrics.onTimeRate]
  );

  const overdueDisplay = useMemo(
    () => `${reportMetrics.overduePercentage}%`,
    [reportMetrics.overduePercentage]
  );

  const generateReport = useCallback(async () => {
    setLoading(true);
    try {
      const queryParams: Record<string, unknown> = {
        limit: 100,
        offset: 0
      };

      if (filterStatusIds.length > 0) {
        queryParams.job_status_id = filterStatusIds.join(',');
      }
      if (filterPriorityIds.length > 0) {
        queryParams.job_priority_id = filterPriorityIds.join(',');
      }
      if (filterDepartmentId) {
        queryParams.department_id = filterDepartmentId;
      }

      const response = await JobsService.list(queryParams);
      const jobItems = (response.data as PaginatedJobResponse).items ?? [];

      setJobs(jobItems);
      setJobsTotal(jobItems.length);

      const totalJobs = jobItems.length;
      const completedJobs = jobItems.filter((j) => j.completed_at).length;
      const completionRate = totalJobs > 0 ? Math.round((completedJobs / totalJobs) * 100) : 0;

      const completedWithTimes = jobItems.filter(
        (j) => j.completed_at && j.started_at
      );
      let avgCompletionTime = 0;
      if (completedWithTimes.length > 0) {
        const totalTime = completedWithTimes.reduce((acc, j) => {
          const start = new Date(j.started_at!).getTime();
          const end = new Date(j.completed_at!).getTime();
          return acc + (end - start);
        }, 0);
        avgCompletionTime = Math.round(totalTime / completedWithTimes.length / (1000 * 60 * 60));
      }

      const jobsWithDueDate = jobItems.filter((j) => j.due_date && j.completed_at);
      const onTimeJobs = jobsWithDueDate.filter((j) => {
        const dueDate = new Date(j.due_date!).getTime();
        const completedDate = new Date(j.completed_at!).getTime();
        return completedDate <= dueDate;
      });
      const onTimeRate = jobsWithDueDate.length > 0
        ? Math.round((onTimeJobs.length / jobsWithDueDate.length) * 100)
        : 0;

      const now = Date.now();
      const overdueJobs = jobItems.filter((j) => {
        if (!j.due_date || j.completed_at) return false;
        const dueDate = new Date(j.due_date).getTime();
        return now > dueDate;
      });
      const overduePercentage = totalJobs > 0 ? Math.round((overdueJobs.length / totalJobs) * 100) : 0;

      setReportMetrics({
        totalJobs,
        completionRate,
        avgCompletionTime,
        onTimeRate,
        overduePercentage
      });

      messageApi.success('Report generated successfully');
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    } finally {
      setLoading(false);
    }
  }, [
    filterStatusIds,
    filterPriorityIds,
    filterDepartmentId,
    messageApi
  ]);

  const openSaveModal = useCallback(() => {
    setSaveModalVisible(true);
  }, []);

  const closeSaveModal = useCallback(() => {
    setSaveModalVisible(false);
    saveForm.resetFields();
  }, [saveForm]);

  const openCreateModal = useCallback(() => {
    setCreateModalVisible(true);
  }, []);

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

  const handleSaveReport = useCallback(async () => {
    try {
      const values = await saveForm.validateFields();
      const payload = {
        name: values.name,
        description: values.description,
        report_type: 'custom',
        parameters: {
          dateRange: filterDateRange,
          departmentId: filterDepartmentId,
          jobTypeId: filterJobTypeId,
          statusIds: filterStatusIds,
          priorityIds: filterPriorityIds
        },
        generated_by_user_id: currentUser?.id
      };

      await ReportsService.create(payload);
      messageApi.success('Report saved successfully');
      closeSaveModal();
      void fetchSavedReports({ limit: 50, offset: 0, generated_by_user_id: currentUser?.id });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [
    saveForm,
    filterDateRange,
    filterDepartmentId,
    filterJobTypeId,
    filterStatusIds,
    filterPriorityIds,
    currentUser?.id,
    messageApi,
    closeSaveModal,
    fetchSavedReports
  ]);

  const handleCreateReport = useCallback(async () => {
    try {
      const values = await createForm.validateFields();
      const payload = {
        name: values.name,
        description: values.description,
        report_type: values.report_type,
        parameters: values.parameters ?? {},
        export_format: values.export_format,
        generated_by_user_id: currentUser?.id
      };

      await ReportsService.create(payload);
      messageApi.success('Report created successfully');
      closeCreateModal();
      void fetchSavedReports({ limit: 50, offset: 0, generated_by_user_id: currentUser?.id });
    } catch (e) {
      const { message: errorMsg } = parseError(e);
      messageApi.error(errorMsg);
    }
  }, [createForm, currentUser?.id, messageApi, closeCreateModal, fetchSavedReports]);

  const handleRunSavedReport = useCallback(
    async (record: ReportResponse) => {
      setLoading(true);
      setSelectedReportId(record.id);
      try {
        const params = (record.parameters as Record<string, unknown>) ?? {};
        const queryParams: Record<string, unknown> = {
          limit: 100,
          offset: 0
        };

        if (params.statusIds && Array.isArray(params.statusIds) && params.statusIds.length > 0) {
          queryParams.job_status_id = (params.statusIds as string[]).join(',');
        }
        if (params.priorityIds && Array.isArray(params.priorityIds) && params.priorityIds.length > 0) {
          queryParams.job_priority_id = (params.priorityIds as string[]).join(',');
        }
        if (params.departmentId) {
          queryParams.department_id = params.departmentId;
        }

        const response = await JobsService.list(queryParams);
        const jobItems = (response.data as PaginatedJobResponse).items ?? [];
        setJobs(jobItems);
        messageApi.info('Running saved report...');
      } catch (e) {
        const { message: errorMsg } = parseError(e);
        messageApi.error(errorMsg);
      } finally {
        setLoading(false);
      }
    },
    [messageApi]
  );

  const handleDeleteReport = useCallback(
    async (record: ReportResponse) => {
      Modal.confirm({
        title: 'Delete Report',
        content: `Are you sure you want to delete "${record.name}"?`,
        okText: 'Delete',
        okType: 'danger',
        cancelText: 'Cancel',
        onOk: async () => {
          try {
            await ReportsService.delete(record.id);
            messageApi.success('Report deleted');
            void fetchSavedReports({ limit: 50, offset: 0, generated_by_user_id: currentUser?.id });
          } catch (e) {
            const { message: errorMsg } = parseError(e);
            messageApi.error(errorMsg);
          }
        }
      });
    },
    [messageApi, fetchSavedReports, currentUser?.id]
  );

  const exportPdf = useCallback(() => {
    messageApi.info('PDF export functionality not yet implemented');
  }, [messageApi]);

  const exportExcel = useCallback(() => {
    messageApi.info('Excel export functionality not yet implemented');
  }, [messageApi]);

  const exportCsv = useCallback(() => {
    messageApi.info('CSV export functionality not yet implemented');
  }, [messageApi]);

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

  const jobColumns = useMemo<ColumnsType<JobResponse>>(
    () => [
      {
        title: 'Title',
        dataIndex: 'title',
        key: 'title',
        sorter: (a, b) => (a.title ?? '').localeCompare(b.title ?? ''),
        ellipsis: true
      },
      {
        title: 'Status',
        dataIndex: 'job_status_id',
        key: 'job_status_id',
        sorter: (a, b) => (a.job_status_id ?? '').localeCompare(b.job_status_id ?? ''),
        responsive: ['md'] as const[]
      },
      {
        title: 'Priority',
        dataIndex: 'job_priority_id',
        key: 'job_priority_id',
        sorter: (a, b) => (a.job_priority_id ?? '').localeCompare(b.job_priority_id ?? ''),
        responsive: ['md'] as const[]
      },
      {
        title: 'Assigned To',
        dataIndex: 'assigned_to_user_id',
        key: 'assigned_to_user_id',
        render: (val?: string) => val ?? '—',
        responsive: ['lg'] as const[]
      },
      {
        title: 'Due Date',
        dataIndex: 'due_date',
        key: 'due_date',
        sorter: (a, b) => {
          const aDate = a.due_date ? new Date(a.due_date).getTime() : 0;
          const bDate = b.due_date ? new Date(b.due_date).getTime() : 0;
          return aDate - bDate;
        },
        render: (val?: string) => (val ? new Date(val).toLocaleDateString() : '—'),
        responsive: ['lg'] as const[]
      },
      {
        title: 'Completed',
        dataIndex: 'completed_at',
        key: 'completed_at',
        sorter: (a, b) => {
          const aDate = a.completed_at ? new Date(a.completed_at).getTime() : 0;
          const bDate = b.completed_at ? new Date(b.completed_at).getTime() : 0;
          return aDate - bDate;
        },
        render: (val?: string) => (val ? new Date(val).toLocaleDateString() : '—')
      }
    ],
    []
  );

  const savedReportsColumns = useMemo<ColumnsType<ReportResponse>>(
    () => [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        ellipsis: true
      },
      {
        title: 'Generated',
        dataIndex: 'generated_at',
        key: 'generated_at',
        render: (val?: string) => (val ? new Date(val).toLocaleDateString() : '—')
      },
      {
        title: 'Actions',
        key: 'actions',
        render: (_: unknown, record: ReportResponse) => (
          <Space size="small">
            <Button
              type="link"
              size="small"
              icon={<PlayCircleOutlined />}
              onClick={() => void handleRunSavedReport(record)}
            />
            <Button
              type="link"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={() => void handleDeleteReport(record)}
            />
          </Space>
        )
      }
    ],
    [handleRunSavedReport, handleDeleteReport]
  );

  const tabItems = useMemo(
    () => [
      {
        key: 'results',
        label: 'Data Table',
        children: (
          <>
            <Table<JobResponse>
              columns={jobColumns}
              dataSource={jobs}
              rowKey="id"
              loading={loading}
              size={screens.xs ? 'small' : 'middle'}
              pagination={{ pageSize: 20 }}
              scroll={{ x: 'max-content' }}
            />
            <Space wrap style={{ marginTop: 16 }}>
              <Button icon={<FilePdfOutlined />} onClick={exportPdf}>
                Export PDF
              </Button>
              <Button icon={<FileExcelOutlined />} onClick={exportExcel}>
                Export Excel
              </Button>
              <Button icon={<FileTextOutlined />} onClick={exportCsv}>
                Export CSV
              </Button>
              <Button icon={<SaveOutlined />} onClick={openSaveModal}>
                Save Report
              </Button>
            </Space>
          </>
        )
      },
      {
        key: 'charts',
        label: 'Charts',
        children: (
          <div style={{ padding: '16px 0' }}>
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Card title="Jobs by Status" size="small" style={{ height: 320 }}>
                  <div
                    style={{
                      height: 240,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: '#fafafa',
                      borderRadius: 6
                    }}
                  >
                    Bar Chart - Jobs by Status
                  </div>
                </Card>
              </Col>
              <Col xs={24} md={12}>
                <Card title="Jobs by Priority" size="small" style={{ height: 320 }}>
                  <div
                    style={{
                      height: 240,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: '#fafafa',
                      borderRadius: 6
                    }}
                  >
                    Pie Chart - Jobs by Priority
                  </div>
                </Card>
              </Col>
              <Col xs={24}>
                <Card title="Completion Trends Over Time" size="small" style={{ height: 320 }}>
                  <div
                    style={{
                      height: 240,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: '#fafafa',
                      borderRadius: 6
                    }}
                  >
                    Line Chart - Completion Trends
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
        )
      }
    ],
    [jobs, jobColumns, loading, screens.xs, exportPdf, exportExcel, exportCsv, openSaveModal]
  );

  const padding = screens.xs ? 12 : 24;

  return (
    <Layout style={{ minHeight: '100vh', width: '100%', background: '#f5f5f5' }}>
      {contextHolder}
      <div style={{ padding: `${padding}px ${padding}px 0 ${padding}px` }}>
        <Row justify="space-between" align="middle" style={{ marginBottom: 24 }}>
          <Typography.Title level={2} style={{ margin: 0 }}>
            Reports & Analytics
          </Typography.Title>
          <Space>
            <Button icon={<ArrowLeftOutlined />} onClick={navigateToDashboard}>
              Dashboard
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
              Create Report
            </Button>
          </Space>
        </Row>
      </div>

      <Row gutter={[16, 16]} style={{ padding: `0 ${padding}px`, marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={4}>
          <Card size="small">
            <Statistic
              title="Total Jobs"
              value={reportMetrics.totalJobs}
              valueStyle={{ color: '#1677ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={5}>
          <Card size="small">
            <Statistic
              title="Completion Rate"
              value={completionRateDisplay}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={5}>
          <Card size="small">
            <Statistic
              title="Avg Completion Time"
              value={avgCompletionTimeDisplay}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={5}>
          <Card size="small">
            <Statistic
              title="On-Time Rate"
              value={onTimeRateDisplay}
              valueStyle={{ color: '#1677ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={5}>
          <Card size="small">
            <Statistic
              title="Overdue"
              value={overdueDisplay}
              valueStyle={{ color: '#ff4d4f' }}
            />
          </Card>
        </Col>
      </Row>

      <Card
        title="Filters"
        size="small"
        style={{ margin: `0 ${padding}px ${padding}px ${padding}px` }}
      >
        {savedReportsError && (
          <Alert
            message="Error loading saved reports"
            description={parseError(savedReportsError).message}
            type="error"
            showIcon
            closable
            style={{ marginBottom: 16 }}
          />
        )}
        <Form layout="inline" style={{ flexWrap: 'wrap', gap: 12 }}>
          <Form.Item label="Date Range">
            <DatePicker.RangePicker
              value={filterDateRange}
              onChange={(dates) => setFilterDateRange(dates)}
              placeholder={['Start Date', 'End Date']}
              style={{ minWidth: 240 }}
            />
          </Form.Item>
          <Form.Item label="Department">
            <Select
              value={filterDepartmentId}
              onChange={(val) => setFilterDepartmentId(val)}
              placeholder="All Departments"
              allowClear
              options={(departments ?? []).map((d) => ({ label: d.name, value: d.id }))}
              style={{ minWidth: 180 }}
              loading={departmentsLoading}
            />
          </Form.Item>
          <Form.Item label="Job Type">
            <Select
              value={filterJobTypeId}
              onChange={(val) => setFilterJobTypeId(val)}
              placeholder="All Job Types"
              allowClear
              options={(jobTypes ?? []).map((jt) => ({ label: jt.name, value: jt.id }))}
              style={{ minWidth: 180 }}
              loading={jobTypesLoading}
            />
          </Form.Item>
          <Form.Item label="Status">
            <Select
              mode="multiple"
              value={filterStatusIds}
              onChange={(val) => setFilterStatusIds(val)}
              placeholder="All Statuses"
              allowClear
              options={(jobStatuses ?? []).map((s) => ({ label: s.name, value: s.id }))}
              style={{ minWidth: 200 }}
              loading={jobStatusesLoading}
            />
          </Form.Item>
          <Form.Item label="Priority">
            <Select
              mode="multiple"
              value={filterPriorityIds}
              onChange={(val) => setFilterPriorityIds(val)}
              placeholder="All Priorities"
              allowClear
              options={(jobPriorities ?? []).map((p) => ({ label: p.name, value: p.id }))}
              style={{ minWidth: 200 }}
              loading={jobPrioritiesLoading}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              icon={<BarChartOutlined />}
              loading={loading}
              onClick={generateReport}
            >
              Generate Report
            </Button>
          </Form.Item>
        </Form>
      </Card>

      <div style={{ padding: `0 ${padding}px ${padding}px ${padding}px` }}>
        <Row gutter={[24, 24]}>
          <Col xs={24} lg={18}>
            <Card size="small">
              <Tabs
                activeKey={activeTab}
                onChange={(key) => setActiveTab(key)}
                items={tabItems}
              />
            </Card>
          </Col>
          <Col xs={24} lg={6}>
            <Card title="Saved Reports" size="small">
              <Table<ReportResponse>
                columns={savedReportsColumns}
                dataSource={savedReports}
                rowKey="id"
                pagination={{ pageSize: 10 }}
                size="small"
                loading={savedReportsLoading}
              />
            </Card>
          </Col>
        </Row>
      </div>

      <Modal
        title="Save Report Configuration"
        open={saveModalVisible}
        onOk={handleSaveReport}
        onCancel={closeSaveModal}
        okText="Save"
        cancelText="Cancel"
      >
        <Form form={saveForm} layout="vertical">
          <Form.Item
            label="Report Name"
            name="name"
            rules={[{ required: true, message: 'Report name is required' }]}
          >
            <Input placeholder="Enter report name" />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input.TextArea placeholder="Optional description" rows={3} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Create New Report"
        open={createModalVisible}
        onOk={handleCreateReport}
        onCancel={closeCreateModal}
        okText="Create"
        cancelText="Cancel"
        width={640}
      >
        <Form form={createForm} layout="vertical">
          <Form.Item
            label="Report Name"
            name="name"
            rules={[{ required: true, message: 'Report name is required' }]}
          >
            <Input placeholder="Enter report name" />
          </Form.Item>
          <Form.Item
            label="Report Type"
            name="report_type"
            rules={[{ required: true, message: 'Report type is required' }]}
          >
            <Select
              placeholder="Select report type"
              options={[
                { label: 'Jobs by Status', value: 'jobs_by_status' },
                { label: 'Jobs by Priority', value: 'jobs_by_priority' },
                { label: 'Completion Rate', value: 'completion_rate' },
                { label: 'Average Completion Time', value: 'avg_completion_time' },
                { label: 'Overdue Analysis', value: 'overdue_analysis' },
                { label: 'Team Performance', value: 'team_performance' }
              ]}
            />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input.TextArea placeholder="Optional description" rows={3} />
          </Form.Item>
          <Form.Item label="Date Range" name="date_range">
            <DatePicker.RangePicker
              placeholder={['Start Date', 'End Date']}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item label="Export Format" name="export_format">
            <Select
              placeholder="Select format"
              options={[
                { label: 'PDF', value: 'pdf' },
                { label: 'Excel', value: 'xlsx' },
                { label: 'CSV', value: 'csv' }
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </Layout>
  );
};

export default ReportsPage;