import React, { useEffect, useState, useCallback } from 'react';
import {
  DatePicker,
  Button,
  Card,
  Spin,
  message,
  Tag,
  Typography,
  Tooltip,
} from 'antd';
import {
  FilePdfOutlined,
  RedoOutlined,
  LeftOutlined,
  RightOutlined,
  CalendarOutlined,
  DollarCircleOutlined,
} 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 { Title, Text } = Typography;

const fmt = (val?: number | null) => {
  const n = Number(val ?? 0);
  return isNaN(n) ? '0.00' : n.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

interface FinancialData {
  date: string;
  opening: {
    outstanding: number;
    supplierOutstanding: number;
    totalOutstanding?: number;
    cashInHand: number;
    cashInBank: number;
    totalCashBank?: number;
    total: number;
  };
  closing: {
    outstanding: number;
    supplierOutstanding: number;
    totalOutstanding?: number;
    cashInHand: number;
    cashInBank: number;
    totalCashBank?: number;
    total: number;
  };
  yesterdayMovements?: {
    expenses: number;
    supplierPayments: number;
    sales: number;
    wholesaleSales?: number;
    retailSales?: number;
    purchases: number;
    customerPayments: number;
    transfers: number;
  };
  movements: {
    expenses: { total: number; cash: number; bank: number };
    supplierPayments: { total: number; cash: number; bank: number };
    customerPayments: { total: number; cash: number; bank: number };
    sales: {
      total: number;
      wholesale?: number;
      retail?: number;
      cash: number;
      bank: number;
      customerPayable: number;
    };
    purchases: { total: number; paid: number; supplierPayable: number };
    customerPayable: number;
    transfers: { cashToBank: number; bankToCash: number };
    saleReturns: number;
    purchaseReturns: number;
  };
  details?: {
    sales?: Array<{
      id: string;
      invoiceNo: string;
      type: "wholesale" | "retail";
      customerName: string;
      grandTotal: number;
      receivedAmount: number;
      cashAmount: number;
      upiAmount: number;
      bankAmount: number;
      balanceAmount: number;
    }>;
  };
}

export const FinancialSummary: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<Dayjs>(dayjs());
  const [openingDateDayjs, setOpeningDateDayjs] = useState<Dayjs | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [pdfLoading, setPdfLoading] = useState<boolean>(false);
  const [reportData, setReportData] = useState<FinancialData | null>(null);

  const fetchOpeningDate = useCallback(async () => {
    try {
      const res = await jwtAxios.get(ENDPOINTS.CASH_BANK_BALANCE);
      if (res.data?.success && res.data.data?.openingDate) {
        setOpeningDateDayjs(dayjs(res.data.data.openingDate));
      }
    } catch (err) {
      console.error('Failed to load opening date:', err);
    }
  }, []);

  const fetchSummary = useCallback(async (dateObj: Dayjs = selectedDate) => {
    setLoading(true);
    try {
      const dateStr = dateObj.format('YYYY-MM-DD');
      const res = await jwtAxios.get(`${ENDPOINTS.FINANCIAL_SUMMARY}?date=${dateStr}`);
      setReportData(res.data?.data || null);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch financial summary');
      setReportData(null);
    } finally {
      setLoading(false);
    }
  }, [selectedDate]);

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

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

  const isTodayOrFuture = selectedDate.isSame(dayjs(), 'day') || selectedDate.isAfter(dayjs(), 'day');
  const isAtOpeningDate = openingDateDayjs
    ? selectedDate.isSame(openingDateDayjs, 'day') || selectedDate.isBefore(openingDateDayjs, 'day')
    : false;

  const handlePrevDay = () => {
    if (isAtOpeningDate) {
      message.warning(`Cannot navigate behind Opening Date (${openingDateDayjs?.format('DD-MM-YYYY')}).`);
      return;
    }
    setSelectedDate((prev) => prev.subtract(1, 'day'));
  };

  const handleNextDay = () => {
    if (isTodayOrFuture) return;
    setSelectedDate((prev) => prev.add(1, 'day'));
  };

  const handleToday = () => {
    setSelectedDate(dayjs());
  };

  const handleExportPdf = async () => {
    setPdfLoading(true);
    try {
      const dateStr = selectedDate.format('YYYY-MM-DD');
      const response = await jwtAxios.get(`${ENDPOINTS.FINANCIAL_SUMMARY_PDF}?date=${dateStr}`, {
        responseType: 'blob',
      });

      const blob = new Blob([response.data], { type: 'application/pdf' });
      const objectUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = objectUrl;
      link.download = `financial-summary-${dateStr}.pdf`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(objectUrl);

      message.success('Financial Summary PDF downloaded successfully');
    } catch (err: any) {
      message.error('Failed to export PDF');
    } finally {
      setPdfLoading(false);
    }
  };

  const opening = reportData?.opening || {
    outstanding: 0,
    supplierOutstanding: 0,
    totalOutstanding: 0,
    cashInHand: 0,
    cashInBank: 0,
    totalCashBank: 0,
    total: 0,
  };
  const closing = reportData?.closing || {
    outstanding: 0,
    supplierOutstanding: 0,
    totalOutstanding: 0,
    cashInHand: 0,
    cashInBank: 0,
    totalCashBank: 0,
    total: 0,
  };
  const yesterdayMovements = reportData?.yesterdayMovements || {
    expenses: 0,
    supplierPayments: 0,
    sales: 0,
    wholesaleSales: 0,
    retailSales: 0,
    purchases: 0,
    customerPayments: 0,
    transfers: 0,
  };
  const movements = reportData?.movements || {
    expenses: { total: 0, cash: 0, bank: 0 },
    supplierPayments: { total: 0, cash: 0, bank: 0 },
    customerPayments: { total: 0, cash: 0, bank: 0 },
    sales: { total: 0, wholesale: 0, retail: 0, cash: 0, bank: 0, customerPayable: 0 },
    purchases: { total: 0, paid: 0, supplierPayable: 0 },
    customerPayable: 0,
    transfers: { cashToBank: 0, bankToCash: 0 },
    saleReturns: 0,
    purchaseReturns: 0,
  };

  return (
    <AppContainer>
      <Spin spinning={loading}>
        <div className="max-w-5xl mx-auto space-y-6">
          {/* Header Bar */}
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
            <div>
              <Title level={4} className="!mb-0 text-slate-800 flex items-center gap-2">
                <DollarCircleOutlined className="text-emerald-600" />
                Financial Summary
              </Title>
              <Text type="secondary" className="text-xs">
                Date-wise Opening & Closing Balance with Financial Movements
              </Text>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <span className="text-sm font-semibold text-slate-700 mr-1">Date :</span>
              <Tooltip
                title={
                  isAtOpeningDate
                    ? `Cannot navigate behind Opening Date (${openingDateDayjs?.format('DD-MM-YYYY')})`
                    : 'Previous Day'
                }
              >
                <Button
                  icon={<LeftOutlined />}
                  onClick={handlePrevDay}
                  disabled={isAtOpeningDate}
                />
              </Tooltip>
              <DatePicker
                value={selectedDate}
                onChange={(d) => {
                  if (d) {
                    if (d.isAfter(dayjs(), 'day')) {
                      message.warning('Future dates are not allowed');
                      setSelectedDate(dayjs());
                    } else {
                      setSelectedDate(d);
                    }
                  }
                }}
                disabledDate={(current) =>
                  Boolean(
                    (openingDateDayjs && current.isBefore(openingDateDayjs, 'day')) ||
                      (current && current.isAfter(dayjs(), 'day'))
                  )
                }
                format="DD-MM-YYYY"
                allowClear={false}
                className="w-36 font-semibold"
              />
              <Tooltip title={isTodayOrFuture ? 'Cannot navigate to future dates' : 'Next Day'}>
                <Button
                  icon={<RightOutlined />}
                  onClick={handleNextDay}
                  disabled={isTodayOrFuture}
                />
              </Tooltip>
              <Button
                onClick={handleToday}
                icon={<CalendarOutlined />}
                disabled={selectedDate.isSame(dayjs(), 'day')}
              >
                Today
              </Button>
              <Button icon={<RedoOutlined />} onClick={() => fetchSummary(selectedDate)} title="Refresh" />
              <Button
                type="primary"
                danger
                icon={<FilePdfOutlined />}
                loading={pdfLoading}
                onClick={handleExportPdf}
                className="bg-red-600 hover:bg-red-700"
              >
                Export PDF
              </Button>
            </div>
          </div>

          {/* Main Financial Summary Box */}
          <Card className="shadow-sm border-slate-200 rounded-xl overflow-hidden" styles={{ body: { padding: '24px' } }}>
            <div className="mb-4 flex items-center justify-between border-b pb-3">
              <div className="flex items-center gap-2">
                <span className="font-bold text-slate-700 text-sm">DATE :</span>
                <Tag color="blue" className="text-sm font-bold px-2 py-0.5 m-0">
                  {selectedDate.format('DD-MM-YYYY')}
                </Tag>
              </div>
              <span className="font-bold text-slate-700 uppercase tracking-wide text-sm">Financial Summary</span>
            </div>

            {/* Opening vs Closing Table */}
            <div className="overflow-x-auto">
              <table className="w-full border-collapse">
                <thead>
                  <tr className="border-b-2 border-slate-300">
                    <th className="py-2.5 px-3 text-left font-bold text-slate-800 text-base uppercase w-1/4">
                      Opening
                    </th>
                    <th className="py-2.5 px-3 text-right font-bold text-slate-800 text-base w-1/4 border-r-2 border-slate-300">
                      Amount
                    </th>
                    <th className="py-2.5 px-3 text-left font-bold text-slate-800 text-base uppercase w-1/4 pl-6">
                      Closing:
                    </th>
                    <th className="py-2.5 px-3 text-right font-bold text-slate-800 text-base w-1/4">
                      Amount
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-200 text-sm">
                  {/* Category Header: OUTSTANDINGS */}
                  <tr className="bg-slate-100/80 font-bold text-xs uppercase tracking-wider text-slate-600">
                    <td colSpan={2} className="py-2 px-3 border-r-2 border-slate-300">
                      Outstandings
                    </td>
                    <td colSpan={2} className="py-2 px-3 pl-6">
                      Outstandings
                    </td>
                  </tr>

                  {/* Customer Outstanding */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Customer Outstanding</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900 border-r-2 border-slate-300">
                      ₹{fmt(opening.outstanding)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Customer Outstanding</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900">
                      ₹{fmt(closing.outstanding)}
                    </td>
                  </tr>

                  {/* Supplier Outstanding */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-purple-800 font-medium pl-6">Supplier Outstanding</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-purple-900 border-r-2 border-slate-300">
                      ₹{fmt(opening.supplierOutstanding)}
                    </td>
                    <td className="py-2.5 px-3 text-purple-800 font-medium pl-6">Supplier Outstanding</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-purple-900">
                      ₹{fmt(closing.supplierOutstanding)}
                    </td>
                  </tr>

                  {/* Category Header: CASH & BANK */}
                  <tr className="bg-slate-100/80 font-bold text-xs uppercase tracking-wider text-slate-600">
                    <td colSpan={2} className="py-2 px-3 border-r-2 border-slate-300">
                      Cash & Bank
                    </td>
                    <td colSpan={2} className="py-2 px-3 pl-6">
                      Cash & Bank
                    </td>
                  </tr>

                  {/* Cash in Hand */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash in Hand</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900 border-r-2 border-slate-300">
                      ₹{fmt(opening.cashInHand)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash in Hand</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900">
                      ₹{fmt(closing.cashInHand)}
                    </td>
                  </tr>

                  {/* Cash in Bank */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash in Bank</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900 border-r-2 border-slate-300">
                      ₹{fmt(opening.cashInBank)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash in Bank</td>
                    <td className="py-2.5 px-3 text-right font-semibold text-slate-900">
                      ₹{fmt(closing.cashInBank)}
                    </td>
                  </tr>

                  {/* SEPARATE TOTAL: CASH & BANK */}
                  <tr className="bg-blue-50/80 font-bold border-t border-b border-blue-200">
                    <td className="py-2.5 px-3 text-blue-950 uppercase tracking-wider pl-6">
                      Total Cash & Bank
                    </td>
                    <td className="py-2.5 px-3 text-right text-blue-950 font-bold text-base border-r-2 border-slate-300">
                      ₹{fmt(opening.totalCashBank ?? (opening.cashInHand + opening.cashInBank))}
                    </td>
                    <td className="py-2.5 px-3 text-blue-950 uppercase tracking-wider pl-6">
                      Total Cash & Bank
                    </td>
                    <td className="py-2.5 px-3 text-right text-blue-950 font-bold text-base">
                      ₹{fmt(closing.totalCashBank ?? (closing.cashInHand + closing.cashInBank))}
                    </td>
                  </tr>

                  {/* Category Header: DAILY MOVEMENTS (YESTERDAY VS TODAY) */}
                  <tr className="bg-slate-100/90 font-bold text-xs uppercase tracking-wider text-slate-700">
                    <td colSpan={2} className="py-2.5 px-3 border-r-2 border-slate-300">
                      Daily Movements (Yesterday)
                    </td>
                    <td colSpan={2} className="py-2.5 px-3 pl-6">
                      Daily Movements (Today)
                    </td>
                  </tr>

                  {/* Row 1: Expenses */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Expenses</td>
                    <td className="py-2.5 px-3 text-right font-bold text-red-600 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.expenses)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Expenses</td>
                    <td className="py-2.5 px-3 text-right font-bold text-red-600">
                      ₹{fmt(movements.expenses.total)}
                    </td>
                  </tr>

                  {/* Row 2: Supplier Payments */}
                  <tr className="bg-slate-50/40 hover:bg-slate-100/50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Supplier Payments</td>
                    <td className="py-2.5 px-3 text-right font-bold text-purple-700 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.supplierPayments)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Supplier Payments</td>
                    <td className="py-2.5 px-3 text-right font-bold text-purple-700">
                      ₹{fmt(movements.supplierPayments.total)}
                    </td>
                  </tr>

                  {/* Row: Wholesale Sales */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Wholesale Sales</td>
                    <td className="py-2.5 px-3 text-right font-bold text-emerald-700 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.wholesaleSales ?? yesterdayMovements.sales)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Wholesale Sales</td>
                    <td className="py-2.5 px-3 text-right font-bold text-emerald-700">
                      ₹{fmt(movements.sales.wholesale ?? movements.sales.total)}
                    </td>
                  </tr>

                  {/* Row: Retail Sales (Moved) */}
                  <tr className="bg-slate-50/40 hover:bg-slate-100/50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Retail Sales (Moved)</td>
                    <td className="py-2.5 px-3 text-right font-bold text-emerald-800 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.retailSales ?? 0)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Retail Sales (Moved)</td>
                    <td className="py-2.5 px-3 text-right font-bold text-emerald-800">
                      ₹{fmt(movements.sales.retail ?? 0)}
                    </td>
                  </tr>

                  {/* Row: Total Sales Amount */}
                  <tr className="hover:bg-slate-50 bg-emerald-50/30">
                    <td className="py-2.5 px-3 text-emerald-950 font-bold pl-6">Total Sales Amount</td>
                    <td className="py-2.5 px-3 text-right font-black text-emerald-900 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.sales)}
                    </td>
                    <td className="py-2.5 px-3 text-emerald-950 font-bold pl-6">Total Sales Amount</td>
                    <td className="py-2.5 px-3 text-right font-black text-emerald-900">
                      ₹{fmt(movements.sales.total)}
                    </td>
                  </tr>

                  {/* Row 4: Purchase Amount */}
                  <tr className="bg-slate-50/40 hover:bg-slate-100/50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Purchase Amount</td>
                    <td className="py-2.5 px-3 text-right font-bold text-indigo-700 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.purchases)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Purchase Amount</td>
                    <td className="py-2.5 px-3 text-right font-bold text-indigo-700">
                      ₹{fmt(movements.purchases.total)}
                    </td>
                  </tr>

                  {/* Row 5: Customer Payments */}
                  <tr className="hover:bg-slate-50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Customer Payments</td>
                    <td className="py-2.5 px-3 text-right font-bold text-blue-700 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.customerPayments)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Customer Payments</td>
                    <td className="py-2.5 px-3 text-right font-bold text-blue-700">
                      ₹{fmt(movements.customerPayments.total)}
                    </td>
                  </tr>

                  {/* Row 6: Cash to Bank Transfer */}
                  <tr className="bg-slate-50/40 hover:bg-slate-100/50">
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash to Bank Transfer (Contra)</td>
                    <td className="py-2.5 px-3 text-right font-bold text-teal-700 border-r-2 border-slate-300">
                      ₹{fmt(yesterdayMovements.transfers)}
                    </td>
                    <td className="py-2.5 px-3 text-slate-700 font-medium pl-6">Cash to Bank Transfer (Contra)</td>
                    <td className="py-2.5 px-3 text-right font-bold text-teal-700">
                      ₹{fmt(movements.transfers.cashToBank)}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            {/* Sales Breakdown by Invoices */}
            {/* {reportData?.details?.sales && reportData.details.sales.length > 0 && (
              <div className="mt-8 border-t border-slate-200 pt-5">
                <div className="flex items-center justify-between mb-3">
                  <span className="font-bold text-slate-800 text-sm uppercase tracking-wide">
                    Today's Sales Breakdown ({selectedDate.format('DD-MM-YYYY')})
                  </span>
                  <Tag color="cyan">{reportData.details.sales.length} Invoice(s)</Tag>
                </div>
                <Table
                  dataSource={reportData.details.sales}
                  rowKey="id"
                  pagination={false}
                  size="small"
                  columns={[
                    {
                      title: 'Invoice No',
                      dataIndex: 'invoiceNo',
                      render: (val: string, r: any) => (
                        <div className="flex items-center gap-2">
                          <span className="font-semibold text-blue-700">{val}</span>
                          {r.type === 'retail' ? (
                            <Tag color="green">Retail (Moved)</Tag>
                          ) : (
                            <Tag color="blue">Wholesale</Tag>
                          )}
                        </div>
                      ),
                    },
                    { title: 'Customer', dataIndex: 'customerName' },
                    {
                      title: 'Grand Total',
                      dataIndex: 'grandTotal',
                      align: 'right',
                      render: (val: number) => <span className="font-bold text-slate-800">₹{fmt(val)}</span>,
                    },
                    {
                      title: 'Received',
                      dataIndex: 'receivedAmount',
                      align: 'right',
                      render: (val: number) => `₹${fmt(val)}`,
                    },
                    {
                      title: 'Balance',
                      dataIndex: 'balanceAmount',
                      align: 'right',
                      render: (val: number) => (
                        <span className={val > 0 ? 'text-red-600 font-bold' : 'text-slate-500'}>
                          ₹{fmt(val)}
                        </span>
                      ),
                    },
                  ]}
                />
              </div>
            )} */}
          </Card>
        </div>
      </Spin>
    </AppContainer>
  );
};

export default FinancialSummary;