import { useEffect, useState } from 'react';
import {
  Button,
  Input,
  Popconfirm,
  Popover,
  Space,
  Spin,
  Table,
  Tag,
  message,
} from 'antd';
import {
  HistoryOutlined,
  CheckCircleOutlined,
  // WarningOutlined,
  RetweetOutlined,
} from '@ant-design/icons';
import { AppContainer } from '../../components/AppContainer';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';
import { AddRetailSpoilageModal } from './components/AddRetailSpoilageModal';
import { AddRetailReturnModal } from './components/AddRetailReturnModal';

export const RetailStock = () => {
  const [summaryData, setSummaryData] = useState<any[]>([]);
  const [summaryLoading, setSummaryLoading] = useState<boolean>(false);
  const [searchText, setSearchText] = useState('');
  const [closingLotNo, setClosingLotNo] = useState<string | null>(null);

  // Spoilage & Return modal states
  const [spoilageModalOpen, setSpoilageModalOpen] = useState(false);
  const [returnModalOpen, setReturnModalOpen] = useState(false);
  const [selectedLot, setSelectedLot] = useState<any>(null);

  // Close flexible retail lot
  const handleCloseRetailLot = async (lotNo: string, purchaseId?: string) => {
    setClosingLotNo(lotNo);
    try {
      const res = await jwtAxios.patch(ENDPOINTS.RETAIL_STOCK_CLOSE, {
        lotNo,
        purchaseId: purchaseId ? Number(purchaseId) : undefined,
      });
      message.success(res.data?.message || 'Retail lot closed successfully');
      fetchSummary();
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to close retail lot');
    } finally {
      setClosingLotNo(null);
    }
  };

  // Fetch Live Summary per Lot
  const fetchSummary = async () => {
    setSummaryLoading(true);
    try {
      const res = await jwtAxios.get(ENDPOINTS.RETAIL_STOCK_SUMMARY);
      const records = res.data?.result || [];
      setSummaryData(records.map((r: any, idx: number) => ({ key: r.id || `${r.lotNo || 'unknown'}-${idx}`, ...r })));
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch retail stock summary');
    } finally {
      setSummaryLoading(false);
    }
  };

  useEffect(() => {
    fetchSummary();
  }, []);

  const filteredData = summaryData.filter((item) => {
    if (!searchText) return true;
    const search = searchText.toLowerCase();
    const supplierName = item.supplier?.name || item.cashSupplierName || '';
    return (
      item.lotNo?.toLowerCase().includes(search) ||
      item.vegetable?.name?.toLowerCase().includes(search) ||
      supplierName.toLowerCase().includes(search)
    );
  });

  const columns = [
    {
      title: 'S.No',
      render: (_: any, __: any, index: number) => index + 1,
      width: 60,
    },
    {
      title: 'Lot No',
      dataIndex: 'lotNo',
      render: (lotNo: string) => <Tag color="blue">{lotNo}</Tag>,
    },
    {
      title: 'Vegetable',
      render: (_: any, record: any) => record.vegetable?.name || '-',
    },
    {
      title: 'Supplier',
      render: (_: any, record: any) => record.supplier?.name || record.cashSupplierName || '-',
    },
    {
      title: 'Total Allocated Stock',
      render: (_: any, record: any) => (
        <span>
          <Tag color="purple">{Number(record.totalAllocatedKg)} KG</Tag>
          {record.totalAllocatedBags && Number(record.totalAllocatedBags) > 0 && (
            <Tag color="cyan">{Number(record.totalAllocatedBags)} {record.unit}</Tag>
          )}
        </span>
      ),
    },
    {
      title: 'Current Retail Stock Remaining',
      render: (_: any, record: any) => {
        const remKg = Number(record.remainingQuantity);
        const remBags = record.remainingBags !== null ? Number(record.remainingBags) : null;
        const color = remKg === 0 ? 'red' : 'green';
        return (
          <span>
            <Tag color={color}>{remKg} KG</Tag>
            {remBags !== null && remBags > 0 && (
              <Tag color="blue">{remBags} {record.unit}</Tag>
            )}
          </span>
        );
      },
    },
    {
      title: 'Movement Count',
      dataIndex: 'movementCount',
      align: 'center' as const,
      render: (count: number) => (
        <Tag icon={<HistoryOutlined />} color="geekblue">
          {count} time{count > 1 ? 's' : ''} moved
        </Tag>
      ),
    },
    {
      title: 'Actions',
      key: 'actions',
      align: 'center' as const,
      render: (_: any, record: any) => {
        const remainingKg = Number(record.remainingQuantity ?? 0);
        const remainingBags = record.remainingBags !== null && record.remainingBags !== undefined
          ? Number(record.remainingBags)
          : 0;
        const hasStock = remainingKg > 0 || remainingBags > 0;
        const isFlexible = !!record.isFlexible;

        return (
          <Space>
            {isFlexible && hasStock && (
              <Popover content="Close Flexible Lot (Deplete remaining retail stock)">
                <Popconfirm
                  title="Close Flexible Lot"
                  description={`Are you sure you want to close retail lot "${record.lotNo}"? Remaining balance will be cleared and it will no longer be available for retail sale.`}
                  okText="Yes, Close Lot"
                  cancelText="Cancel"
                  okButtonProps={{ danger: true }}
                  onConfirm={() => handleCloseRetailLot(record.lotNo, record.purchaseId)}
                >
                  <Button
                    size="small"
                    icon={<CheckCircleOutlined />}
                    loading={closingLotNo === record.lotNo}
                    style={{ color: '#d97706', borderColor: '#f59e0b' }}
                  >
                    Close Lot
                  </Button>
                </Popconfirm>
              </Popover>
            )}

            {isFlexible && !hasStock && (
              <Tag color="default">Closed</Tag>
            )}

            <Popover content="Return Stock to Wholesale">
              <Button
                type="link"
                size="small"
                icon={<RetweetOutlined />}
                disabled={!hasStock}
                onClick={() => {
                  setSelectedLot(record);
                  setReturnModalOpen(true);
                }}
              >
                Return
              </Button>
            </Popover>
            {/* <Popover content="Mark Retail Spoilage/Waste">
              <Button
                type="link"
                size="small"
                danger
                icon={<WarningOutlined />}
                disabled={!hasStock}
                onClick={() => {
                  setSelectedLot(record);
                  setSpoilageModalOpen(true);
                }}
              >
                Spoilage
              </Button>
            </Popover> */}
          </Space>
        );
      },
    },
  ];

  return (
    <div>
      <Spin spinning={summaryLoading}>
        <AppContainer title="Retail Account & Current Stock">
          <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
            <Space>
              <Input.Search
                placeholder="Search by Lot No, Vegetable..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                allowClear
                style={{ width: 280 }}
              />
            </Space>
          </div>

          <Table
            rowKey="key"
            columns={columns}
            dataSource={filteredData}
            loading={summaryLoading}
            scroll={{ x: 'max-content' }}
            pagination={{ pageSize: 15 }}
          />
        </AppContainer>

        <AddRetailSpoilageModal
          open={spoilageModalOpen}
          selectedLot={selectedLot}
          onCancel={() => {
            setSpoilageModalOpen(false);
            setSelectedLot(null);
          }}
          onSuccess={() => {
            setSpoilageModalOpen(false);
            setSelectedLot(null);
            fetchSummary();
          }}
        />

        <AddRetailReturnModal
          open={returnModalOpen}
          selectedLot={selectedLot}
          onCancel={() => {
            setReturnModalOpen(false);
            setSelectedLot(null);
          }}
          onSuccess={() => {
            setReturnModalOpen(false);
            setSelectedLot(null);
            fetchSummary();
          }}
        />
      </Spin>
    </div>
  );
};

export default RetailStock;