import React, { useState, useEffect } 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 axios from 'axios';
import dayjs from 'dayjs';

const { Text, Title } = Typography;

const RATE_PAIRS = [
  { key: 'CNY_LAK', label: '中老汇率', from: 'CNY', to: 'LAK', fromLabel: '人民币', toLabel: '老挝基普' },
  { key: 'CNY_USD', label: '中美汇率', from: 'CNY', to: 'USD', fromLabel: '人民币', toLabel: '美元' },
  { key: 'CNY_THB', label: '中泰汇率', from: 'CNY', to: 'THB', fromLabel: '人民币', toLabel: '泰铢' },
  { key: 'USD_LAK', label: '美老汇率', from: 'USD', to: 'LAK', fromLabel: '美元', toLabel: '老挝基普' },
  { key: 'THB_LAK', label: '泰老汇率', from: 'THB', to: 'LAK', fromLabel: '泰铢', toLabel: '老挝基普' },
];

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 [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 axios.get('/api/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('获取汇率失败');
      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 axios.get('/api/exchange-rates/history?limit=20');
      if (res.data.success) {
        setHistoryRates(res.data.data);
      }
    } catch (error) {
      console.error('获取历史汇率失败:', error);
    }
  };

  // 左侧输入 - 右侧自动变为1，重新计算汇率
  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;
    
    // 当左侧输入值时，右侧变为1，计算新的汇率
    const newRate = 1 / value;
    
    setRates(prev => ({
      ...prev,
      [key]: { 
        leftValue: value, 
        rightValue: 1,
        actualRate: newRate 
      }
    }));
  };

  // 右侧输入 - 左侧自动变为1，重新计算汇率
  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;
    
    // 当右侧输入值时，左侧变为1，计算新的汇率
    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 axios.post('/api/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('没有汇率发生变化');
        setSaving(false);
        return;
      }
      
      await Promise.all(validPromises);
      
      message.success('汇率保存成功');
      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('保存汇率失败');
    } finally {
      setSaving(false);
    }
  };

  // 历史汇率表格列
  const historyColumns = [
    { 
      title: '汇率对', 
      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: '汇率', 
      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: '生效日期', 
      dataIndex: 'effective_date', 
      key: 'effective_date',
      render: (date: string) => dayjs(date).format('YYYY-MM-DD')
    },
    { 
      title: '设置时间', 
      dataIndex: 'created_at', 
      key: 'created_at',
      render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm')
    },
    { 
      title: '设置人', 
      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 }}>汇率管理</Title>
        <Space>
          <Text type="secondary">设置各币种汇率，输入任意一侧自动计算</Text>
          {lastUpdateTime && (
            <Tag color="blue">上次更新: {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={`输入${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={`输入${pair.toLabel}金额`}
                    />
                  </div>
                </div>
                <Divider style={{ margin: '12px 0' }} />
                <div style={{ textAlign: 'center' }}>
                  <Text type="secondary" style={{ fontSize: 13 }}>
                    实际汇率: {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 }}
        >
          确认保存汇率
        </Button>
      </div>

      {/* 历史汇率表 */}
      <Card 
        title={
          <Space>
            <HistoryOutlined />
            <span>历史汇率记录</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">
          提示：输入任意一侧数值，另一侧会自动计算。实际汇率实时显示为 1左侧币种 = X右侧币种。点击"确认保存汇率"按钮保存当前设置到数据库。
        </Text>
      </Card>
    </div>
  );
};

export default ExchangeRatePage;