import React, { useState, useEffect, useMemo } from 'react';
import { Card, Row, Col, InputNumber, message, Typography, Divider, Spin, Button, Table, Space, Tag } from 'antd';
import { CheckOutlined, HistoryOutlined } from '@ant-design/icons';
import apiClient from '../utils/request';
import dayjs from 'dayjs';
import { useLanguageStore } from '../store/languageStore';

const { Text, Title } = Typography;

const RATE_PAIR_KEYS = [
  { key: 'CNY_LAK', i18nKey: 'CNYLAK', from: 'CNY', to: 'LAK', fromI18n: 'CNY', toI18n: 'LAK' },
  { key: 'CNY_USD', i18nKey: 'CNYUSD', from: 'CNY', to: 'USD', fromI18n: 'CNY', toI18n: 'USD' },
  { key: 'CNY_THB', i18nKey: 'CNYTHB', from: 'CNY', to: 'THB', fromI18n: 'CNY', toI18n: 'THB' },
  { key: 'USD_LAK', i18nKey: 'USDLAK', from: 'USD', to: 'LAK', fromI18n: 'USD', toI18n: 'LAK' },
  { key: 'THB_LAK', i18nKey: 'THBLAK', from: 'THB', to: 'LAK', fromI18n: 'THB', toI18n: 'LAK' },
];

interface RateItem {
  leftValue: number;
  rightValue: number;
  actualRate: number;
}

interface HistoryRate {
  id: number;
  pair_key: string;
  rate: number;
  effective_date: string;
  created_at: string;
  created_by_name?: string;
}

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

  const RATE_PAIRS = useMemo(() => RATE_PAIR_KEYS.map(p => ({
    ...p,
    label: t(`exchangeRate.${p.i18nKey}`),
    fromLabel: t(`exchangeRate.${p.fromI18n}`),
    toLabel: t(`exchangeRate.${p.toI18n}`),
  })), [t]);

  const [rates, setRates] = useState<Record<string, RateItem>>({});
  const [initialRates, setInitialRates] = useState<Record<string, number>>({});
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const [historyRates, setHistoryRates] = useState<HistoryRate[]>([]);
  const [lastUpdateTime, setLastUpdateTime] = useState<string>('');

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

  useEffect(() => {
    fetchRates();
    fetchHistory();
  }, []);

  const fetchRates = async () => {
    setLoading(true);
    try {
      const res = await apiClient.get('/exchange-rates/latest');
      if (res.data.success) {
        const data = res.data.data;
        const newRates: Record<string, RateItem> = {};
        const newInitialRates: Record<string, number> = {};
        RATE_PAIRS.forEach(pair => {
          const rate = parseFloat(data[pair.key]) || 1;
          newRates[pair.key] = { leftValue: 1, rightValue: rate, actualRate: rate };
          newInitialRates[pair.key] = rate;
        });
        setRates(newRates);
        setInitialRates(newInitialRates);
        
        if (res.data.updated_at) {
          setLastUpdateTime(res.data.updated_at);
        }
      }
    } catch (error) {
      message.error(t('exchangeRate.getRateFailed'));
      const defaultRates: Record<string, RateItem> = {};
      const defaultInitialRates: Record<string, number> = {};
      RATE_PAIRS.forEach(pair => {
        const defaultRate = pair.key === 'CNY_LAK' ? 3000 : pair.key === 'CNY_USD' ? 0.14 : pair.key === 'CNY_THB' ? 4.5 : pair.key === 'USD_LAK' ? 21000 : 670;
        defaultRates[pair.key] = { leftValue: 1, rightValue: defaultRate, actualRate: defaultRate };
        defaultInitialRates[pair.key] = defaultRate;
      });
      setRates(defaultRates);
      setInitialRates(defaultInitialRates);
    } finally {
      setLoading(false);
    }
  };

  const fetchHistory = async () => {
    try {
      const res = await apiClient.get('/exchange-rates/history?limit=20');
      if (res.data.success) {
        setHistoryRates(res.data.data);
      }
    } catch (error) {
      console.error('获取历史汇率失败:', error);
    }
  };

  const handleLeftChange = (key: string, value: number | null) => {
    if (value === null || value <= 0) return;
    const pair = RATE_PAIRS.find(p => p.key === key);
    if (!pair) return;
    
    const newRate = 1 / value;
    
    setRates(prev => ({
      ...prev,
      [key]: { 
        leftValue: value, 
        rightValue: 1,
        actualRate: newRate 
      }
    }));
  };

  const handleRightChange = (key: string, value: number | null) => {
    if (value === null || value <= 0) return;
    const pair = RATE_PAIRS.find(p => p.key === key);
    if (!pair) return;
    
    const newRate = value;
    
    setRates(prev => ({
      ...prev,
      [key]: { 
        leftValue: 1,
        rightValue: value, 
        actualRate: newRate 
      }
    }));
  };

  const getActualRateDisplay = (key: string) => {
    const item = rates[key];
    if (!item) return '1 : 1.00';
    
    const pair = RATE_PAIRS.find(p => p.key === key);
    const actualRate = item.actualRate;
    
    const decimalPlaces = pair?.key === 'CNY_USD' ? 5 : 2;
    
    return `1 ${pair?.from} = ${actualRate.toFixed(decimalPlaces)} ${pair?.to}`;
  };

  const handleConfirm = async () => {
    setSaving(true);
    try {
      const savePromises = RATE_PAIRS.map(pair => {
        const item = rates[pair.key];
        if (!item) return null;
        
        const actualRate = item.rightValue / item.leftValue;
        const initialRate = initialRates[pair.key];
        
        if (Math.abs(actualRate - initialRate) < 0.0001) {
          return null;
        }
        
        return apiClient.post('/exchange-rates', {
          pair_key: pair.key,
          rate: actualRate,
          effective_date: dayjs().format('YYYY-MM-DD')
        });
      });
      
      const validPromises = savePromises.filter(Boolean) as Promise<any>[];
      
      if (validPromises.length === 0) {
        message.info(t('exchangeRate.noChange'));
        setSaving(false);
        return;
      }
      
      await Promise.all(validPromises);
      
      message.success(t('exchangeRate.saveSuccess'));
      setLastUpdateTime(dayjs().format('YYYY-MM-DD HH:mm:ss'));
      fetchHistory();
      const newInitialRates: Record<string, number> = {};
      RATE_PAIRS.forEach(pair => {
        const item = rates[pair.key];
        if (item) {
          newInitialRates[pair.key] = item.rightValue / item.leftValue;
        }
      });
      setInitialRates(newInitialRates);
    } catch (error) {
      message.error(t('exchangeRate.saveFailed'));
    } finally {
      setSaving(false);
    }
  };

  const historyColumns = [
    { 
      title: t('exchangeRate.ratePair'), 
      dataIndex: 'from_currency', 
      key: 'from_currency',
      render: (_: string, record: HistoryRate) => {
        const pairKey = `${record.from_currency}_${record.to_currency}`;
        const pair = RATE_PAIRS.find(p => p.key === pairKey);
        return pair?.label || pairKey;
      }
    },
    { 
      title: t('exchangeRate.rate'), 
      dataIndex: 'rate', 
      key: 'rate',
      render: (rate: number, record: HistoryRate) => {
        const pairKey = `${record.from_currency}_${record.to_currency}`;
        const pair = RATE_PAIRS.find(p => p.key === pairKey);
        return `1 ${record.from_currency} = ${parseFloat(rate).toFixed(pair?.key === 'CNY_USD' ? 4 : 2)} ${record.to_currency}`;
      }
    },
    { 
      title: t('exchangeRate.effectiveDate'), 
      dataIndex: 'effective_date', 
      key: 'effective_date',
      render: (date: string) => dayjs(date).format('YYYY-MM-DD')
    },
    { 
      title: t('exchangeRate.setTime'), 
      dataIndex: 'created_at', 
      key: 'created_at',
      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    { 
      title: t('exchangeRate.setBy'), 
      dataIndex: 'created_by_name', 
      key: 'created_by_name',
      render: (name: string) => name || '-'
    }
  ];

  if (loading) {
    return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 400 }}><Spin size="large" /></div>;
  }

  return (
    <div style={{ padding: isMobile ? 8 : 24 }}>
      <div style={{ marginBottom: isMobile ? 12 : 24 }}>
        <Title level={2} style={{ marginBottom: 8 }}>{t('exchangeRate.title')}</Title>
        <Space>
          <Text type="secondary">{t('exchangeRate.description')}</Text>
          {lastUpdateTime && (
            <Tag color="blue">{t('exchangeRate.lastUpdated')}{lastUpdateTime}</Tag>
          )}
        </Space>
      </div>

      <Row gutter={[16, 16]}>
        {RATE_PAIRS.map(pair => {
          const item = rates[pair.key];
          if (!item) return null;
          return (
            <Col xs={24} sm={12} lg={8} key={pair.key}>
              <Card title={pair.label} size="small" style={{ background: '#fafafa' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#888' }}>{pair.fromLabel}</div>
                    <InputNumber 
                      style={{ 
                        width: '100%',
                        borderColor: '#d9d9d9',
                        '&:hover': {
                          borderColor: '#1890ff',
                        },
                        '&:focus': {
                          borderColor: '#1890ff',
                          boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)',
                        }
                      }} 
                      value={item.leftValue} 
                      onChange={(v) => handleLeftChange(pair.key, v)} 
                      precision={6} 
                      size="large" 
                      min={0.000001}
                      onFocus={(e) => {
                        if (e.target && e.target.select) {
                          e.target.select();
                        }
                      }}
                      placeholder={t('exchangeRate.inputFrom', { from: pair.fromLabel })}
                    />
                  </div>
                  <div style={{ padding: '20px 8px 0', fontSize: 18, color: '#1890ff', fontWeight: 'bold' }}>=</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 4, fontSize: 12, color: '#888' }}>{pair.toLabel}</div>
                    <InputNumber 
                      style={{ 
                        width: '100%',
                        borderColor: '#d9d9d9',
                        '&:hover': {
                          borderColor: '#1890ff',
                        },
                        '&:focus': {
                          borderColor: '#1890ff',
                          boxShadow: '0 0 0 2px rgba(24, 144, 255, 0.2)',
                        }
                      }} 
                      value={item.rightValue} 
                      onChange={(v) => handleRightChange(pair.key, v)} 
                      precision={pair.key === 'CNY_USD' ? 4 : 2} 
                      size="large" 
                      min={0.000001}
                      onFocus={(e) => {
                        if (e.target && e.target.select) {
                          e.target.select();
                        }
                      }}
                      placeholder={t('exchangeRate.inputTo', { to: pair.toLabel })}
                    />
                  </div>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div style={{ textAlign: 'center' }}>
                  <Text type="secondary" style={{ fontSize: 13 }}>
                    {t('exchangeRate.actualRate')}{getActualRateDisplay(pair.key)}
                  </Text>
                </div>
              </Card>
            </Col>
          );
        })}
      </Row>

      <div style={{ marginTop: 24, textAlign: 'center' }}>
        <Button 
          type="primary" 
          size="large" 
          icon={<CheckOutlined />} 
          onClick={handleConfirm}
          loading={saving}
          style={{ minWidth: 200 }}
        >
          {t('exchangeRate.confirmSave')}
        </Button>
      </div>

      <Card 
        title={
          <Space>
            <HistoryOutlined />
            <span>{t('exchangeRate.historyRate')}</span>
          </Space>
        }
        style={{ marginTop: 24 }}
      >
        <Table 
          dataSource={historyRates} 
          columns={historyColumns} 
          rowKey="id" 
          pagination={{ pageSize: 10 }}
          size="small"
        />
      </Card>

      <Card style={{ marginTop: 16, background: '#fffbe6', borderColor: '#ffe58f' }}>
        <Text type="warning">
          {t('exchangeRate.tipText')}
        </Text>
      </Card>
    </div>
  );
};

export default ExchangeRatePage;