import React, { useCallback, useEffect, useState } from 'react';
import {
  Button,
  Form,
  Input,
  InputNumber,
  DatePicker,
  Modal,
  Popconfirm,
  Space,
  Spin,
  Table,
  Tag,
  Typography,
  message,
  Row,
  Col,
  Alert,
} from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  ReloadOutlined,
  BookOutlined,
  SwapOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom';
import { AppContainer } from '../../components/AppContainer';
import SummaryCard from '../../components/SummaryCard';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

const { Text } = Typography;

const ENTITY_LABEL = 'Cash to Bank Transfer';

interface BalancesData {
  openingDate: string;
  openingCashInHand: number;
  openingCashInBank: number;
  currentCashInHand: number;
  currentCashInBank: number;
  totalTransfers: number;
  totalCombinedBalance: number;
}

interface TransferRecord {
  id: string;
  transferDate: string;
  amount: number;
  referenceNo?: string;
  remarks?: string;
  createdByName: string;
  createdAt: string;
}

export const MoveCashToBank: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();

  // State
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [searchText, setSearchText] = useState('');
  const [balances, setBalances] = useState<BalancesData | null>(null);
  const [transfers, setTransfers] = useState<TransferRecord[]>([]);

  // Format currency in Indian format
  const fmt = (val?: number | null) =>
    Number(val || 0).toLocaleString('en-IN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });

  // Fetch balances
  const fetchBalances = useCallback(async () => {
    try {
      const res = await jwtAxios.get(ENDPOINTS.CASH_BANK_BALANCE);
      if (res.data?.success) {
        setBalances(res.data.data);
      }
    } catch (err: any) {
      console.error('Failed to fetch balances:', err);
    }
  }, []);

  // Fetch transfers
  const fetchTransfers = useCallback(async () => {
    setLoading(true);
    try {
      const res = await jwtAxios.get(ENDPOINTS.CASH_BANK_TRANSFERS);
      if (res.data?.success) {
        setTransfers(res.data.data || []);
      }
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch transfers');
    } finally {
      setLoading(false);
    }
  }, []);

  // Initial load
  useEffect(() => {
    fetchBalances();
    fetchTransfers();
  }, [fetchBalances, fetchTransfers]);

  // Refresh
  const handleRefresh = () => {
    fetchBalances();
    fetchTransfers();
    message.success('Refreshed');
  };

  // Open Add Modal
  const handleOpenAdd = () => {
    form.resetFields();
    form.setFieldsValue({
      transferDate: dayjs(),
    });
    setOpen(true);
  };

  // Submit transfer modal
  const handleSubmit = async (values: any) => {
    const cashAvailable = balances?.currentCashInHand || 0;
    if (values.amount > cashAvailable) {
      message.error(
        `Insufficient Cash in Hand! Available: ₹${fmt(cashAvailable)}, Entered: ₹${fmt(
          values.amount
        )}`
      );
      return;
    }

    setSubmitting(true);
    try {
      const payload = {
        transferDate: values.transferDate.format('YYYY-MM-DD'),
        amount: values.amount,
        referenceNo: values.referenceNo?.trim() || undefined,
        remarks: values.remarks?.trim() || undefined,
      };

      const res = await jwtAxios.post(ENDPOINTS.CASH_BANK_TRANSFERS, payload);
      if (res.data?.success) {
        message.success('Cash moved to Bank successfully!');
        setOpen(false);
        form.resetFields();
        fetchBalances();
        fetchTransfers();
      }
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to move cash to bank');
    } finally {
      setSubmitting(false);
    }
  };

  // Delete transfer
  const handleDelete = async (id: string) => {
    try {
      setLoading(true);
      const res = await jwtAxios.delete(`${ENDPOINTS.CASH_BANK_TRANSFERS}/${id}`);
      if (res.data?.success) {
        message.success('Transfer deleted! Amount restored to Cash in Hand.');
        fetchBalances();
        fetchTransfers();
      }
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to delete transfer');
    } finally {
      setLoading(false);
    }
  };

  // Filtered transfers by search
  const filteredTransfers = transfers.filter((t) => {
    if (!searchText.trim()) return true;
    const q = searchText.toLowerCase();
    return (
      t.referenceNo?.toLowerCase().includes(q) ||
      t.remarks?.toLowerCase().includes(q) ||
      t.createdByName?.toLowerCase().includes(q) ||
      t.amount.toString().includes(q) ||
      t.transferDate.includes(q)
    );
  });

  // Columns for Table List
  const columns = [
    {
      title: '#',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      align: 'center' as const,
      render: (_: any, __: any, index: number) => index + 1,
    },
    {
      title: 'Transfer Date',
      dataIndex: 'transferDate',
      key: 'transferDate',
      width: 130,
      render: (d: string) => (
        <span className="font-semibold text-gray-700">
          {dayjs(d).format('DD-MM-YYYY')}
        </span>
      ),
    },
    {
      title: 'Amount (₹)',
      dataIndex: 'amount',
      key: 'amount',
      align: 'right' as const,
      width: 150,
      render: (a: number) => (
        <Text strong className="text-base text-blue-700">
          ₹{fmt(a)}
        </Text>
      ),
    },
    {
      title: 'Reference / Slip No',
      dataIndex: 'referenceNo',
      key: 'referenceNo',
      width: 170,
      render: (ref?: string) => ref || <Text type="secondary">—</Text>,
    },
    {
      title: 'Remarks',
      dataIndex: 'remarks',
      key: 'remarks',
      render: (r?: string) => r || <Text type="secondary">—</Text>,
    },
    {
      title: 'Recorded By',
      dataIndex: 'createdByName',
      key: 'createdByName',
      width: 140,
      render: (name: string) => <span className="text-gray-600 text-xs">{name}</span>,
    },
    {
      title: 'Action',
      key: 'action',
      align: 'center' as const,
      width: 90,
      render: (_: any, record: TransferRecord) => (
        <Popconfirm
          title="Delete Transfer"
          description="Are you sure you want to delete this transfer? Cash will return to Cash in Hand."
          okText="Delete"
          cancelText="Cancel"
          okButtonProps={{ danger: true }}
          onConfirm={() => handleDelete(record.id)}
        >
          <Button danger type="link" icon={<DeleteOutlined />} />
        </Popconfirm>
      ),
    },
  ];

  return (
    <AppContainer
      title="Move Cash to Bank"
      headerAction={
        <Space>
          <Button
            icon={<BookOutlined />}
            onClick={() => navigate('/cash-bank')}
          >
            Cash & Bank Book
          </Button>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={handleOpenAdd}
            className="bg-green-600 hover:bg-green-700 font-medium"
          >
            Move Cash to Bank
          </Button>
          <Button icon={<ReloadOutlined />} onClick={handleRefresh} />
        </Space>
      }
    >
      <Spin spinning={loading}>
        {/* 1. Summary Cards (Clean like Expense module) */}
        <Row gutter={[16, 16]} style={{ marginBottom: 20 }}>
          <Col xs={24} md={8}>
            <SummaryCard
              label="Source: Cash in Hand"
              value={balances?.currentCashInHand ?? 0}
              color="#52c41a"
              icon={<span style={{ fontSize: 20 }}>💵</span>}
            />
          </Col>
          <Col xs={24} md={8}>
            <SummaryCard
              label="Destination: Cash in Bank"
              value={balances?.currentCashInBank ?? 0}
              color="#1677ff"
              icon={<span style={{ fontSize: 20 }}>🏦</span>}
            />
          </Col>
          <Col xs={24} md={8}>
            <SummaryCard
              label="Total Combined Balance"
              value={balances?.totalCombinedBalance ?? 0}
              color="#722ed1"
              icon={<span style={{ fontSize: 20 }}>💰</span>}
            />
          </Col>
        </Row>

        {/* Toolbar Section (like Vegetable & Masters modules) */}
        <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
          <Input.Search
            placeholder="Search reference, remarks..."
            value={searchText}
            onChange={(e) => setSearchText(e.target.value)}
            allowClear
            style={{ width: 280 }}
          />
          <span className="text-xs text-gray-500">
            Total {filteredTransfers.length} transfers
          </span>
        </div>

        {/* Table List */}
        <Table
          rowKey="id"
          columns={columns}
          dataSource={filteredTransfers}
          loading={loading}
          scroll={{ x: 'max-content' }}
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
          }}
          locale={{ emptyText: 'No Cash to Bank transfers recorded yet' }}
        />
        <div className="text-center mt-2">
          <Tag color="cyan">
            {filteredTransfers.length} {filteredTransfers.length === 1 ? 'Record' : 'Records'}
          </Tag>
        </div>
      </Spin>

      {/* Add Transfer Modal (Matching Vegetable / Masters Add Modal) */}
      <Modal
        title={
          <div className="flex items-center gap-2">
            <SwapOutlined className="text-blue-600" />
            <span>{ENTITY_LABEL}</span>
          </div>
        }
        open={open}
        onCancel={() => setOpen(false)}
        onOk={() => form.submit()}
        confirmLoading={submitting}
        okText="Submit"
        destroyOnHidden
      >
        <Alert
          type="info"
          showIcon
          className="mb-4"
          message={
            <div className="text-xs">
              <span>Available Cash in Hand: </span>
              <b className="text-emerald-700 text-sm">₹{fmt(balances?.currentCashInHand)}</b>
            </div>
          }
          description="Moving cash will decrease Cash in Hand and increase Cash in Bank by the same amount."
        />

        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{
            transferDate: dayjs(),
          }}
        >
          <Form.Item
            label="Transfer Date"
            name="transferDate"
            rules={[{ required: true, message: 'Transfer date is required' }]}
          >
            <DatePicker
              className="w-full"
              format="DD-MM-YYYY"
              allowClear={false}
              disabledDate={(current) =>
                Boolean(
                  (balances?.openingDate && current.isBefore(dayjs(balances.openingDate), 'day')) ||
                  current.isAfter(dayjs(), 'day')
                )
              }
            />
          </Form.Item>

          <Form.Item
            label="Amount (₹)"
            name="amount"
            rules={[
              { required: true, message: 'Amount is required' },
              {
                type: 'number',
                min: 1,
                message: 'Amount must be greater than ₹0',
              },
            ]}
          >
            <InputNumber
              className="w-full"
              placeholder="Enter transfer amount"
              formatter={(val) =>
                `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
              }
              parser={(val: any) =>
                val ? val.replace(/\$\s?|(,*)/g, '') : ''
              }
              min={1}
              precision={2}
              size="large"
            />
          </Form.Item>

          <Form.Item label="Reference / Slip No" name="referenceNo">
            <Input placeholder="Bank counter slip / ref no (optional)" />
          </Form.Item>

          <Form.Item label="Remarks" name="remarks">
            <Input.TextArea
              placeholder="E.g., SBI deposit, Indian bank counter (optional)"
              rows={2}
            />
          </Form.Item>
        </Form>
      </Modal>
    </AppContainer>
  );
};

export default MoveCashToBank;