import { useState, useMemo, useEffect, useCallback } from 'react';
import {
  Card,
  Row,
  Col,
  Typography,
  Space,
  Button,
  Statistic,
  Tabs,
  Table,
  Input,
  Select,
  Drawer,
  Modal,
  Form,
  DatePicker,
  InputNumber,
  Switch,
  Descriptions,
  message,
  Grid,
  Tag,
  Dropdown
} from 'antd';
import type { CSSProperties, TableColumnsType } from 'antd';
import {
  PlusOutlined,
  DownloadOutlined,
  DollarOutlined,
  PrinterOutlined,
  BarChartOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  MoreOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useApi } from '@/hooks/useApi';
import { BillingService } from '@/services/billing';
import { InsuranceProvidersService } from '@/services/insuranceProviders';
import { ReportsService } from '@/services/reports';
import { PatientsService } from '@/services/patients';
import { DepartmentsService } from '@/services/departments';
import { UsersService } from '@/services/users';
import { ROUTES } from '@/constants/routes';
import { parseError } from '@/utils/errorHandler';
import { useAppContext } from '@/store/AppStore';

interface Invoice {
  id: string;
  invoice_number: string;
  patient_id: string;
  appointment_id?: string | null;
  invoice_date: string;
  due_date?: string | null;
  subtotal: number;
  tax_amount: number;
  discount_amount: number;
  total_amount: number;
  amount_paid: number;
  balance_due: number;
  status: string;
  notes?: string | null;
  created_at: string;
  updated_at: string;
}

interface InvoiceDetail extends Invoice {
  patient?: {
    id: string;
    first_name: string;
    last_name: string;
    patient_number: string;
  };
  line_items?: InvoiceLineItem[];
  payments?: Payment[];
}

interface InvoiceLineItem {
  id: string;
  invoice_id: string;
  service_id?: string | null;
  description: string;
  quantity: number;
  unit_price: number;
  line_total: number;
  created_at: string;
  updated_at: string;
}

interface Payment {
  id: string;
  invoice_id: string;
  patient_id: string;
  payment_date: string;
  amount: number;
  payment_method: string;
  transaction_reference?: string | null;
  notes?: string | null;
  processed_by_user_id?: string | null;
  created_at: string;
  updated_at: string;
}

interface Service {
  id: string;
  name: string;
  description?: string | null;
  service_type: string;
  default_price: number;
  default_duration_minutes?: number | null;
  department_id?: string | null;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface InsuranceProvider {
  id: string;
  name: string;
  contact_person?: string | null;
  phone?: string | null;
  email?: string | null;
  address?: string | null;
  coverage_policy?: string | null;
  created_at: string;
  updated_at: string;
}

interface Report {
  id: string;
  report_name: string;
  report_type: string;
  generated_by_user_id: string;
  start_date?: string | null;
  end_date?: string | null;
  parameters?: Record<string, unknown> | null;
  file_path?: string | null;
  status: string;
  generated_at?: string | null;
  created_at: string;
  updated_at: string;
}

interface Patient {
  id: string;
  patient_number: string;
  first_name: string;
  last_name: string;
}

interface Department {
  id: string;
  name: string;
}

interface User {
  id: string;
  first_name: string;
  last_name: string;
  department_id?: string | null;
}

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

  const [activeTab, setActiveTab] = useState<string>('invoices');
  const [invoices, setInvoices] = useState<Invoice[]>([]);
  const [invoicesTotal, setInvoicesTotal] = useState<number>(0);
  const [invoiceSearchText, setInvoiceSearchText] = useState<string>('');
  const [invoiceStatusFilter, setInvoiceStatusFilter] = useState<string>('');
  const [invoicePage, setInvoicePage] = useState<number>(1);
  const [createInvoiceDrawerVisible, setCreateInvoiceDrawerVisible] = useState<boolean>(false);
  const [viewInvoiceModalVisible, setViewInvoiceModalVisible] = useState<boolean>(false);
  const [selectedInvoiceId, setSelectedInvoiceId] = useState<string | null>(null);
  const [selectedInvoiceDetail, setSelectedInvoiceDetail] = useState<InvoiceDetail | null>(null);

  const [payments, setPayments] = useState<Payment[]>([]);
  const [paymentsTotal, setPaymentsTotal] = useState<number>(0);
  const [paymentPage, setPaymentPage] = useState<number>(1);
  const [recordPaymentModalVisible, setRecordPaymentModalVisible] = useState<boolean>(false);

  const [services, setServices] = useState<Service[]>([]);
  const [servicesTotal, setServicesTotal] = useState<number>(0);
  const [serviceSearchText, setServiceSearchText] = useState<string>('');
  const [serviceTypeFilter, setServiceTypeFilter] = useState<string>('');
  const [servicePage, setServicePage] = useState<number>(1);
  const [addServiceModalVisible, setAddServiceModalVisible] = useState<boolean>(false);
  const [editingServiceId, setEditingServiceId] = useState<string | null>(null);

  const [insuranceProviders, setInsuranceProviders] = useState<InsuranceProvider[]>([]);
  const [insuranceProvidersTotal, setInsuranceProvidersTotal] = useState<number>(0);
  const [insurancePage, setInsurancePage] = useState<number>(1);
  const [addProviderModalVisible, setAddProviderModalVisible] = useState<boolean>(false);
  const [editingProviderId, setEditingProviderId] = useState<string | null>(null);

  const [reports, setReports] = useState<Report[]>([]);
  const [reportsTotal, setReportsTotal] = useState<number>(0);
  const [selectedReportType, setSelectedReportType] = useState<string>('');
  const [generateReportModalVisible, setGenerateReportModalVisible] = useState<boolean>(false);

  const [patients, setPatients] = useState<Patient[]>([]);
  const [departments, setDepartments] = useState<Department[]>([]);

  const [invoiceForm] = Form.useForm();
  const [paymentForm] = Form.useForm();
  const [serviceForm] = Form.useForm();
  const [providerForm] = Form.useForm();
  const [reportForm] = Form.useForm();

  const { data: invoicesData, loading: invoicesLoading, error: invoicesError, execute: fetchInvoices } = useApi<{ items: Invoice[]; total: number }>(BillingService.getInvoices);
  const { data: paymentsData, loading: paymentsLoading, error: paymentsError, execute: fetchPayments } = useApi<{ items: Payment[]; total: number }>(BillingService.getPayments);
  const { data: servicesData, loading: servicesLoading, error: servicesError, execute: fetchServices } = useApi<{ items: Service[]; total: number }>(BillingService.getServices);
  const { data: insuranceData, loading: insuranceLoading, error: insuranceError, execute: fetchInsurance } = useApi<{ items: InsuranceProvider[]; total: number }>(InsuranceProvidersService.list);
  const { data: reportsData, loading: reportsLoading, error: reportsError, execute: fetchReports } = useApi<{ items: Report[]; total: number }>(ReportsService.list);
  const { data: patientsData, execute: fetchPatients } = useApi<{ items: Patient[] }>(PatientsService.list);
  const { data: departmentsData, execute: fetchDepartments } = useApi<{ items: Department[] }>(DepartmentsService.list);

  useEffect(() => {
    void fetchInvoices({ limit: 20, offset: (invoicePage - 1) * 20, status_filter: invoiceStatusFilter || undefined, patient_id: invoiceSearchText || undefined });
  }, [fetchInvoices, invoicePage, invoiceStatusFilter, invoiceSearchText]);

  useEffect(() => {
    void fetchPayments({ limit: 20, offset: (paymentPage - 1) * 20 });
  }, [fetchPayments, paymentPage]);

  useEffect(() => {
    void fetchServices({ limit: 20, offset: (servicePage - 1) * 20, service_type: serviceTypeFilter || undefined });
  }, [fetchServices, servicePage, serviceTypeFilter]);

  useEffect(() => {
    void fetchInsurance({ limit: 20, offset: (insurancePage - 1) * 20 });
  }, [fetchInsurance, insurancePage]);

  useEffect(() => {
    void fetchReports({ limit: 20, offset: 0, report_type_filter: selectedReportType || undefined });
  }, [fetchReports, selectedReportType]);

  useEffect(() => {
    void fetchPatients({ limit: 100, offset: 0 });
  }, [fetchPatients]);

  useEffect(() => {
    void fetchDepartments({ limit: 100, offset: 0 });
  }, [fetchDepartments]);

  useEffect(() => {
    if (invoicesData) {
      setInvoices(invoicesData.items ?? []);
      setInvoicesTotal(invoicesData.total ?? 0);
    }
  }, [invoicesData]);

  useEffect(() => {
    if (paymentsData) {
      setPayments(paymentsData.items ?? []);
      setPaymentsTotal(paymentsData.total ?? 0);
    }
  }, [paymentsData]);

  useEffect(() => {
    if (servicesData) {
      setServices(servicesData.items ?? []);
      setServicesTotal(servicesData.total ?? 0);
    }
  }, [servicesData]);

  useEffect(() => {
    if (insuranceData) {
      setInsuranceProviders(insuranceData.items ?? []);
      setInsuranceProvidersTotal(insuranceData.total ?? 0);
    }
  }, [insuranceData]);

  useEffect(() => {
    if (reportsData) {
      setReports(reportsData.items ?? []);
      setReportsTotal(reportsData.total ?? 0);
    }
  }, [reportsData]);

  useEffect(() => {
    if (patientsData) {
      setPatients(patientsData.items ?? []);
    }
  }, [patientsData]);

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

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

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

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

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

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

  const outstandingInvoices = useMemo(() => {
    return (invoices ?? []).filter(i => ['DRAFT', 'ISSUED', 'PARTIALLY_PAID', 'OVERDUE'].includes(i.status));
  }, [invoices]);

  const totalRevenue = useMemo(() => {
    return (invoices ?? []).reduce((sum, inv) => sum + (inv.total_amount ?? 0), 0);
  }, [invoices]);

  const handleOpenCreateInvoiceDrawer = useCallback(() => {
    setCreateInvoiceDrawerVisible(true);
    invoiceForm.resetFields();
  }, [invoiceForm]);

  const handleCloseCreateInvoiceDrawer = useCallback(() => {
    setCreateInvoiceDrawerVisible(false);
    invoiceForm.resetFields();
  }, [invoiceForm]);

  const handleSubmitCreateInvoice = useCallback(async () => {
    try {
      const values = await invoiceForm.validateFields();
      await BillingService.createInvoices({
        invoice_number: values.invoice_number,
        patient_id: values.patient_id,
        appointment_id: values.appointment_id,
        invoice_date: values.invoice_date,
        due_date: values.due_date,
        subtotal: values.subtotal,
        tax_amount: values.tax_amount,
        discount_amount: values.discount_amount,
        total_amount: values.total_amount,
        amount_paid: 0,
        balance_due: values.total_amount,
        status: 'DRAFT',
        notes: values.notes,
        created_by_user_id: currentUser?.id
      });
      messageApi.success('Invoice created successfully');
      setCreateInvoiceDrawerVisible(false);
      invoiceForm.resetFields();
      void fetchInvoices({ limit: 20, offset: (invoicePage - 1) * 20, status_filter: invoiceStatusFilter || undefined, patient_id: invoiceSearchText || undefined });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [invoiceForm, messageApi, currentUser, fetchInvoices, invoicePage, invoiceStatusFilter, invoiceSearchText]);

  const handleViewInvoiceDetail = useCallback(async (record: Invoice) => {
    try {
      setSelectedInvoiceId(record.id);
      const response = await BillingService.getInvoicesDetails(record.id);
      setSelectedInvoiceDetail(response.data as InvoiceDetail);
      setViewInvoiceModalVisible(true);
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [messageApi]);

  const handleCloseViewInvoiceModal = useCallback(() => {
    setViewInvoiceModalVisible(false);
    setSelectedInvoiceDetail(null);
  }, []);

  const handleIssueInvoice = useCallback(async () => {
    if (!selectedInvoiceId) return;
    Modal.confirm({
      title: 'Issue Invoice',
      content: 'Are you sure you want to issue this invoice?',
      onOk: async () => {
        try {
          await BillingService.createInvoicesIssue(selectedInvoiceId, {});
          messageApi.success('Invoice issued successfully');
          void fetchInvoices({ limit: 20, offset: (invoicePage - 1) * 20, status_filter: invoiceStatusFilter || undefined, patient_id: invoiceSearchText || undefined });
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  }, [selectedInvoiceId, messageApi, fetchInvoices, invoicePage, invoiceStatusFilter, invoiceSearchText]);

  const handleDeleteInvoice = useCallback((invoiceId: string) => {
    Modal.confirm({
      title: 'Delete Invoice',
      content: 'Are you sure you want to delete this invoice?',
      onOk: async () => {
        try {
          await BillingService.deleteInvoicesById(invoiceId);
          messageApi.success('Invoice deleted');
          void fetchInvoices({ limit: 20, offset: (invoicePage - 1) * 20, status_filter: invoiceStatusFilter || undefined, patient_id: invoiceSearchText || undefined });
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  }, [messageApi, fetchInvoices, invoicePage, invoiceStatusFilter, invoiceSearchText]);

  const handleOpenRecordPaymentModal = useCallback(() => {
    setRecordPaymentModalVisible(true);
    paymentForm.resetFields();
  }, [paymentForm]);

  const handleCloseRecordPaymentModal = useCallback(() => {
    setRecordPaymentModalVisible(false);
    paymentForm.resetFields();
  }, [paymentForm]);

  const handleSubmitRecordPayment = useCallback(async () => {
    try {
      const values = await paymentForm.validateFields();
      await BillingService.createPaymentsProcess({
        invoice_id: values.invoice_id,
        patient_id: values.patient_id,
        amount: values.amount,
        payment_method: values.payment_method,
        transaction_reference: values.transaction_reference,
        notes: values.notes,
        processed_by_user_id: currentUser?.id
      });
      messageApi.success('Payment recorded successfully');
      setRecordPaymentModalVisible(false);
      paymentForm.resetFields();
      void fetchPayments({ limit: 20, offset: (paymentPage - 1) * 20 });
      void fetchInvoices({ limit: 20, offset: (invoicePage - 1) * 20, status_filter: invoiceStatusFilter || undefined, patient_id: invoiceSearchText || undefined });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [paymentForm, messageApi, currentUser, fetchPayments, paymentPage, fetchInvoices, invoicePage, invoiceStatusFilter, invoiceSearchText]);

  const handleOpenAddServiceModal = useCallback(() => {
    setAddServiceModalVisible(true);
    setEditingServiceId(null);
    serviceForm.resetFields();
  }, [serviceForm]);

  const handleEditService = useCallback((record: Service) => {
    setAddServiceModalVisible(true);
    setEditingServiceId(record.id);
    serviceForm.setFieldsValue(record);
  }, [serviceForm]);

  const handleCloseServiceModal = useCallback(() => {
    setAddServiceModalVisible(false);
    setEditingServiceId(null);
    serviceForm.resetFields();
  }, [serviceForm]);

  const handleSubmitService = useCallback(async () => {
    try {
      const values = await serviceForm.validateFields();
      if (editingServiceId) {
        await BillingService.updateServicesById(editingServiceId, {
          name: values.name,
          description: values.description,
          service_type: values.service_type,
          default_price: values.default_price,
          default_duration_minutes: values.default_duration_minutes,
          department_id: values.department_id,
          is_active: values.is_active ?? true
        });
      } else {
        await BillingService.createServices({
          name: values.name,
          description: values.description,
          service_type: values.service_type,
          default_price: values.default_price,
          default_duration_minutes: values.default_duration_minutes,
          department_id: values.department_id,
          is_active: values.is_active ?? true
        });
      }
      messageApi.success('Service saved successfully');
      setAddServiceModalVisible(false);
      serviceForm.resetFields();
      void fetchServices({ limit: 20, offset: (servicePage - 1) * 20, service_type: serviceTypeFilter || undefined });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [serviceForm, editingServiceId, messageApi, fetchServices, servicePage, serviceTypeFilter]);

  const handleDeleteService = useCallback((serviceId: string) => {
    Modal.confirm({
      title: 'Delete Service',
      content: 'Are you sure you want to delete this service?',
      onOk: async () => {
        try {
          await BillingService.deleteServicesById(serviceId);
          messageApi.success('Service deleted');
          void fetchServices({ limit: 20, offset: (servicePage - 1) * 20, service_type: serviceTypeFilter || undefined });
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  }, [messageApi, fetchServices, servicePage, serviceTypeFilter]);

  const handleOpenAddProviderModal = useCallback(() => {
    setAddProviderModalVisible(true);
    setEditingProviderId(null);
    providerForm.resetFields();
  }, [providerForm]);

  const handleEditProvider = useCallback((record: InsuranceProvider) => {
    setAddProviderModalVisible(true);
    setEditingProviderId(record.id);
    providerForm.setFieldsValue(record);
  }, [providerForm]);

  const handleCloseProviderModal = useCallback(() => {
    setAddProviderModalVisible(false);
    setEditingProviderId(null);
    providerForm.resetFields();
  }, [providerForm]);

  const handleSubmitProvider = useCallback(async () => {
    try {
      const values = await providerForm.validateFields();
      if (editingProviderId) {
        await InsuranceProvidersService.update(editingProviderId, {
          name: values.name,
          contact_person: values.contact_person,
          phone: values.phone,
          email: values.email,
          address: values.address,
          coverage_policy: values.coverage_policy
        });
      } else {
        await InsuranceProvidersService.create({
          name: values.name,
          contact_person: values.contact_person,
          phone: values.phone,
          email: values.email,
          address: values.address,
          coverage_policy: values.coverage_policy
        });
      }
      messageApi.success('Insurance provider saved');
      setAddProviderModalVisible(false);
      providerForm.resetFields();
      void fetchInsurance({ limit: 20, offset: (insurancePage - 1) * 20 });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [providerForm, editingProviderId, messageApi, fetchInsurance, insurancePage]);

  const handleDeleteProvider = useCallback((providerId: string) => {
    Modal.confirm({
      title: 'Delete Insurance Provider',
      content: 'Are you sure you want to delete this insurance provider?',
      onOk: async () => {
        try {
          await InsuranceProvidersService.delete(providerId);
          messageApi.success('Insurance provider deleted');
          void fetchInsurance({ limit: 20, offset: (insurancePage - 1) * 20 });
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  }, [messageApi, fetchInsurance, insurancePage]);

  const handleOpenGenerateReportModal = useCallback(() => {
    setGenerateReportModalVisible(true);
    reportForm.resetFields();
  }, [reportForm]);

  const handleCloseGenerateReportModal = useCallback(() => {
    setGenerateReportModalVisible(false);
    reportForm.resetFields();
  }, [reportForm]);

  const handleSubmitGenerateReport = useCallback(async () => {
    try {
      const values = await reportForm.validateFields();
      await ReportsService.create({
        report_name: values.report_name,
        report_type: values.report_type,
        generated_by_user_id: currentUser?.id,
        start_date: values.date_range?.[0],
        end_date: values.date_range?.[1],
        parameters: {},
        status: 'GENERATING'
      });
      messageApi.info('Report generation started');
      setGenerateReportModalVisible(false);
      reportForm.resetFields();
      void fetchReports({ limit: 20, offset: 0, report_type_filter: selectedReportType || undefined });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [reportForm, messageApi, currentUser, fetchReports, selectedReportType]);

  const handleGenerateReport = useCallback(async (reportId: string) => {
    try {
      await ReportsService.createGenerate(reportId);
      messageApi.info('Report generation triggered');
      void fetchReports({ limit: 20, offset: 0, report_type_filter: selectedReportType || undefined });
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [messageApi, fetchReports, selectedReportType]);

  const handleDownloadReport = useCallback(async (reportId: string) => {
    try {
      await ReportsService.getDownload(reportId);
      messageApi.success('Report download started');
    } catch (e) {
      const { message: msg } = parseError(e);
      messageApi.error(msg);
    }
  }, [messageApi]);

  const handleDeleteReport = useCallback((reportId: string) => {
    Modal.confirm({
      title: 'Delete Report',
      content: 'Are you sure you want to delete this report?',
      onOk: async () => {
        try {
          await ReportsService.delete(reportId);
          messageApi.success('Report deleted');
          void fetchReports({ limit: 20, offset: 0, report_type_filter: selectedReportType || undefined });
        } catch (e) {
          const { message: msg } = parseError(e);
          messageApi.error(msg);
        }
      }
    });
  }, [messageApi, fetchReports, selectedReportType]);

  const invoiceColumns: TableColumnsType<Invoice> = useMemo(() => [
    {
      title: 'Invoice #',
      dataIndex: 'invoice_number',
      key: 'invoice_number',
      sorter: true,
      responsive: ['md'] as const
    },
    {
      title: 'Date',
      dataIndex: 'invoice_date',
      key: 'invoice_date',
      sorter: true,
      render: (date: string) => date ? new Date(date).toLocaleDateString() : '—'
    },
    {
      title: 'Patient',
      dataIndex: 'patient_id',
      key: 'patient_id',
      render: (patientId: string) => {
        const patient = (patients ?? []).find(p => p.id === patientId);
        return patient ? `${patient.first_name ?? ''} ${patient.last_name ?? ''}` : patientId;
      }
    },
    {
      title: 'Total',
      dataIndex: 'total_amount',
      key: 'total_amount',
      render: (amount: number) => `$${(amount ?? 0).toFixed(2)}`,
      responsive: ['lg'] as const
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const colorMap: Record<string, string> = {
          DRAFT: 'default',
          ISSUED: 'processing',
          PARTIALLY_PAID: 'warning',
          PAID: 'success',
          OVERDUE: 'error',
          CANCELLED: 'default'
        };
        return <Tag color={colorMap[status] ?? 'default'}>{status}</Tag>;
      }
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: Invoice) => (
        <Dropdown
          menu={{
            items: [
              { key: 'view', label: 'View', icon: <EyeOutlined /> },
              { key: 'delete', label: 'Delete', icon: <DeleteOutlined />, danger: true }
            ],
            onClick: ({ key }) => {
              if (key === 'view') void handleViewInvoiceDetail(record);
              if (key === 'delete') handleDeleteInvoice(record.id);
            }
          }}
        >
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      )
    }
  ], [patients, handleViewInvoiceDetail, handleDeleteInvoice]);

  const paymentColumns: TableColumnsType<Payment> = useMemo(() => [
    {
      title: 'Payment ID',
      dataIndex: 'id',
      key: 'id',
      responsive: ['lg'] as const
    },
    {
      title: 'Invoice #',
      dataIndex: 'invoice_id',
      key: 'invoice_id',
      render: (invoiceId: string) => {
        const invoice = (invoices ?? []).find(i => i.id === invoiceId);
        return invoice?.invoice_number ?? invoiceId;
      }
    },
    {
      title: 'Patient',
      dataIndex: 'patient_id',
      key: 'patient_id',
      render: (patientId: string) => {
        const patient = (patients ?? []).find(p => p.id === patientId);
        return patient ? `${patient.first_name ?? ''} ${patient.last_name ?? ''}` : patientId;
      }
    },
    {
      title: 'Amount',
      dataIndex: 'amount',
      key: 'amount',
      render: (amount: number) => `$${(amount ?? 0).toFixed(2)}`
    },
    {
      title: 'Method',
      dataIndex: 'payment_method',
      key: 'payment_method',
      render: (method: string) => <Tag>{method}</Tag>
    },
    {
      title: 'Reference #',
      dataIndex: 'transaction_reference',
      key: 'transaction_reference',
      responsive: ['md'] as const
    },
    {
      title: 'Date',
      dataIndex: 'payment_date',
      key: 'payment_date',
      sorter: true,
      render: (date: string) => date ? new Date(date).toLocaleDateString() : '—'
    }
  ], [invoices, patients]);

  const serviceColumns: TableColumnsType<Service> = useMemo(() => [
    {
      title: 'Service Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true
    },
    {
      title: 'Category',
      dataIndex: 'service_type',
      key: 'service_type',
      render: (type: string) => <Tag color="blue">{type}</Tag>
    },
    {
      title: 'Department',
      dataIndex: 'department_id',
      key: 'department_id',
      render: (deptId?: string | null) => {
        const dept = (departments ?? []).find(d => d.id === deptId);
        return dept?.name ?? '—';
      },
      responsive: ['md'] as const
    },
    {
      title: 'Duration (min)',
      dataIndex: 'default_duration_minutes',
      key: 'default_duration_minutes',
      render: (val?: number | null) => val ?? '—',
      responsive: ['lg'] as const
    },
    {
      title: 'Price',
      dataIndex: 'default_price',
      key: 'default_price',
      render: (price: number) => `$${(price ?? 0).toFixed(2)}`,
      sorter: true
    },
    {
      title: 'Status',
      dataIndex: 'is_active',
      key: 'is_active',
      render: (active: boolean) => <Tag color={active ? 'green' : 'default'}>{active ? 'Active' : 'Inactive'}</Tag>
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: Service) => (
        <Dropdown
          menu={{
            items: [
              { key: 'edit', label: 'Edit', icon: <EditOutlined /> },
              { key: 'delete', label: 'Delete', icon: <DeleteOutlined />, danger: true }
            ],
            onClick: ({ key }) => {
              if (key === 'edit') handleEditService(record);
              if (key === 'delete') handleDeleteService(record.id);
            }
          }}
        >
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      )
    }
  ], [departments, handleEditService, handleDeleteService]);

  const insuranceColumns: TableColumnsType<InsuranceProvider> = useMemo(() => [
    {
      title: 'Provider Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true
    },
    {
      title: 'Contact Person',
      dataIndex: 'contact_person',
      key: 'contact_person',
      render: (val?: string | null) => val ?? '—',
      responsive: ['md'] as const
    },
    {
      title: 'Phone',
      dataIndex: 'phone',
      key: 'phone',
      render: (val?: string | null) => val ?? '—'
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
      render: (val?: string | null) => val ?? '—',
      responsive: ['lg'] as const
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: InsuranceProvider) => (
        <Dropdown
          menu={{
            items: [
              { key: 'edit', label: 'Edit', icon: <EditOutlined /> },
              { key: 'delete', label: 'Delete', icon: <DeleteOutlined />, danger: true }
            ],
            onClick: ({ key }) => {
              if (key === 'edit') handleEditProvider(record);
              if (key === 'delete') handleDeleteProvider(record.id);
            }
          }}
        >
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      )
    }
  ], [handleEditProvider, handleDeleteProvider]);

  const reportColumns: TableColumnsType<Report> = useMemo(() => [
    {
      title: 'Report Name',
      dataIndex: 'report_name',
      key: 'report_name',
      sorter: true
    },
    {
      title: 'Type',
      dataIndex: 'report_type',
      key: 'report_type',
      render: (type: string) => <Tag color="purple">{type}</Tag>
    },
    {
      title: 'Date Range',
      key: 'date_range',
      render: (_: unknown, record: Report) => {
        if (!record.start_date && !record.end_date) return '—';
        const start = record.start_date ? new Date(record.start_date).toLocaleDateString() : '—';
        const end = record.end_date ? new Date(record.end_date).toLocaleDateString() : '—';
        return `${start} - ${end}`;
      },
      responsive: ['md'] as const
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        const colorMap: Record<string, string> = {
          GENERATING: 'processing',
          COMPLETED: 'success',
          FAILED: 'error'
        };
        return <Tag color={colorMap[status] ?? 'default'}>{status}</Tag>;
      }
    },
    {
      title: 'Generated At',
      dataIndex: 'generated_at',
      key: 'generated_at',
      render: (val?: string | null) => val ? new Date(val).toLocaleString() : '—',
      responsive: ['lg'] as const
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: Report) => (
        <Dropdown
          menu={{
            items: [
              { key: 'generate', label: 'Generate', icon: <BarChartOutlined />, disabled: record.status === 'GENERATING' },
              { key: 'download', label: 'Download', icon: <DownloadOutlined />, disabled: record.status !== 'COMPLETED' },
              { key: 'delete', label: 'Delete', icon: <DeleteOutlined />, danger: true }
            ],
            onClick: ({ key }) => {
              if (key === 'generate') void handleGenerateReport(record.id);
              if (key === 'download') void handleDownloadReport(record.id);
              if (key === 'delete') handleDeleteReport(record.id);
            }
          }}
        >
          <Button type="text" icon={<MoreOutlined />} />
        </Dropdown>
      )
    }
  ], [handleGenerateReport, handleDownloadReport, handleDeleteReport]);

  const patientOptions = useMemo(() => {
    return (patients ?? []).map(p => ({
      value: p.id,
      label: `${p.patient_number ?? ''} - ${p.first_name ?? ''} ${p.last_name ?? ''}`
    }));
  }, [patients]);

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

  const outstandingInvoiceOptions = useMemo(() => {
    return (outstandingInvoices ?? []).map(inv => ({
      value: inv.id,
      label: `${inv.invoice_number ?? ''} - $${(inv.balance_due ?? 0).toFixed(2)}`
    }));
  }, [outstandingInvoices]);

  const contentPadding = useMemo(() => (screens.xs ? 12 : 24), [screens.xs]);

  return (
    <div style={{ minHeight: '100vh', width: '100%', background: '#f5f5f5' }}>
      {contextHolder}
      <div style={{ padding: `${contentPadding}px ${contentPadding}px 0 ${contentPadding}px` }}>
        <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
          <Col>
            <Typography.Title level={2} style={{ margin: 0 }}>
              Billing & Reports
            </Typography.Title>
            <Typography.Text type="secondary">
              Manage invoices, payments, services, insurance providers, and generate reports
            </Typography.Text>
          </Col>
          <Col>
            <Space size="small">
              <Button type="text" size="small" onClick={() => navigate(ROUTES.DASHBOARD)}>
                Dashboard
              </Button>
              <Button type="text" size="small" onClick={() => navigate(ROUTES.PATIENTS)}>
                Patients
              </Button>
              <Button type="text" size="small" onClick={() => navigate(ROUTES.APPOINTMENTS)}>
                Appointments
              </Button>
              <Button type="text" size="small" onClick={() => navigate(ROUTES.CLINICAL_RECORDS)}>
                Clinical
              </Button>
            </Space>
          </Col>
        </Row>
        <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
          <Col xs={24} sm={12} lg={6}>
            <Card size="small">
              <Statistic
                title="Total Revenue"
                value={totalRevenue}
                prefix="$"
                valueStyle={{ color: '#3f8600' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card size="small">
              <Statistic
                title="Total Invoices"
                value={invoicesTotal}
                valueStyle={{ color: '#1677ff' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card size="small">
              <Statistic
                title="Pending Payments"
                value={(outstandingInvoices ?? []).length}
                valueStyle={{ color: '#faad14' }}
              />
            </Card>
          </Col>
          <Col xs={24} sm={12} lg={6}>
            <Card size="small">
              <Statistic
                title="Total Payments"
                value={paymentsTotal}
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
        </Row>
      </div>
      <div style={{ padding: `0 ${contentPadding}px ${contentPadding}px ${contentPadding}px` }}>
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          type="card"
          items={[
            {
              key: 'invoices',
              label: 'Invoices',
              children: (
                <div>
                  <Row gutter={[12, 12]} align="middle" justify="space-between" style={{ marginBottom: 16 }}>
                    <Col xs={24} sm={8}>
                      <Input.Search
                        placeholder="Search by patient name/ID or invoice number"
                        allowClear
                        value={invoiceSearchText}
                        onChange={(e) => {
                          setInvoiceSearchText(e.target.value);
                          setInvoicePage(1);
                        }}
                      />
                    </Col>
                    <Col xs={24} sm={6}>
                      <Select
                        placeholder="Filter by Status"
                        allowClear
                        style={{ width: '100%' }}
                        value={invoiceStatusFilter || undefined}
                        onChange={(val) => {
                          setInvoiceStatusFilter(val ?? '');
                          setInvoicePage(1);
                        }}
                        options={[
                          { value: 'DRAFT', label: 'Draft' },
                          { value: 'ISSUED', label: 'Issued' },
                          { value: 'PARTIALLY_PAID', label: 'Partially Paid' },
                          { value: 'PAID', label: 'Paid' },
                          { value: 'OVERDUE', label: 'Overdue' },
                          { value: 'CANCELLED', label: 'Cancelled' }
                        ]}
                      />
                    </Col>
                    <Col>
                      <Space>
                        <Button type="primary" icon={<PlusOutlined />} onClick={handleOpenCreateInvoiceDrawer}>
                          Create Invoice
                        </Button>
                        {!screens.xs && (
                          <Button icon={<DownloadOutlined />}>
                            Export to Excel
                          </Button>
                        )}
                      </Space>
                    </Col>
                  </Row>
                  <Table
                    rowKey="id"
                    columns={invoiceColumns}
                    dataSource={invoices}
                    loading={invoicesLoading}
                    pagination={{
                      current: invoicePage,
                      total: invoicesTotal,
                      pageSize: 20,
                      onChange: (page) => setInvoicePage(page)
                    }}
                    size={screens.xs ? 'small' : 'middle'}
                    scroll={{ x: 'max-content' }}
                    onRow={(record) => ({
                      onClick: () => void handleViewInvoiceDetail(record)
                    })}
                  />
                </div>
              )
            },
            {
              key: 'payments',
              label: 'Payments',
              children: (
                <div>
                  <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
                    <Col />
                    <Col>
                      <Space>
                        <Button type="primary" icon={<DollarOutlined />} onClick={handleOpenRecordPaymentModal}>
                          Record Payment
                        </Button>
                        {!screens.xs && (
                          <Button icon={<PrinterOutlined />}>
                            Print Receipt
                          </Button>
                        )}
                      </Space>
                    </Col>
                  </Row>
                  <Table
                    rowKey="id"
                    columns={paymentColumns}
                    dataSource={payments}
                    loading={paymentsLoading}
                    pagination={{
                      current: paymentPage,
                      total: paymentsTotal,
                      pageSize: 20,
                      onChange: (page) => setPaymentPage(page)
                    }}
                    size={screens.xs ? 'small' : 'middle'}
                    scroll={{ x: 'max-content' }}
                  />
                </div>
              )
            },
            {
              key: 'services',
              label: 'Services',
              children: (
                <div>
                  <Row gutter={[12, 12]} align="middle" justify="space-between" style={{ marginBottom: 16 }}>
                    <Col xs={24} sm={8}>
                      <Input.Search
                        placeholder="Search services..."
                        allowClear
                        value={serviceSearchText}
                        onChange={(e) => {
                          setServiceSearchText(e.target.value);
                          setServicePage(1);
                        }}
                      />
                    </Col>
                    <Col xs={24} sm={6}>
                      <Select
                        placeholder="Filter by Type"
                        allowClear
                        style={{ width: '100%' }}
                        value={serviceTypeFilter || undefined}
                        onChange={(val) => {
                          setServiceTypeFilter(val ?? '');
                          setServicePage(1);
                        }}
                        options={[
                          { value: 'CONSULTATION', label: 'Consultation' },
                          { value: 'PROCEDURE', label: 'Procedure' },
                          { value: 'LAB_TEST', label: 'Lab Test' },
                          { value: 'IMAGING', label: 'Imaging' },
                          { value: 'THERAPY', label: 'Therapy' },
                          { value: 'SURGERY', label: 'Surgery' },
                          { value: 'VACCINATION', label: 'Vaccination' },
                          { value: 'OTHER', label: 'Other' }
                        ]}
                      />
                    </Col>
                    <Col>
                      <Button type="primary" icon={<PlusOutlined />} onClick={handleOpenAddServiceModal}>
                        Add Service
                      </Button>
                    </Col>
                  </Row>
                  <Table
                    rowKey="id"
                    columns={serviceColumns}
                    dataSource={services}
                    loading={servicesLoading}
                    pagination={{
                      current: servicePage,
                      total: servicesTotal,
                      pageSize: 20,
                      onChange: (page) => setServicePage(page)
                    }}
                    size={screens.xs ? 'small' : 'middle'}
                    scroll={{ x: 'max-content' }}
                  />
                </div>
              )
            },
            {
              key: 'insurance',
              label: 'Insurance',
              children: (
                <div>
                  <Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
                    <Col>
                      <Typography.Title level={4} style={{ margin: 0 }}>
                        Insurance Providers
                      </Typography.Title>
                    </Col>
                    <Col>
                      <Button type="primary" icon={<PlusOutlined />} onClick={handleOpenAddProviderModal}>
                        Add Provider
                      </Button>
                    </Col>
                  </Row>
                  <Table
                    rowKey="id"
                    columns={insuranceColumns}
                    dataSource={insuranceProviders}
                    loading={insuranceLoading}
                    pagination={{
                      current: insurancePage,
                      total: insuranceProvidersTotal,
                      pageSize: 20,
                      onChange: (page) => setInsurancePage(page)
                    }}
                    size={screens.xs ? 'small' : 'middle'}
                    scroll={{ x: 'max-content' }}
                  />
                </div>
              )
            },
            {
              key: 'reports',
              label: 'Reports',
              children: (
                <div>
                  <Row gutter={[12, 12]} justify="space-between" align="middle" style={{ marginBottom: 16 }}>
                    <Col xs={24} sm={8}>
                      <Select
                        placeholder="Filter by Report Type"
                        allowClear
                        style={{ width: '100%' }}
                        value={selectedReportType || undefined}
                        onChange={(val) => setSelectedReportType(val ?? '')}
                        options={[
                          { value: 'PATIENT_STATISTICS', label: 'Patient Statistics' },
                          { value: 'REVENUE', label: 'Revenue' },
                          { value: 'APPOINTMENT_SUMMARY', label: 'Appointment Summary' },
                          { value: 'SERVICE_UTILIZATION', label: 'Service Utilization' },
                          { value: 'DOCTOR_PERFORMANCE', label: 'Doctor Performance' },
                          { value: 'BILLING_SUMMARY', label: 'Billing Summary' },
                          { value: 'OPERATIONAL_METRICS', label: 'Operational Metrics' }
                        ]}
                      />
                    </Col>
                    <Col>
                      <Button type="primary" icon={<BarChartOutlined />} onClick={handleOpenGenerateReportModal}>
                        Generate Report
                      </Button>
                    </Col>
                  </Row>
                  <Table
                    rowKey="id"
                    columns={reportColumns}
                    dataSource={reports}
                    loading={reportsLoading}
                    size={screens.xs ? 'small' : 'middle'}
                    scroll={{ x: 'max-content' }}
                  />
                </div>
              )
            }
          ]}
        />
      </div>

      <Drawer
        title="Create Invoice"
        placement="right"
        width={720}
        open={createInvoiceDrawerVisible}
        onClose={handleCloseCreateInvoiceDrawer}
        destroyOnClose
      >
        <Form form={invoiceForm} layout="vertical" onFinish={handleSubmitCreateInvoice}>
          <Form.Item
            label="Patient"
            name="patient_id"
            rules={[{ required: true, message: 'Patient is required' }]}
          >
            <Select
              showSearch
              placeholder="Search and select patient"
              optionFilterProp="label"
              style={{ width: '100%' }}
              options={patientOptions}
            />
          </Form.Item>
          <Form.Item
            label="Invoice Date"
            name="invoice_date"
            rules={[{ required: true, message: 'Date is required' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="Due Date" name="due_date">
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
          <div style={{ marginBottom: 16 }}>
            <Typography.Title level={5}>Line Items</Typography.Title>
            <Form.List name="line_items">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(field => (
                    <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                      <Form.Item {...field} name={[field.name, 'description']} noStyle>
                        <Input placeholder="Description" />
                      </Form.Item>
                      <Form.Item {...field} name={[field.name, 'quantity']} noStyle>
                        <InputNumber placeholder="Qty" min={1} />
                      </Form.Item>
                      <Form.Item {...field} name={[field.name, 'unit_price']} noStyle>
                        <InputNumber placeholder="Price" prefix="$" min={0} />
                      </Form.Item>
                      <Button type="text" danger onClick={() => remove(field.name)} icon={<DeleteOutlined />} />
                    </Space>
                  ))}
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    Add Line Item
                  </Button>
                </>
              )}
            </Form.List>
          </div>
          <Card size="small" style={{ marginBottom: 16 }}>
            <Row gutter={[16, 8]}>
              <Col span={8}>
                <Form.Item label="Subtotal" name="subtotal">
                  <InputNumber prefix="$" min={0} style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="Discount" name="discount_amount">
                  <InputNumber prefix="$" min={0} style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="Tax Amount" name="tax_amount">
                  <InputNumber prefix="$" min={0} style={{ width: '100%' }} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="Grand Total" name="total_amount">
                  <InputNumber
                    prefix="$"
                    min={0}
                    style={{ width: '100%', fontWeight: 'bold', fontSize: '18px' }}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Card>
          <Form.Item label="Invoice Notes" name="notes">
            <Input.TextArea rows={3} placeholder="Add notes or terms..." />
          </Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              Save as Draft
            </Button>
          </Space>
        </Form>
      </Drawer>

      <Modal
        title="Invoice Detail"
        open={viewInvoiceModalVisible}
        onCancel={handleCloseViewInvoiceModal}
        width={800}
        footer={null}
      >
        {selectedInvoiceDetail && (
          <>
            <Descriptions bordered column={2} size="small" style={{ marginBottom: 16 }}>
              <Descriptions.Item label="Invoice #">{selectedInvoiceDetail.invoice_number ?? '—'}</Descriptions.Item>
              <Descriptions.Item label="Date">{selectedInvoiceDetail.invoice_date ? new Date(selectedInvoiceDetail.invoice_date).toLocaleDateString() : '—'}</Descriptions.Item>
              <Descriptions.Item label="Patient">{selectedInvoiceDetail.patient ? `${selectedInvoiceDetail.patient.first_name ?? ''} ${selectedInvoiceDetail.patient.last_name ?? ''}` : '—'}</Descriptions.Item>
              <Descriptions.Item label="Status">
                <Tag>{selectedInvoiceDetail.status}</Tag>
              </Descriptions.Item>
              <Descriptions.Item label="Subtotal">${(selectedInvoiceDetail.subtotal ?? 0).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="Discount">${(selectedInvoiceDetail.discount_amount ?? 0).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="Tax">${(selectedInvoiceDetail.tax_amount ?? 0).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="Total">${(selectedInvoiceDetail.total_amount ?? 0).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="Paid">${(selectedInvoiceDetail.amount_paid ?? 0).toFixed(2)}</Descriptions.Item>
              <Descriptions.Item label="Balance">${(selectedInvoiceDetail.balance_due ?? 0).toFixed(2)}</Descriptions.Item>
            </Descriptions>
            <Typography.Title level={5}>Line Items</Typography.Title>
            <Table
              rowKey="id"
              columns={[
                { title: 'Description', dataIndex: 'description', key: 'description' },
                { title: 'Qty', dataIndex: 'quantity', key: 'quantity' },
                { title: 'Unit Price', dataIndex: 'unit_price', key: 'unit_price', render: (val: number) => `$${(val ?? 0).toFixed(2)}` },
                { title: 'Total', dataIndex: 'line_total', key: 'line_total', render: (val: number) => `$${(val ?? 0).toFixed(2)}` }
              ]}
              dataSource={selectedInvoiceDetail.line_items ?? []}
              size="small"
              pagination={false}
              style={{ marginBottom: 16 }}
            />
            <Typography.Title level={5}>Payment History</Typography.Title>
            <Table
              rowKey="id"
              columns={[
                { title: 'Date', dataIndex: 'payment_date', key: 'payment_date', render: (val: string) => val ? new Date(val).toLocaleDateString() : '—' },
                { title: 'Amount', dataIndex: 'amount', key: 'amount', render: (val: number) => `$${(val ?? 0).toFixed(2)}` },
                { title: 'Method', dataIndex: 'payment_method', key: 'payment_method' },
                { title: 'Reference', dataIndex: 'transaction_reference', key: 'transaction_reference', render: (val?: string | null) => val ?? '—' }
              ]}
              dataSource={selectedInvoiceDetail.payments ?? []}
              size="small"
              pagination={false}
            />
            <Button icon={<PrinterOutlined />} style={{ marginTop: 16 }}>
              Print Invoice
            </Button>
          </>
        )}
      </Modal>

      <Modal
        title="Record Payment"
        open={recordPaymentModalVisible}
        onCancel={handleCloseRecordPaymentModal}
        width={600}
        destroyOnClose
        footer={null}
      >
        <Form form={paymentForm} layout="vertical" onFinish={handleSubmitRecordPayment}>
          <Form.Item
            label="Invoice"
            name="invoice_id"
            rules={[{ required: true, message: 'Select an invoice' }]}
          >
            <Select
              showSearch
              placeholder="Select unpaid/partially paid invoice"
              style={{ width: '100%' }}
              options={outstandingInvoiceOptions}
            />
          </Form.Item>
          <Form.Item
            label="Patient"
            name="patient_id"
            rules={[{ required: true, message: 'Patient is required' }]}
          >
            <Select
              showSearch
              placeholder="Select patient"
              style={{ width: '100%' }}
              options={patientOptions}
            />
          </Form.Item>
          <Form.Item
            label="Payment Amount"
            name="amount"
            rules={[{ required: true, message: 'Amount is required' }]}
          >
            <InputNumber
              prefix="$"
              min={0.01}
              step={0.01}
              style={{ width: '100%' }}
              placeholder="Enter payment amount"
            />
          </Form.Item>
          <Form.Item
            label="Payment Method"
            name="payment_method"
            rules={[{ required: true, message: 'Payment method is required' }]}
          >
            <Select
              placeholder="Select payment method"
              style={{ width: '100%' }}
              options={[
                { value: 'CASH', label: 'Cash' },
                { value: 'CREDIT_CARD', label: 'Credit Card' },
                { value: 'DEBIT_CARD', label: 'Debit Card' },
                { value: 'INSURANCE', label: 'Insurance' },
                { value: 'BANK_TRANSFER', label: 'Bank Transfer' },
                { value: 'CHEQUE', label: 'Cheque' },
                { value: 'OTHER', label: 'Other' }
              ]}
            />
          </Form.Item>
          <Form.Item label="Reference Number" name="transaction_reference">
            <Input placeholder="Transaction ID or check number" />
          </Form.Item>
          <Form.Item label="Notes" name="notes">
            <Input.TextArea rows={2} placeholder="Payment notes..." />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            Record Payment
          </Button>
        </Form>
      </Modal>

      <Modal
        title={editingServiceId ? 'Edit Service' : 'Add Service'}
        open={addServiceModalVisible}
        onCancel={handleCloseServiceModal}
        width={600}
        destroyOnClose
        footer={null}
      >
        <Form form={serviceForm} layout="vertical" onFinish={handleSubmitService}>
          <Form.Item
            label="Service Name"
            name="name"
            rules={[{ required: true, message: 'Service name is required' }]}
          >
            <Input placeholder="Enter service name" />
          </Form.Item>
          <Form.Item label="Description" name="description">
            <Input.TextArea rows={2} placeholder="Service description" />
          </Form.Item>
          <Form.Item
            label="Category"
            name="service_type"
            rules={[{ required: true, message: 'Category is required' }]}
          >
            <Select
              placeholder="Select category"
              style={{ width: '100%' }}
              options={[
                { value: 'CONSULTATION', label: 'Consultation' },
                { value: 'PROCEDURE', label: 'Procedure' },
                { value: 'LAB_TEST', label: 'Lab Test' },
                { value: 'IMAGING', label: 'Imaging' },
                { value: 'THERAPY', label: 'Therapy' },
                { value: 'SURGERY', label: 'Surgery' },
                { value: 'VACCINATION', label: 'Vaccination' },
                { value: 'OTHER', label: 'Other' }
              ]}
            />
          </Form.Item>
          <Form.Item label="Department" name="department_id">
            <Select
              showSearch
              allowClear
              placeholder="Select department"
              style={{ width: '100%' }}
              options={departmentOptions}
            />
          </Form.Item>
          <Form.Item label="Duration (minutes)" name="default_duration_minutes">
            <InputNumber min={1} style={{ width: '100%' }} placeholder="Duration in minutes" />
          </Form.Item>
          <Form.Item
            label="Price"
            name="default_price"
            rules={[{ required: true, message: 'Price is required' }]}
          >
            <InputNumber prefix="$" min={0} step={0.01} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item label="Active" name="is_active" valuePropName="checked">
            <Switch defaultChecked />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            {editingServiceId ? 'Update Service' : 'Add Service'}
          </Button>
        </Form>
      </Modal>

      <Modal
        title={editingProviderId ? 'Edit Insurance Provider' : 'Add Insurance Provider'}
        open={addProviderModalVisible}
        onCancel={handleCloseProviderModal}
        width={600}
        destroyOnClose
        footer={null}
      >
        <Form form={providerForm} layout="vertical" onFinish={handleSubmitProvider}>
          <Form.Item
            label="Provider Name"
            name="name"
            rules={[{ required: true, message: 'Provider name is required' }]}
          >
            <Input placeholder="Insurance provider name" />
          </Form.Item>
          <Form.Item label="Contact Person" name="contact_person">
            <Input placeholder="Contact person name" />
          </Form.Item>
          <Form.Item label="Phone" name="phone">
            <Input placeholder="Phone number" />
          </Form.Item>
          <Form.Item label="Email" name="email" rules={[{ type: 'email', message: 'Invalid email' }]}>
            <Input placeholder="Email address" />
          </Form.Item>
          <Form.Item label="Address" name="address">
            <Input.TextArea rows={2} placeholder="Address" />
          </Form.Item>
          <Form.Item label="Coverage Policy Notes" name="coverage_policy">
            <Input.TextArea rows={3} placeholder="Coverage policy details and notes" />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            {editingProviderId ? 'Update Provider' : 'Add Provider'}
          </Button>
        </Form>
      </Modal>

      <Modal
        title="Generate Report"
        open={generateReportModalVisible}
        onCancel={handleCloseGenerateReportModal}
        width={600}
        destroyOnClose
        footer={null}
      >
        <Form form={reportForm} layout="vertical" onFinish={handleSubmitGenerateReport}>
          <Form.Item
            label="Report Name"
            name="report_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"
              style={{ width: '100%' }}
              options={[
                { value: 'PATIENT_STATISTICS', label: 'Patient Statistics' },
                { value: 'REVENUE', label: 'Revenue' },
                { value: 'APPOINTMENT_SUMMARY', label: 'Appointment Summary' },
                { value: 'SERVICE_UTILIZATION', label: 'Service Utilization' },
                { value: 'DOCTOR_PERFORMANCE', label: 'Doctor Performance' },
                { value: 'BILLING_SUMMARY', label: 'Billing Summary' },
                { value: 'OPERATIONAL_METRICS', label: 'Operational Metrics' }
              ]}
            />
          </Form.Item>
          <Form.Item label="Date Range" name="date_range">
            <DatePicker.RangePicker style={{ width: '100%' }} />
          </Form.Item>
          <Button type="primary" htmlType="submit" block>
            Generate Report
          </Button>
        </Form>
      </Modal>
    </div>
  );
};

export default BillingReportsPage;