import { useEffect, useState } from 'react';
import {
  Alert,
  Button,
  Card,
  Col,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Row,
  Select,
  Space,
  Statistic,
  Table,
  Tabs,
  Tag,
  Typography,
  message,
} from 'antd';
import {
  DeleteOutlined,
  EditOutlined,
  InboxOutlined,
  PlusOutlined,
  RetweetOutlined,
  SearchOutlined,
  ShoppingOutlined,
} from '@ant-design/icons';
import dayjs, { Dayjs } from 'dayjs';
import { AppContainer } from '../../components/AppContainer';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

const { Text } = Typography;
const { RangePicker } = DatePicker;

interface LedgerRecord {
  supplierId: string;
  supplierName: string;
  supplierTamilName?: string;
  mobileNo?: string;
  totalIncomingBoxes: number;
  totalReturnedBoxes: number;
  outstandingBoxes: number;
}

interface BoxReturnRecord {
  id: string;
  supplierId: string;
  returnDate: string;
  boxCount: number;
  remarks?: string;
  signature?: string | null;
  signatureUrl?: string | null;
  supplier?: { id: string; name: string; tamilName?: string };
  createdByUser?: { id: string; name: string };
}

interface IncomingBoxRecord {
  id: string;
  purchaseDate: string;
  billNo?: string;
  lotNo: string;
  bags: number;
  quantity: number;
  ratePerUnit: number;
  supplier?: { id: string; name: string };
  vegetable?: { id: string; name: string };
}

export const BoxReturns = () => {
  const [activeTab, setActiveTab] = useState<'ledger' | 'returns' | 'incoming'>('ledger');
  const [searchText, setSearchText] = useState('');
  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null);

  // Supplier Ledger state
  const [ledgerData, setLedgerData] = useState<LedgerRecord[]>([]);
  const [ledgerLoading, setLedgerLoading] = useState(false);

  // Box Returns History state
  const [returnsData, setReturnsData] = useState<BoxReturnRecord[]>([]);
  const [returnsLoading, setReturnsLoading] = useState(false);
  const [returnsPagination, setReturnsPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // Incoming Boxes History state
  const [incomingData, setIncomingData] = useState<IncomingBoxRecord[]>([]);
  const [incomingLoading, setIncomingLoading] = useState(false);
  const [incomingPagination, setIncomingPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 0,
  });

  // Suppliers metadata for dropdowns
  const [suppliers, setSuppliers] = useState<{ id: string; name: string }[]>([]);

  // Modal State
  const [modalOpen, setModalOpen] = useState(false);
  const [modalLoading, setModalLoading] = useState(false);
  const [editModalLoading, setEditModalLoading] = useState(false);
  const [editingRecord, setEditingRecord] = useState<BoxReturnRecord | null>(null);
  const [editingSignatureUrl, setEditingSignatureUrl] = useState<string | null>(null);
  const [form] = Form.useForm();
  const selectedSupplierId = Form.useWatch('supplierId', form);

  // Fetch Suppliers for dropdown
  const fetchSuppliers = async () => {
    try {
      const res = await jwtAxios.get(ENDPOINTS.PURCHASE_META);
      const records = res.data?.result?.suppliers || [];
      setSuppliers(
        records.map((s: any) => ({
          id: s.id.toString(),
          name: s.name,
        }))
      );
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch suppliers');
    }
  };

  // Fetch Ledger Summary
  const fetchLedger = async () => {
    setLedgerLoading(true);
    try {
      const url = searchText
        ? `${ENDPOINTS.BOX_RETURNS_LEDGER}?search=${encodeURIComponent(searchText)}`
        : ENDPOINTS.BOX_RETURNS_LEDGER;
      const res = await jwtAxios.get(url);
      const items = res.data?.result || [];
      setLedgerData(items);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch box ledger');
    } finally {
      setLedgerLoading(false);
    }
  };

  // Fetch Box Returns History
  const fetchReturns = async (
    page: number = returnsPagination.current,
    limit: number = returnsPagination.pageSize
  ) => {
    setReturnsLoading(true);
    try {
      let url = `${ENDPOINTS.BOX_RETURNS}?page=${page}&limit=${limit}`;
      if (searchText) url += `&search=${encodeURIComponent(searchText)}`;
      if (dateRange) {
        url += `&startDate=${dateRange[0].format('YYYY-MM-DD')}&endDate=${dateRange[1].format('YYYY-MM-DD')}`;
      }

      const res = await jwtAxios.get(url);
      const result = res.data?.result || {};
      setReturnsData(result.items || []);
      setReturnsPagination((prev) => ({
        ...prev,
        current: page,
        total: result.total || 0,
      }));
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch return records');
    } finally {
      setReturnsLoading(false);
    }
  };

  // Fetch Incoming Box Purchases History
  const fetchIncoming = async (
    page: number = incomingPagination.current,
    limit: number = incomingPagination.pageSize
  ) => {
    setIncomingLoading(true);
    try {
      let url = `${ENDPOINTS.BOX_RETURNS_INCOMING}?page=${page}&limit=${limit}`;
      if (searchText) url += `&search=${encodeURIComponent(searchText)}`;
      if (dateRange) {
        url += `&startDate=${dateRange[0].format('YYYY-MM-DD')}&endDate=${dateRange[1].format('YYYY-MM-DD')}`;
      }

      const res = await jwtAxios.get(url);
      const result = res.data?.result || {};
      setIncomingData(result.items || []);
      setIncomingPagination((prev) => ({
        ...prev,
        current: page,
        total: result.total || 0,
      }));
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch incoming box history');
    } finally {
      setIncomingLoading(false);
    }
  };

  const refreshAllData = () => {
    fetchLedger();
    fetchReturns(1, returnsPagination.pageSize);
    fetchIncoming(1, incomingPagination.pageSize);
  };

  useEffect(() => {
    fetchSuppliers();
    refreshAllData();
  }, []);

  const handleSearch = () => {
    if (activeTab === 'ledger') fetchLedger();
    else if (activeTab === 'returns') fetchReturns(1, returnsPagination.pageSize);
    else if (activeTab === 'incoming') fetchIncoming(1, incomingPagination.pageSize);
  };

  const handleResetSearch = () => {
    setSearchText('');
    setDateRange(null);
    if (activeTab === 'ledger') {
      fetchLedger();
    } else if (activeTab === 'returns') {
      fetchReturns(1, returnsPagination.pageSize);
    } else if (activeTab === 'incoming') {
      fetchIncoming(1, incomingPagination.pageSize);
    }
  };

  // Selected supplier outstanding boxes calculation
  const selectedSupplierRecord = ledgerData.find(
    (l) => l.supplierId.toString() === (selectedSupplierId ? selectedSupplierId.toString() : '')
  );

  const rawOutstanding = selectedSupplierRecord ? selectedSupplierRecord.outstandingBoxes : 0;
  const currentEditingOldCount = editingRecord ? Number(editingRecord.boxCount) : 0;
  const maxAllowableReturn = Math.max(0, rawOutstanding + currentEditingOldCount);

  // Open Modal to Add Return
  const handleOpenAddModal = (supplierId?: string) => {
    setEditingRecord(null);
    form.resetFields();
    form.setFieldsValue({
      returnDate: dayjs(),
      supplierId: supplierId ? supplierId.toString() : undefined,
    });
    setModalOpen(true);
  };

  // Open Modal to Edit Return — fetches fresh data from GET /box-returns/:id
  const handleOpenEditModal = async (record: BoxReturnRecord) => {
    setEditModalLoading(true);
    setEditingSignatureUrl(null);
    setEditingRecord(record);
    form.resetFields();
    setModalOpen(true);
    try {
      const res = await jwtAxios.get(`${ENDPOINTS.BOX_RETURNS}/${record.id}`);
      const data = res.data?.result;
      form.setFieldsValue({
        supplierId: data.supplier?.id?.toString() ?? record.supplierId?.toString(),
        returnDate: dayjs(data.returnDate),
        boxCount: Number(data.boxCount),
        remarks: data.remarks || '',
      });
      setEditingSignatureUrl(data.signatureUrl || null);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to load box return details');
      setModalOpen(false);
    } finally {
      setEditModalLoading(false);
    }
  };

  const executeSubmit = async (values: any) => {
    try {
      setModalLoading(true);
      const payload = {
        supplierId: values.supplierId,
        returnDate: values.returnDate.format('YYYY-MM-DD'),
        boxCount: values.boxCount,
        remarks: values.remarks,
      };

      if (editingRecord) {
        await jwtAxios.put(`${ENDPOINTS.BOX_RETURNS}/${editingRecord.id}`, payload);
        message.success('Box return updated successfully');
      } else {
        await jwtAxios.post(ENDPOINTS.BOX_RETURNS, payload);
        message.success('Box return recorded successfully');
      }

      setModalOpen(false);
      refreshAllData();
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to save box return');
    } finally {
      setModalLoading(false);
    }
  };

  // Submit Modal
  const handleModalSubmit = async () => {
    try {
      const values = await form.validateFields();
      if (editingRecord) {
        await executeSubmit(values);
      } else {
        Modal.confirm({
          title: 'Confirm Box Return',
          content:
            'Once submitted, a WhatsApp box return message is sent to the supplier and cannot be undone! Are you sure you want to proceed?',
          okText: 'Submit',
          cancelText: 'Cancel',
          okButtonProps: { className: 'bg-green-600' },
          onOk: async () => {
            await executeSubmit(values);
          },
        });
      }
    } catch (err: any) {
      if (err.name === 'ValidationError') return;
      message.error(err.response?.data?.message || 'Failed to save box return');
    }
  };

  // Delete Box Return Record
  const handleDeleteReturn = async (id: string) => {
    try {
      await jwtAxios.delete(`${ENDPOINTS.BOX_RETURNS}/${id}`);
      message.success('Box return record deleted');
      refreshAllData();
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to delete record');
    }
  };

  // Totals for Summary Cards
  const totalPendingToReturn = ledgerData.reduce(
    (acc, curr) => acc + (curr.outstandingBoxes > 0 ? curr.outstandingBoxes : 0),
    0
  );
  const totalIncomingAll = ledgerData.reduce((acc, curr) => acc + curr.totalIncomingBoxes, 0);
  const totalReturnedAll = ledgerData.reduce((acc, curr) => acc + curr.totalReturnedBoxes, 0);

  // Column definitions for Supplier Box Ledger Table
  const ledgerColumns = [
    {
      title: 'Supplier',
      dataIndex: 'supplierName',
      key: 'supplierName',
      render: (text: string, record: LedgerRecord) => (
        <div>
          <Text className="text-[15px]">{text}</Text>
          {record.supplierTamilName && (
            <div>
              <Text type="secondary" className="text-[12px]">{record.supplierTamilName}</Text>
            </div>
          )}
        </div>
      ),
    },
    {
      title: 'Total Incoming Boxes',
      dataIndex: 'totalIncomingBoxes',
      key: 'totalIncomingBoxes',
      width: 200,
      render: (val: number) => (
        <Tag color="blue" className="text-[14px] px-3 py-1">
          {val} Boxes
        </Tag>
      ),
    },
    {
      title: 'Total Returned Boxes',
      dataIndex: 'totalReturnedBoxes',
      key: 'totalReturnedBoxes',
      width: 200,
      render: (val: number) => (
        <Tag color="green" className="text-[14px] px-3 py-1">
          {val} Boxes
        </Tag>
      ),
    },
    {
      title: 'Outstanding Boxes',
      dataIndex: 'outstandingBoxes',
      key: 'outstandingBoxes',
      width: 220,
      render: (val: number) => {
        if (val > 0) {
          return (
            <Tag color="volcano" className="text-[14px] font-bold px-3 py-1">
              {val} Boxes Pending
            </Tag>
          );
        } else if (val === 0) {
          return (
            <Tag color="green" className="text-[14px] font-bold px-3 py-1">
              0 Boxes (All Cleared)
            </Tag>
          );
        } else {
          return (
            <Tag color="red" className="text-[14px] font-bold px-3 py-1">
              Excess Returned ({Math.abs(val)} Boxes)
            </Tag>
          );
        }
      },
    },
    {
      title: 'Action',
      key: 'action',
      width: 160,
      render: (_: any, record: LedgerRecord) => (
        <Button
          type="primary"
          icon={<RetweetOutlined />}
          onClick={() => handleOpenAddModal(record.supplierId)}
          disabled={record.outstandingBoxes <= 0}
          className="rounded-md"
        >
          Return boxes
        </Button>
      ),
    },
  ];

  // Column definitions for Return Boxes History Table
  const returnsColumns = [
    {
      title: 'Return Date',
      dataIndex: 'returnDate',
      key: 'returnDate',
      width: 140,
      render: (text: string) => dayjs(text).format('DD/MM/YYYY'),
    },
    {
      title: 'Supplier',
      dataIndex: ['supplier', 'name'],
      key: 'supplier',
      render: (text: string) => <Text>{text || '-'}</Text>,
    },
    {
      title: 'Boxes Returned',
      dataIndex: 'boxCount',
      key: 'boxCount',
      width: 160,
      render: (val: any) => <Tag color="green" className="text-[14px]">{val} BOX</Tag>,
    },
    {
      title: 'Remarks',
      dataIndex: 'remarks',
      key: 'remarks',
      render: (text: string) => text || '-',
    },
    {
      title: 'Signature',
      dataIndex: 'signatureUrl',
      key: 'signatureUrl',
      width: 100,
      render: (url: string | null) =>
        url ? (
          <img
            src={url}
            alt="Signature"
            loading="lazy"
            style={{
              width: 60,
              height: 40,
              objectFit: 'contain',
              border: '1px solid #d9d9d9',
              borderRadius: 4,
              cursor: 'pointer',
              background: '#fafafa',
            }}
            onClick={() =>
              Modal.info({
                title: 'Supplier Signature',
                icon: null,
                content: (
                  <div style={{ textAlign: 'center', padding: '8px 0' }}>
                    <img
                      src={url}
                      alt="Signature"
                      loading="lazy"
                      style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
                    />
                  </div>
                ),
                okText: 'Close',
              })
            }
          />
        ) : (
          <span style={{ color: '#bfbfbf', fontSize: 12 }}>—</span>
        ),
    },
    {
      title: 'Actions',
      key: 'actions',
      width: 120,
      render: (_: any, record: BoxReturnRecord) => (
        <Space>
          <Button
            type="text"
            icon={<EditOutlined style={{ color: '#1890ff' }} />}
            onClick={() => handleOpenEditModal(record)}
          />
          <Popconfirm
            title="Are you sure to delete this box return entry?"
            onConfirm={() => handleDeleteReturn(record.id)}
            okText="Yes"
            cancelText="No"
          >
            <Button type="text" danger icon={<DeleteOutlined />} />
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // Column definitions for Incoming Box History Table
  const incomingColumns = [
    {
      title: 'Purchase Date',
      dataIndex: 'purchaseDate',
      key: 'purchaseDate',
      width: 140,
      render: (text: string) => dayjs(text).format('DD/MM/YYYY'),
    },
    {
      title: 'Lot No',
      dataIndex: 'lotNo',
      key: 'lotNo',
      width: 150,
      render: (text: string) => <Tag color="purple">{text}</Tag>,
    },
    {
      title: 'Bill No',
      dataIndex: 'billNo',
      key: 'billNo',
      width: 130,
      render: (text: string) => text || '-',
    },
    // {
    //   title: 'Supplier',
    //   dataIndex: ['supplier', 'name', 'cashSupplierName'],
    //   key: 'supplier',
    //   render: (text: string) => <Text>{text || '-'}</Text>,
    // },
    {
      title: 'Supplier',
      key: 'supplier',
      render: (_: unknown, record: any) => (
        <Text>
          {record.supplier?.name || record.cashSupplierName || '-'} {record.cashSupplierName && '(Cash)'}
        </Text>
      ),
    },
    {
      title: 'Vegetable Item',
      dataIndex: ['vegetable', 'name'],
      key: 'vegetable',
      render: (text: string) => <Tag color="orange">{text || 'Tomato'}</Tag>,
    },
    {
      title: 'Incoming Boxes Count',
      dataIndex: 'bags',
      key: 'bags',
      width: 180,
      render: (val: any) => <Tag color="blue" className="text-[14px]">{val} BOX</Tag>,
    },
    {
      title: 'Total Qty (KG)',
      dataIndex: 'quantity',
      key: 'quantity',
      width: 140,
      render: (val: any) => `${val} KG`,
    },
  ];

  return (
    <AppContainer
      title="Tomato Box Ledger"
      headerAction={
        <Space wrap>
          {activeTab !== 'ledger' && (
            <RangePicker
              value={dateRange}
              onChange={(dates) => setDateRange(dates as [Dayjs, Dayjs] | null)}
              format="DD/MM/YYYY"
            />
          )}
          <Input
            placeholder="Search supplier / lot..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            onPressEnter={handleSearch}
            allowClear
            className="w-55"
          />
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
            Search
          </Button>
          <Button onClick={handleResetSearch}>Reset</Button>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => handleOpenAddModal()}>
            Box Return
          </Button>
        </Space>
      }
    >
      {/* Top Statistic Cards */}
      <Row gutter={[16, 16]} className="mb-5">
        <Col xs={24} sm={8}>
          <Card variant="borderless" className="bg-[#fff2e8] rounded-lg">
            <Statistic
              title={<span className="text-[#d4380d] font-semibold">Pending Boxes to Return</span>}
              value={totalPendingToReturn}
              suffix="Boxes"
              prefix={<InboxOutlined className="text-[#d4380d]" />}
              styles={{ content: { color: '#d4380d', fontWeight: 'bold' } }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={8}>
          <Card variant="borderless" className="bg-[#e6f7ff] rounded-lg">
            <Statistic
              title={<span className="text-[#096dd9] font-semibold">Total Incoming Boxes</span>}
              value={totalIncomingAll}
              suffix="Boxes"
              prefix={<ShoppingOutlined className="text-[#096dd9]" />}
              styles={{ content: { color: '#096dd9', fontWeight: 'bold' } }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={8}>
          <Card variant="borderless" className="bg-[#f6ffed] rounded-lg">
            <Statistic
              title={<span className="text-[#389e0d] font-semibold">Total Returned Boxes</span>}
              value={totalReturnedAll}
              suffix="Boxes"
              prefix={<RetweetOutlined className="text-[#389e0d]" />}
              styles={{ content: { color: '#389e0d', fontWeight: 'bold' } }}
            />
          </Card>
        </Col>
      </Row>

      {/* Main Tabs */}
      <Tabs
        activeKey={activeTab}
        onChange={(key) => setActiveTab(key as any)}
        type="card"
        items={[
          {
            key: 'ledger',
            label: (
              <span>
                <InboxOutlined /> Supplier Box Ledger
              </span>
            ),
            children: (
              <Table
                columns={ledgerColumns}
                dataSource={ledgerData}
                rowKey="supplierId"
                loading={ledgerLoading}
                pagination={{ pageSize: 10 }}
                scroll={{ x: 700 }}
              />
            ),
          },
          {
            key: 'returns',
            label: (
              <span>
                <RetweetOutlined /> Return Boxes History
              </span>
            ),
            children: (
              <Table
                columns={returnsColumns}
                dataSource={returnsData}
                rowKey="id"
                loading={returnsLoading}
                pagination={{
                  current: returnsPagination.current,
                  pageSize: returnsPagination.pageSize,
                  total: returnsPagination.total,
                  onChange: (page, pageSize) => fetchReturns(page, pageSize),
                }}
                scroll={{ x: 700 }}
              />
            ),
          },
          {
            key: 'incoming',
            label: (
              <span>
                <ShoppingOutlined /> Incoming Box History
              </span>
            ),
            children: (
              <Table
                columns={incomingColumns}
                dataSource={incomingData}
                rowKey="id"
                loading={incomingLoading}
                pagination={{
                  current: incomingPagination.current,
                  pageSize: incomingPagination.pageSize,
                  total: incomingPagination.total,
                  onChange: (page, pageSize) => fetchIncoming(page, pageSize),
                }}
                scroll={{ x: 700 }}
              />
            ),
          },
        ]}
      />

      {/* Record / Edit Box Return Modal */}
      <Modal
        title={editingRecord ? 'Edit Box Return' : 'Record Box Return to Supplier'}
        open={modalOpen}
        onOk={handleModalSubmit}
        onCancel={() => { setModalOpen(false); setEditingSignatureUrl(null); }}
        confirmLoading={modalLoading}
        destroyOnHidden
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="supplierId"
            label="Supplier"
            rules={[{ required: true, message: 'Please select a supplier' }]}
          >
            <Select
              placeholder="Select Supplier"
              showSearch
              optionFilterProp="children"
              filterOption={(input, option) =>
                (option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
              }
              options={suppliers.map((s) => ({ label: s.name, value: s.id }))}
              disabled={!!editingRecord}
              loading={editModalLoading}
            />
          </Form.Item>

          {selectedSupplierId && (
            <div className="mb-4">
              {maxAllowableReturn > 0 ? (
                <Alert
                  type="info"
                  showIcon
                  message={
                    <span>
                      Pending Boxes to Return for <b>{selectedSupplierRecord?.supplierName}</b>:{' '}
                      <Tag color="volcano" className="text-[14px] font-bold">
                        {maxAllowableReturn} Boxes
                      </Tag>
                    </span>
                  }
                />
              ) : (
                <Alert
                  type="warning"
                  showIcon
                  message={
                    <span>
                      No Pending Boxes to Return for <b>{selectedSupplierRecord?.supplierName}</b>! (0 Boxes)
                    </span>
                  }
                />
              )}
            </div>
          )}

          <Form.Item
            name="returnDate"
            label="Return Date"
            rules={[{ required: true, message: 'Please select return date' }]}
          >
            <DatePicker format="DD/MM/YYYY" className="w-full" />
          </Form.Item>

          <Form.Item
            name="boxCount"
            label="Boxes Returned Count"
            rules={[
              { required: true, message: 'Please enter number of boxes returned' },
              {
                validator: async (_, value) => {
                  if (value !== undefined) {
                    if (value <= 0) {
                      return Promise.reject(new Error('Box count must be greater than 0'));
                    }
                    if (selectedSupplierId && value > maxAllowableReturn) {
                      return Promise.reject(
                        new Error(
                          `Cannot return ${value} boxes. Max pending boxes to return for this supplier is ${maxAllowableReturn}`
                        )
                      );
                    }
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <InputNumber
              min={1}
              step={1}
              className="w-full!"
              placeholder="Enter number of boxes"
            />
          </Form.Item>

          <Form.Item name="remarks" label="Remarks">
            <Input.TextArea rows={3} placeholder="Enter any notes or remarks..." />
          </Form.Item>

          {/* Read-only signature preview — set only from Android */}
          {editingRecord && (
            <Form.Item label="Supplier Signature">
              {editModalLoading ? (
                <span style={{ color: '#8c8c8c', fontSize: 13 }}>Loading…</span>
              ) : editingSignatureUrl ? (
                <img
                  src={editingSignatureUrl}
                  alt="Signature"
                  loading="lazy"
                  style={{
                    maxWidth: '100%',
                    maxHeight: 120,
                    objectFit: 'contain',
                    border: '1px solid #d9d9d9',
                    borderRadius: 6,
                    background: '#fafafa',
                    padding: 6,
                  }}
                />
              ) : (
                <span style={{ color: '#bfbfbf', fontSize: 13 }}>No signature captured</span>
              )}
            </Form.Item>
          )}
        </Form>
      </Modal>
    </AppContainer>
  );
};