import { useEffect, useState } from 'react';
import { useInvoiceLanguages } from '../../hooks/useInvoiceLanguages';
import {
  Button,
  Input,
  Space,
  Spin,
  Table,
  Tag,
  message,
  Popconfirm,
  Tooltip,
  DatePicker,
  Modal,
  Select,
  // Switch,
  Form
} from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  EyeOutlined,
  PrinterOutlined,
  FilePdfOutlined,
  DragOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import { AppContainer } from '../../components/AppContainer';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';
import { RetailSaleModal } from './components/RetailSaleModal';
import { RetailSaleDetailModal } from './components/RetailSaleDetailDrawer';

export const RetailSales = () => {
  const [searchText, setSearchText] = useState('');
  const [data, setData] = useState<any[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [viewId, setViewId] = useState<string | null>(null);
  const [printModalOpen, setPrintModalOpen] = useState(false);
  const [printInvoiceId, setPrintInvoiceId] = useState<string | null>(null);
  const [printLang, setPrintLang] = useState('en');
  const [pdfName, setPdfName] = useState('');
  const { languages: invoiceLanguages } = useInvoiceLanguages();
  // const [printSign, setPrintSign] = useState(false); // TEMP: Digital signature disabled — change to true to re-enable
  const [filterDate, setFilterDate] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null]>([null, null]);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: Number(import.meta.env.VITE_PAGE_SIZE) || 10,
    total: 0,
    totalPages: 0,
  });

  const fetchData = async (
    page: number = pagination.current,
    limit: number = pagination.pageSize,
    search: string = searchText,
    dates: [dayjs.Dayjs | null, dayjs.Dayjs | null] = filterDate
  ) => {
    setLoading(true);
    try {
      let url = `${ENDPOINTS.RETAIL_SALES}?page=${page}&limit=${limit}`;
      if (search) url += `&search=${encodeURIComponent(search)}`;
      if (dates && dates[0] && dates[1]) {
        url += `&dateFrom=${dates[0].format('YYYY-MM-DD')}&dateTo=${dates[1].format('YYYY-MM-DD')}`;
      }

      const res = await jwtAxios.get(url);
      const records = res.data?.result?.data || [];
      const meta = res.data?.result?.meta || {};

      setData(records.map((r: any) => ({ key: r.id, ...r })));
      setPagination((prev) => ({
        ...prev,
        current: meta.page ?? page,
        pageSize: meta.limit ?? limit,
        total: meta.total ?? prev.total,
        totalPages: meta.totalPages ?? prev.totalPages,
      }));
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch retail sales');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData(1, pagination.pageSize, '', [null, null]);
  }, []);

  const handleCancelSale = async (id: string) => {
    try {
      await jwtAxios.delete(`${ENDPOINTS.RETAIL_SALES}/${id}`);
      message.success('Retail sale cancelled successfully');
      fetchData(pagination.current, pagination.pageSize, searchText, filterDate);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to cancel retail sale');
    }
  };

  const handleMoveToWholesale = async (id: string) => {
    try {
      await jwtAxios.patch(ENDPOINTS.RETAIL_SALE_MOVE_TO_WHOLESALE(id));
      message.success('Retail sale moved to wholesale successfully');
      fetchData(pagination.current, pagination.pageSize, searchText, filterDate);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to move to wholesale');
    }
  };

  const handleExportPdf = async () => {
    if (!data || data.length === 0) {
      message.warning('No data available to export');
      return;
    }
    try {
      setLoading(true);
      const params = new URLSearchParams();
      if (searchText) params.append('search', searchText);
      if (filterDate && filterDate[0] && filterDate[1]) {
        params.append('dateFrom', filterDate[0].format('YYYY-MM-DD'));
        params.append('dateTo', filterDate[1].format('YYYY-MM-DD'));
      }

      const response = await jwtAxios.get(
        `${ENDPOINTS.RETAIL_SALES}/export-pdf?${params.toString()}`,
        { responseType: 'blob' }
      );

      const disposition = response.headers['content-disposition'];
      let fileName = `retail-sales-${dayjs().format('YYYY-MM-DD_HHmmss')}.pdf`;
      if (disposition) {
        const match = disposition.match(/filename="?([^"]+)"?/);
        if (match) fileName = match[1];
      }

      const url = window.URL.createObjectURL(response.data);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);

      message.success('Retail Sales exported successfully');
    } catch (err: any) {
      message.error('Failed to export Retail Sales');
    } finally {
      setLoading(false);
    }
  };

  const handlePrintInvoice = async () => {
    if (!printInvoiceId) return;
    try {
      setLoading(true);
      // const response = await jwtAxios.get(`${ENDPOINTS.RETAIL_SALES}/${printInvoiceId}/export-pdf?lang=${printLang}&printSign=${printSign}`, {
      //   responseType: 'blob',
      // });
      const response = await jwtAxios.get(`${ENDPOINTS.RETAIL_SALES}/${printInvoiceId}/export-pdf?lang=${printLang}`, {
        responseType: 'blob',
      });

      const disposition = response.headers['content-disposition'];
      let fileName = `invoice-${printInvoiceId}.pdf`;
      if (pdfName && pdfName.trim() !== '') {
        fileName = pdfName.trim().endsWith('.pdf') ? pdfName.trim() : `${pdfName.trim()}.pdf`;
      } else if (disposition) {
        const match = disposition.match(/filename="?([^"]+)"?/);
        if (match) fileName = match[1];
      }

      const url = window.URL.createObjectURL(response.data);
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
      setPrintModalOpen(false);
      setPdfName('');
    } catch (err: any) {
      message.error('Failed to print invoice');
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: 'S.No',
      render: (_: any, __: any, index: number) =>
        (pagination.current - 1) * pagination.pageSize + index + 1,
      width: 60,
    },
    {
      title: 'Invoice No',
      dataIndex: 'invoiceNo',
      render: (text: string) => <Tag color="blue">{text}</Tag>,
    },
    {
      title: 'Sale Date',
      dataIndex: 'invoiceDate',
      render: (date: string) => (date ? dayjs(date).format('DD MMM YYYY') : '-'),
    },
    {
      title: 'Customer',
      render: (_: any, record: any) =>
        record.walkInName || 'Walk-in Customer',
    },
    {
      title: 'Items',
      render: (_: any, record: any) => {
        const items = record.items || [];
        return (
          <span>
            {items.length} item{items.length > 1 ? 's' : ''}
          </span>
        );
      },
    },
    {
      title: 'Grand Total',
      dataIndex: 'grandTotal',
      render: (val: number) => <Tag color="green">{'\u20B9'}{Number(val).toFixed(2)}</Tag>,
    },
    {
      title: 'Payment Mode',
      dataIndex: 'paymentMode',
      render: (val: string) =>
        val ? <Tag color="geekblue">{val}</Tag> : '\u2014',
    },
    {
      title: 'Status',
      dataIndex: 'movedToWholesale',
      render: (val: boolean) =>
        val ? <Tag color="green">Moved to Wholesale</Tag> : <Tag color="default">Retail</Tag>,
    },
    {
      title: 'Action',
      render: (_: any, record: any) => (
        <Space>
          <Tooltip title="View Details">
            <Button
              type="link"
              icon={<EyeOutlined />}
              size="small"
              onClick={() => setViewId(record.id)}
            />
          </Tooltip>
          <Tooltip title="Print Invoice">
            <Button
              type="link"
              icon={<PrinterOutlined />}
              size="small"
              onClick={() => {
                setPrintInvoiceId(record.id);
                setPrintModalOpen(true);
              }}
            />
          </Tooltip>
          <Tooltip title={record.movedToWholesale ? 'Already Moved' : 'Move To Wholesale'}>
            <Popconfirm
              title="Move To Wholesale"
              description="Are you sure you want to move this retail sale to wholesale?"
              onConfirm={() => handleMoveToWholesale(record.id)}
              okText="Yes, Move"
              cancelText="No"
              disabled={record.movedToWholesale}
            >
              <Button
                type="link"
                icon={<DragOutlined />}
                size="small"
                disabled={record.movedToWholesale}
              />
            </Popconfirm>
          </Tooltip>
          <Tooltip title="Cancel Sale">
            <Popconfirm
              title="Cancel Sale"
              description="Are you sure you want to cancel this retail sale? Stock will be restored."
              onConfirm={() => handleCancelSale(record.id)}
              okText="Yes, Cancel"
              cancelText="No"
            >
              <Button type="text" danger icon={<DeleteOutlined />} size="small" />
            </Popconfirm>
          </Tooltip>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Spin spinning={loading}>
        <AppContainer
          title="Retail Sales"
          headerAction={
            <Space>
              <Button
                type="default"
                icon={<FilePdfOutlined />}
                onClick={handleExportPdf}
                disabled={data.length === 0}
              >
                Export to PDF
              </Button>
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => setModalOpen(true)}
              >
                New Retail Sale
              </Button>
            </Space>
          }
        >
          <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
            <Space>
              <DatePicker.RangePicker
                value={filterDate as any}
                onChange={(dates) => {
                  setFilterDate(dates as any);
                  fetchData(1, pagination.pageSize, searchText, dates as any);
                }}
                style={{ width: 250 }}
              />
              <Input.Search
                placeholder="Search by Invoice No..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                onSearch={(val) => fetchData(1, pagination.pageSize, val, filterDate)}
                allowClear
                style={{ width: 250 }}
              />
            </Space>
          </div>

          <Table
            rowKey="key"
            columns={columns}
            dataSource={data}
            loading={loading}
            scroll={{ x: 'max-content' }}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total: pagination.total,
              showSizeChanger: true,
            }}
            onChange={(pageInfo) => {
              fetchData(pageInfo.current!, pageInfo.pageSize!, searchText, filterDate);
            }}
          />
          <div className="text-center mt-2">
            <Tag color="cyan">
              Page {pagination.current} of {pagination.totalPages}
            </Tag>
          </div>
        </AppContainer>

        <RetailSaleModal
          open={modalOpen}
          onCancel={() => setModalOpen(false)}
          onSuccess={() => {
            setModalOpen(false);
            fetchData(1, pagination.pageSize, searchText, filterDate);
          }}
        />

        <RetailSaleDetailModal
          open={!!viewId}
          onClose={() => setViewId(null)}
          saleId={viewId}
        />

        <Modal
          title="Print Invoice Options"
          open={printModalOpen}
          onOk={handlePrintInvoice}
          onCancel={() => {
            setPrintModalOpen(false);
            setPdfName('');
          }}
          okText="Generate Invoice"
          confirmLoading={loading}
        >
          <Form layout="vertical">
            <Form.Item label="Language">
              <Select
                value={printLang}
                onChange={setPrintLang}
                options={invoiceLanguages.map((l) => ({ label: l.name, value: l.code }))}
              />
            </Form.Item>
            <Form.Item label="PDF Name">
              <Input value={pdfName} onChange={(e) => setPdfName(e.target.value)} />
            </Form.Item>
            {/* TEMP: Digital signature UI disabled — uncomment below to re-enable
            <Form.Item label="Include Authorized Signature">
              <Switch checked={printSign} onChange={setPrintSign} />
            </Form.Item>
            */}
          </Form>
        </Modal>
      </Spin>
    </div>
  );
};

export default RetailSales;