import React, { useState, useEffect, useMemo } from 'react';
import { Card, Typography, Table, Statistic, Row, Col, Tag, Select, DatePicker, Space, Spin, Button, Modal, Form, Input, InputNumber, message, Divider, Tabs, Popconfirm, Upload } from 'antd';
import { DollarOutlined, RiseOutlined, FallOutlined, PlusOutlined, DownloadOutlined, DeleteOutlined, UploadOutlined, FundOutlined } from '@ant-design/icons';
import apiClient from '../../utils/request';
import dayjs from 'dayjs';
import * as XLSX from 'xlsx';
import { useLanguageStore } from '../../store/languageStore';

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

const FinancePage: React.FC = () => {
  const { t, currentLanguage } = useLanguageStore();

  const LEVEL1_LABELS = useMemo<Record<string, string>>(() => ({
    income: t('finance.incomeCategory'),
    project: t('finance.projectExpense'),
    company: t('finance.companyExpense'),
    finance: t('cash.financeExpense'),
  }), [t]);

  const LEVEL2_LABELS = useMemo<Record<string, string>>(() => ({
    contract_payment: t('finance.projectRevenue'),
    deposit_refund: t('finance.warrantyReturn'),
    shareholder_investment: t('finance.shareholderInvestment'),
    other_income: t('finance.otherIncome'),
    customer_advance: t('cash.customerAdvance'),
    bank_loan: t('cash.bankLoan'),
    other_loan: t('cash.otherLoan'),
    dividend_income: t('cash.dividendIncome'),
    interest_income: t('cash.interestIncome'),
    asset_disposal: t('cash.assetDisposal'),
    tax_refund: t('cash.taxRefund'),
    government_subsidy: t('cash.governmentSubsidy'),
    material: t('finance.materialPurchase'),
    equipment: t('finance.equipmentPurchase'),
    subcontract: t('finance.constructionSubcontract'),
    construction_subcontract: t('finance.constructionSubcontract'),
    labor: t('finance.laborWage'),
    travel: t('finance.travelTransport'),
    accommodation: t('finance.accommodationFood'),
    freight: t('finance.transportLogistics'),
    transport_logistics: t('finance.transportLogistics'),
    design: t('finance.surveyDesign'),
    survey_design: t('finance.surveyDesign'),
    tools: t('finance.smallTools'),
    client_relations: t('finance.customerEDLRelation'),
    customer_edl: t('finance.customerEDLRelation'),
    other_project: t('finance.otherProjectExpense'),
    salary: t('finance.salaryWelfare'),
    rent: t('finance.rentProperty'),
    office: t('finance.officeExpense'),
    commute: t('finance.commute'),
    vehicle_maintenance: t('finance.vehicleMaintenance'),
    assets: t('finance.fixedAsset'),
    marketing: t('finance.marketing'),
    entertainment: t('finance.entertainment'),
    welfare: t('finance.employeeBenefit'),
    logistics: t('finance.expressLogistics'),
    other_company: t('finance.otherCompanyExpense'),
    loan_repayment: t('cash.loanRepayment'),
    interest_expense: t('cash.interestExpense'),
    dividend_payment: t('cash.dividendPayment'),
    tax_payment: t('cash.taxPayment'),
    deposit_payment: t('cash.depositPayment'),
    owner_expense: t('cash.ownerExpense'),
    other_finance: t('cash.otherFinance'),
  }), [t]);

  const COUNTERPARTY_TYPES = useMemo(() => [
    { value: 'supplier', label: t('finance.counterpartySupplier') },
    { value: 'subcontractor', label: t('finance.counterpartySubcontractor') },
    { value: 'customer', label: t('finance.counterpartyCustomer') },
    { value: 'employee', label: t('finance.counterpartyEmployee') },
    { value: 'logistics', label: t('finance.counterpartyLogistics') },
    { value: 'shareholder', label: t('finance.counterpartyShareholder') },
    { value: 'bank', label: t('cash.counterpartyBank') },
    { value: 'other', label: t('finance.counterpartyOther') },
  ], [t, currentLanguage]);

  const CURRENCIES = useMemo(() => [
    { value: 'CNY', label: t('finance.currencyCNY') },
    { value: 'LAK', label: t('finance.currencyLAK') },
    { value: 'USD', label: t('finance.currencyUSD') },
    { value: 'THB', label: t('finance.currencyTHB') },
  ], [t, currentLanguage]);

  const SOURCE_MAP = useMemo<Record<string, string>>(() => ({
    manual: t('finance.manual'),
    cash_management: t('cash.sourceLabel'),
    receipt: t('cash.receiptSource'),
    advance: t('finance.advance'),
    reimbursement: t('finance.reimbursement'),
    payment_request: t('finance.payment'),
    material: t('finance.material'),
    primary_freight: t('finance.freight'),
    secondary_freight: t('finance.freight'),
  }), [t]);

  const [activeTab, setActiveTab] = useState('overview');
  const [loading, setLoading] = useState(false);
  const [summary, setSummary] = useState<any>({ total_income: 0, total_expense: 0, net_profit: 0 });
  const [byCategory, setByCategory] = useState<any[]>([]);
  const [records, setRecords] = useState<any[]>([]);
  const [pagination, setPagination] = useState({ page: 1, pageSize: 20, total: 0 });
  const [dateRange, setDateRange] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null] | null>(null);
  const [filterType, setFilterType] = useState<string | undefined>(undefined);
  const [isMobile, setIsMobile] = useState(false);

  const [addModalVisible, setAddModalVisible] = useState(false);
  const [addLoading, setAddLoading] = useState(false);
  const [addModalType, setAddModalType] = useState<'income' | 'expense'>('income');
  const [form] = Form.useForm();

  const [categories, setCategories] = useState<any>({ income: [], project: [], company: [], finance: [] });
  const [projects, setProjects] = useState<any[]>([]);
  const [customers, setCustomers] = useState<any[]>([]);
  const [suppliers, setSuppliers] = useState<any[]>([]);
  const [exchangeRates, setExchangeRates] = useState<Record<string, number>>({ CNY: 1, LAK: 0.0003, USD: 7.2, THB: 0.2 });

  const [cashRecords, setCashRecords] = useState<any[]>([]);
  const [cashPagination, setCashPagination] = useState({ page: 1, pageSize: 20, total: 0 });
  const [cashFilterType, setCashFilterType] = useState<string | undefined>(undefined);
  const [cashDateRange, setCashDateRange] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null] | null>(null);
  const [cashLoading, setCashLoading] = useState(false);

  const [amountVal, setAmountVal] = useState<number>(0);
  const [rateVal, setRateVal] = useState<number>(1);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  useEffect(() => {
    apiClient.get('/expense-categories/grouped').then(res => {
      if (res.data.success) setCategories(res.data.data);
    }).catch(() => {});
    apiClient.get('/projects', { params: { pageSize: 200 } }).then(res => {
      if (res.data.success) setProjects(res.data.data || res.data.projects || []);
    }).catch(() => {});
    apiClient.get('/customers', { params: { pageSize: 200 } }).then(res => {
      if (res.data.success) setCustomers(res.data.data || []);
    }).catch(() => {});
    apiClient.get('/suppliers', { params: { pageSize: 200 } }).then(res => {
      if (res.data.success) setSuppliers(res.data.data || []);
    }).catch(() => {});
    apiClient.get('/exchange-rates/latest').then(res => {
      if (res.data.success && res.data.data) {
        const rates: Record<string, number> = { CNY: 1 };
        const data = res.data.data;
        if (data.CNY_LAK) rates.LAK = 1 / parseFloat(data.CNY_LAK);
        if (data.CNY_USD) rates.USD = 1 / parseFloat(data.CNY_USD);
        if (data.CNY_THB) rates.THB = 1 / parseFloat(data.CNY_THB);
        setExchangeRates(rates);
      }
    }).catch(() => {});
  }, []);

  const fetchSummary = async () => {
    try {
      const params: any = {};
      if (dateRange && dateRange[0]) {
        params.date_from = dateRange[0].format('YYYY-MM-DD');
        params.date_to = dateRange[1]?.format('YYYY-MM-DD');
      }
      const res = await apiClient.get('/financial-records/summary', { params });
      if (res.data.success) {
        setSummary(res.data.data.totals);
        setByCategory(res.data.data.byCategory);
      }
    } catch (e) { console.error(e); }
  };

  const fetchRecords = async (page = 1) => {
    setLoading(true);
    try {
      const params: any = { page, pageSize: pagination.pageSize };
      if (dateRange && dateRange[0]) {
        params.date_from = dateRange[0].format('YYYY-MM-DD');
        params.date_to = dateRange[1]?.format('YYYY-MM-DD');
      }
      if (filterType) params.txn_type = filterType;
      const res = await apiClient.get('/financial-records', { params });
      if (res.data.success) {
        setRecords(res.data.data);
        setPagination(res.data.pagination);
      }
    } catch (e) { console.error(e); }
    setLoading(false);
  };

  const fetchCashRecords = async (page = 1) => {
    setCashLoading(true);
    try {
      const params: any = { page, pageSize: cashPagination.pageSize };
      if (cashDateRange && cashDateRange[0]) {
        params.date_from = cashDateRange[0].format('YYYY-MM-DD');
        params.date_to = cashDateRange[1]?.format('YYYY-MM-DD');
      }
      if (cashFilterType) params.txn_type = cashFilterType;
      const res = await apiClient.get('/cash-management/records', { params });
      if (res.data.success) {
        setCashRecords(res.data.data);
        setCashPagination(res.data.pagination);
      }
    } catch (e) { console.error(e); }
    setCashLoading(false);
  };

  useEffect(() => { fetchSummary(); fetchRecords(1); }, [dateRange, filterType]);
  useEffect(() => { if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1); }, [activeTab, cashDateRange, cashFilterType]);

  const handleAddIncome = () => {
    setAddModalType('income');
    form.resetFields();
    setAmountVal(0);
    setRateVal(1);
    form.setFieldsValue({ record_date: dayjs(), currency: 'CNY', exchange_rate: 1, txn_type: 'income', category_level1: 'income' });
    setAddModalVisible(true);
  };

  const handleAddExpense = () => {
    setAddModalType('expense');
    form.resetFields();
    setAmountVal(0);
    setRateVal(1);
    form.setFieldsValue({ record_date: dayjs(), currency: 'CNY', exchange_rate: 1, txn_type: 'expense', category_level1: 'project' });
    setAddModalVisible(true);
  };

  const handleLevel1Change = () => {
    form.setFieldsValue({ category_level2: undefined, project_id: undefined });
  };

  const handleCurrencyChange = (currency: string) => {
    const rate = exchangeRates[currency] || 1;
    setRateVal(rate);
    form.setFieldsValue({ exchange_rate: rate });
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setAddLoading(true);
      const payload = {
        txn_type: values.txn_type,
        category_level1: values.category_level1,
        category_level2: values.category_level2,
        project_id: values.project_id || undefined,
        amount: values.amount_original,
        currency: values.currency,
        exchange_rate: values.exchange_rate,
        record_date: values.record_date?.format('YYYY-MM-DD'),
        counterparty_name: values.counterparty_name,
        counterparty_type: values.counterparty_type,
        counterparty_id: values.counterparty_id,
        description: values.description,
        voucher_url: values.voucher_url,
      };
      if (!['project', 'income'].includes(payload.category_level1)) {
        delete payload.project_id;
      }
      await apiClient.post('/cash-management', payload);
      message.success(t('finance.recordSuccess'));
      setAddModalVisible(false);
      fetchSummary();
      fetchRecords(1);
      if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1);
    } catch (e: any) {
      if (e.response?.data?.message) message.error(e.response.data.message);
    }
    setAddLoading(false);
  };

  const handleDelete = async (id: number) => {
    try {
      await apiClient.delete(`/cash-management/${id}`);
      message.success(t('common.deleteSuccess'));
      fetchSummary();
      fetchRecords(1);
      if (activeTab === 'income' || activeTab === 'expense') fetchCashRecords(1);
    } catch (e: any) {
      if (e.response?.data?.message) message.error(e.response.data.message);
    }
  };

  const handleExport = async () => {
    try {
      message.loading({ content: t('finance.exporting'), key: 'export' });
      const res = await apiClient.get('/financial-records', { params: { page: 1, pageSize: 5000 } });
      if (!res.data.success) return;
      const data = res.data.data;
      const wb = XLSX.utils.book_new();
      const headers = [
        t('finance.date'), t('finance.incomeType'), t('finance.level1Category'), t('finance.level2Category'),
        t('finance.projectName'), t('finance.amount'), t('finance.currency'), t('finance.exchangeRate'),
        t('finance.equivalentCNY'), t('finance.counterpartyName'), t('finance.counterpartyType'),
        t('finance.personName'), t('finance.desc'), t('finance.source'),
      ];
      const rows = data.map((r: any) => [
        r.record_date,
        r.txn_type === 'income' ? t('finance.income') : t('finance.expense'),
        LEVEL1_LABELS[r.category_level1] || r.category_level1,
        LEVEL2_LABELS[r.category_level2] || r.category_level2,
        r.project_name || '',
        r.amount_original,
        r.currency,
        r.exchange_rate,
        r.amount_cny,
        r.counterparty_name || '',
        COUNTERPARTY_TYPES.find(c => c.value === r.counterparty_type)?.label || r.counterparty_type || '',
        r.user_name || '',
        r.description || '',
        SOURCE_MAP[r.source] || r.source || '',
      ]);
      const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
      ws['!cols'] = headers.map(() => ({ wch: 14 }));
      XLSX.utils.book_append_sheet(wb, ws, t('finance.sheetName'));
      XLSX.writeFile(wb, `${t('finance.title')}_${dayjs().format('YYYYMMDD')}.xlsx`);
      message.success({ content: t('finance.exportSuccess'), key: 'export' });
    } catch (e) {
      message.error({ content: t('finance.exportFailed'), key: 'export' });
    }
  };

  const getLevel1Options = (txnType: string) => {
    if (txnType === 'income') return [{ value: 'income', label: t('finance.incomeCategory') }];
    return [
      { value: 'project', label: t('finance.projectExpense') },
      { value: 'company', label: t('finance.companyExpense') },
      { value: 'finance', label: t('cash.financeExpense') },
    ];
  };

  const getLevel2Options = () => {
    const level1 = form.getFieldValue('category_level1');
    if (!level1 || !categories[level1]) return [];
    return categories[level1].map((c: any) => ({ value: c.value, label: c.label }));
  };

  const projectOptions = projects.map((p: any) => ({ value: p.id, label: p.name }));

  const getCounterpartyOptions = () => {
    const type = form.getFieldValue('counterparty_type');
    if (type === 'customer') return customers.map((c: any) => ({ value: c.id, label: c.name }));
    if (type === 'supplier') return suppliers.map((s: any) => ({ value: s.id, label: s.name }));
    return [];
  };

  const equivalentCny = amountVal * rateVal;

  const desktopColumns = [
    { title: t('finance.date'), dataIndex: 'record_date', width: 100, sorter: (a: any, b: any) => a.record_date?.localeCompare(b.record_date), render: (v: string) => v?.slice(0, 10) },
    { title: t('finance.incomeType'), dataIndex: 'txn_type', width: 60, render: (v: string) => <Tag color={v === 'income' ? 'green' : 'red'}>{v === 'income' ? t('finance.income') : t('finance.expense')}</Tag> },
    { title: t('finance.level1Category'), dataIndex: 'category_level1', width: 90, render: (v: string) => LEVEL1_LABELS[v] || v },
    { title: t('finance.level2Category'), dataIndex: 'category_level2', width: 100, render: (v: string) => LEVEL2_LABELS[v] || v },
    { title: t('finance.projectName'), dataIndex: 'project_name', width: 140, ellipsis: true },
    { title: t('finance.amount'), dataIndex: 'amount_original', width: 100, render: (v: number) => v?.toLocaleString(), align: 'right' as const },
    { title: t('finance.currency'), dataIndex: 'currency', width: 50 },
    { title: t('finance.equivalentCNY'), dataIndex: 'amount_cny', width: 110, render: (v: number) => `¥${v?.toLocaleString()}`, align: 'right' as const, sorter: (a: any, b: any) => a.amount_cny - b.amount_cny },
    { title: t('finance.personName'), dataIndex: 'user_name', width: 70 },
    { title: t('finance.desc'), dataIndex: 'description', ellipsis: true },
    { title: t('finance.source'), dataIndex: 'source', width: 80, render: (v: string) => <Tag>{SOURCE_MAP[v] || v}</Tag> },
  ];

  const mobileColumns = [
    { title: t('finance.date'), dataIndex: 'record_date', width: 80, render: (v: string) => v?.slice(0, 10) },
    { title: t('finance.incomeType'), dataIndex: 'txn_type', width: 40, render: (v: string) => <span style={{ color: v === 'income' ? 'green' : 'red' }}>{v === 'income' ? '↑' : '↓'}</span> },
    { title: t('finance.level2Category'), dataIndex: 'category_level2', width: 80, render: (v: string) => LEVEL2_LABELS[v] || v },
    { title: t('finance.amount'), dataIndex: 'amount_cny', render: (v: number) => <b>¥{v?.toLocaleString()}</b>, align: 'right' as const },
  ];

  const cashColumns = [
    { title: t('finance.date'), dataIndex: 'record_date', width: 100, render: (v: string) => v?.slice(0, 10) },
    { title: t('finance.level1Category'), dataIndex: 'category_level1', width: 90, render: (v: string) => LEVEL1_LABELS[v] || v },
    { title: t('finance.level2Category'), dataIndex: 'category_level2', width: 110, render: (v: string) => LEVEL2_LABELS[v] || v },
    { title: t('finance.projectName'), dataIndex: 'project_name', width: 140, ellipsis: true },
    { title: t('finance.amount'), dataIndex: 'amount_original', width: 100, render: (v: number) => v?.toLocaleString(), align: 'right' as const },
    { title: t('finance.currency'), dataIndex: 'currency', width: 50 },
    { title: t('finance.equivalentCNY'), dataIndex: 'amount_cny', width: 110, render: (v: number) => `¥${v?.toLocaleString()}`, align: 'right' as const },
    { title: t('finance.counterpartyName'), dataIndex: 'counterparty_name', width: 100, ellipsis: true },
    { title: t('finance.desc'), dataIndex: 'description', ellipsis: true },
    {
      title: '', width: 50, render: (_: any, record: any) => (
        <Popconfirm title={t('common.confirmDelete')} onConfirm={() => handleDelete(record.id)}>
          <Button type="text" danger size="small" icon={<DeleteOutlined />} />
        </Popconfirm>
      )
    },
  ];

  const cashMobileColumns = [
    { title: t('finance.date'), dataIndex: 'record_date', width: 80, render: (v: string) => v?.slice(0, 10) },
    { title: t('finance.level2Category'), dataIndex: 'category_level2', width: 80, render: (v: string) => LEVEL2_LABELS[v] || v },
    { title: t('finance.amount'), dataIndex: 'amount_cny', render: (v: number, r: any) => <span style={{ color: r.txn_type === 'income' ? 'green' : 'red' }}>¥{v?.toLocaleString()}</span>, align: 'right' as const },
    {
      title: '', width: 40, render: (_: any, record: any) => (
        <Popconfirm title={t('common.confirmDelete')} onConfirm={() => handleDelete(record.id)}>
          <Button type="text" danger size="small" icon={<DeleteOutlined />} />
        </Popconfirm>
      )
    },
  ];

  const renderOverview = () => (
    <>
      <Row gutter={[8, 8]} style={{ marginBottom: 16 }}>
        <Col xs={8} sm={8}>
          <Card size="small" style={{ textAlign: 'center' }}>
            <Statistic title={<span style={{ fontSize: 12 }}>{t('finance.totalIncome')}</span>} value={summary.total_income} prefix="¥"
              valueStyle={{ color: '#3f8600', fontSize: isMobile ? 16 : undefined }} />
          </Card>
        </Col>
        <Col xs={8} sm={8}>
          <Card size="small" style={{ textAlign: 'center' }}>
            <Statistic title={<span style={{ fontSize: 12 }}>{t('finance.totalExpense')}</span>} value={summary.total_expense} prefix="¥"
              valueStyle={{ color: '#cf1322', fontSize: isMobile ? 16 : undefined }} />
          </Card>
        </Col>
        <Col xs={8} sm={8}>
          <Card size="small" style={{ textAlign: 'center' }}>
            <Statistic title={<span style={{ fontSize: 12 }}>{t('finance.netProfit')}</span>} value={summary.net_profit} prefix="¥"
              valueStyle={{ color: summary.net_profit >= 0 ? '#3f8600' : '#cf1322', fontSize: isMobile ? 16 : undefined }} />
          </Card>
        </Col>
      </Row>

      {byCategory.length > 0 && (
        <Card title={t('finance.expenseSummary')} size="small" style={{ marginBottom: 16 }}>
          <Row gutter={[8, 8]}>
            {byCategory.filter(c => c.category_level1 !== 'income').map((c, i) => (
              <Col xs={12} sm={8} md={6} key={i}>
                <div style={{ fontSize: 12, color: '#666' }}>{LEVEL2_LABELS[c.category_level2] || c.category_level2}</div>
                <div style={{ fontWeight: 'bold' }}>¥{parseFloat(c.total_amount).toLocaleString()}</div>
              </Col>
            ))}
          </Row>
        </Card>
      )}

      <Card title={t('finance.detail')} size="small" styles={{ body: { padding: isMobile ? 8 : 24 } }}
        extra={
          <Space size="small" wrap>
            <RangePicker size="small" onChange={(dates) => setDateRange(dates as any)} />
            <Select size="small" allowClear placeholder={t('finance.filterType')} style={{ width: 100 }}
              onChange={setFilterType} value={filterType}
              options={[{ value: 'income', label: t('finance.income') }, { value: 'expense', label: t('finance.expense') }]} />
          </Space>
        }
      >
        <Spin spinning={loading}>
          <Table
            dataSource={records}
            columns={isMobile ? mobileColumns : desktopColumns}
            rowKey="id"
            size={isMobile ? 'small' : 'middle'}
            scroll={isMobile ? { x: 400 } : { x: 1100 }}
            pagination={{
              current: pagination.page,
              pageSize: pagination.pageSize,
              total: pagination.total,
              onChange: (page) => fetchRecords(page),
              size: isMobile ? 'small' : 'default',
              showTotal: (total) => t('finance.totalRecords', { total })
            }}
          />
        </Spin>
      </Card>
    </>
  );

  const renderCashTab = (type: 'income' | 'expense') => {
    const isIncome = type === 'income';
    return (
      <>
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
          <Space size="small" wrap>
            <RangePicker size="small" onChange={(dates) => setCashDateRange(dates as any)} />
            <Select size="small" allowClear placeholder={t('finance.level1Category')} style={{ width: 120 }}
              onChange={(v) => { setCashFilterType(v); }}
              options={isIncome
                ? [{ value: 'income', label: t('finance.incomeCategory') }]
                : [
                    { value: 'project', label: t('finance.projectExpense') },
                    { value: 'company', label: t('finance.companyExpense') },
                    { value: 'finance', label: t('cash.financeExpense') },
                  ]
              }
            />
          </Space>
          <Button type="primary" icon={<PlusOutlined />} onClick={isIncome ? handleAddIncome : handleAddExpense}>
            {isMobile ? t('common.add') : (isIncome ? t('cash.addIncome') : t('cash.addExpense'))}
          </Button>
        </div>

        <Card size="small" styles={{ body: { padding: isMobile ? 8 : 16 } }}>
          <Spin spinning={cashLoading}>
            <Table
              dataSource={cashRecords.filter(r => isIncome ? r.txn_type === 'income' : r.txn_type === 'expense')}
              columns={isMobile ? cashMobileColumns : cashColumns}
              rowKey="id"
              size={isMobile ? 'small' : 'middle'}
              scroll={isMobile ? { x: 400 } : { x: 1000 }}
              pagination={{
                current: cashPagination.page,
                pageSize: cashPagination.pageSize,
                total: cashPagination.total,
                onChange: (page) => fetchCashRecords(page),
                size: isMobile ? 'small' : 'default',
                showTotal: (total) => t('finance.totalRecords', { total })
              }}
            />
          </Spin>
        </Card>
      </>
    );
  };

  const tabItems = [
    {
      key: 'overview',
      label: t('cash.tabOverview'),
      icon: <FundOutlined />,
      children: renderOverview(),
    },
    {
      key: 'income',
      label: t('cash.tabIncome'),
      icon: <RiseOutlined />,
      children: renderCashTab('income'),
    },
    {
      key: 'expense',
      label: t('cash.tabExpense'),
      icon: <FallOutlined />,
      children: renderCashTab('expense'),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
        <Title level={3} style={{ marginBottom: 0 }}>{t('finance.title')}</Title>
        <Space>
          <Button icon={<DownloadOutlined />} onClick={handleExport}>
            {isMobile ? t('common.export') : t('finance.exportExcel')}
          </Button>
        </Space>
      </div>

      <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} type="card" />

      <Modal
        title={addModalType === 'income' ? t('cash.addIncome') : t('cash.addExpense')}
        open={addModalVisible}
        onOk={handleSave}
        onCancel={() => setAddModalVisible(false)}
        confirmLoading={addLoading}
        okText={t('common.save')}
        cancelText={t('common.cancel')}
        width={isMobile ? '95%' : 640}
        style={{ top: isMobile ? 10 : 40 }}
        destroyOnClose
      >
        <Form form={form} layout={isMobile ? 'vertical' : 'horizontal'} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }} size="middle">

          <Form.Item name="record_date" label={t('finance.date')} rules={[{ required: true, message: t('finance.selectDate') }]}>
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>

          <Form.Item name="category_level1" label={t('finance.level1Category')} rules={[{ required: true, message: t('finance.selectLevel1') }]}>
            <Select onChange={handleLevel1Change} options={getLevel1Options(addModalType)} placeholder={t('finance.selectLevel1')} />
          </Form.Item>

          <Form.Item name="category_level2" label={t('finance.level2Category')} rules={[{ required: true, message: t('finance.selectLevel2') }]}>
            <Select options={getLevel2Options()} placeholder={t('finance.selectLevel2')} notFoundContent={t('finance.selectLevel2')} />
          </Form.Item>

          <Form.Item name="project_id" label={t('finance.projectName')}>
            <Select showSearch optionFilterProp="label" options={projectOptions} placeholder={t('finance.selectProject')} allowClear />
          </Form.Item>

          <Row gutter={8}>
            <Col span={10}>
              <Form.Item name="amount_original" label={t('finance.amount')} labelCol={{ span: isMobile ? 24 : 8 }} wrapperCol={{ span: isMobile ? 24 : 16 }} rules={[{ required: true, message: t('common.inputPlaceholder') }]}>
                <InputNumber style={{ width: '100%' }} min={0} precision={2} onChange={(v) => setAmountVal(v || 0)} placeholder={t('finance.amountPlaceholder')} />
              </Form.Item>
            </Col>
            <Col span={7}>
              <Form.Item name="currency" label={isMobile ? t('finance.currency') : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
                <Select options={CURRENCIES} onChange={handleCurrencyChange} />
              </Form.Item>
            </Col>
            <Col span={7}>
              <Form.Item name="exchange_rate" label={isMobile ? t('finance.exchangeRate') : ''} labelCol={{ span: isMobile ? 24 : 0 }} wrapperCol={{ span: isMobile ? 24 : 24 }} rules={[{ required: true }]}>
                <InputNumber style={{ width: '100%' }} min={0} step={0.0001} precision={6} onChange={(v) => setRateVal(v || 1)} />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item label={t('finance.equivalentCNY')}>
            <span style={{ fontSize: 18, fontWeight: 'bold', color: '#1890ff' }}>
              ¥{equivalentCny.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
            </span>
          </Form.Item>

          <Divider style={{ margin: '8px 0' }} />

          <Form.Item name="counterparty_type" label={t('finance.counterpartyType')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
            <Select options={COUNTERPARTY_TYPES} placeholder={t('finance.selectType')} allowClear onChange={() => form.setFieldsValue({ counterparty_id: undefined })} />
          </Form.Item>

          {getCounterpartyOptions().length > 0 && (
            <Form.Item name="counterparty_id" label={t('cash.counterpartySelect')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
              <Select showSearch optionFilterProp="label" options={getCounterpartyOptions()} placeholder={t('cash.counterpartySelectPlaceholder')} allowClear />
            </Form.Item>
          )}

          <Form.Item name="counterparty_name" label={t('finance.counterpartyName')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
            <Input placeholder={t('finance.counterpartyPlaceholder')} />
          </Form.Item>

          <Form.Item name="description" label={t('finance.desc')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
            <Input.TextArea rows={2} placeholder={t('finance.descPlaceholder')} />
          </Form.Item>

          <Form.Item name="voucher_url" label={t('cash.voucherUpload')} labelCol={{ span: isMobile ? 24 : 6 }} wrapperCol={{ span: isMobile ? 24 : 18 }}>
            <Upload
              maxCount={1}
              action="/api/upload/single"
              headers={{ Authorization: `Bearer ${JSON.parse(localStorage.getItem('auth-storage') || '{}')?.state?.token || ''}` }}
              onChange={(info) => {
                if (info.file.status === 'done' && info.file.response?.url) {
                  form.setFieldsValue({ voucher_url: info.file.response.url });
                  message.success(t('cash.uploadSuccess'));
                } else if (info.file.status === 'error') {
                  message.error(t('cash.uploadFailed'));
                }
              }}
              onRemove={() => form.setFieldsValue({ voucher_url: undefined })}
            >
              <Button icon={<UploadOutlined />}>{t('cash.uploadVoucher')}</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default FinancePage;