import React, { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Input,
  Select,
  Space,
  Form,
  message,
  Switch,
  Typography,
  InputNumber,
  Tabs,
  Modal,
  Popconfirm,
} from 'antd';
import { SearchOutlined, ReloadOutlined, EditOutlined, PlusOutlined, DeleteOutlined, CheckOutlined } from '@ant-design/icons';
import { VmPricingApi } from '../services/api';

const { Option } = Select;
const { Title } = Typography;
const { TabPane } = Tabs;

interface VmSpecItem {
  id: number;
  spec_type: string;
  cpu_cores: number;
  memory_gb: number;
  description?: string;
  cost_price_per_minute: number;
  markup_rate: number;
  is_active: boolean;
  created_at: string;
  updated_at: string;
}

interface VmTemplateItem {
  id: number;
  spec_type: string;
  template_id: string;
  is_default: boolean;
  created_at: string;
  updated_at: string;
}

const VmPricing: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [specsData, setSpecsData] = useState<VmSpecItem[]>([]);
  const [templatesData, setTemplatesData] = useState<VmTemplateItem[]>([]);
  const [specsTotal, setSpecsTotal] = useState(0);
  const [templatesTotal, setTemplatesTotal] = useState(0);
  const [specsPage, setSpecsPage] = useState(1);
  const [templatesPage, setTemplatesPage] = useState(1);
  const [specsPageSize, setSpecsPageSize] = useState(10);
  const [templatesPageSize, setTemplatesPageSize] = useState(10);
  const [activeTab, setActiveTab] = useState('specs');
  const [editingCell, setEditingCell] = useState<{ rowId: number; field: string } | null>(null);
  const [editingValue, setEditingValue] = useState<number>(0);
  const [specModalVisible, setSpecModalVisible] = useState(false);
  const [templateModalVisible, setTemplateModalVisible] = useState(false);
  const [specsForm] = Form.useForm();
  const [templatesForm] = Form.useForm();
  const [templateForm] = Form.useForm();
  const [specForm] = Form.useForm();
  const [specTypes, setSpecTypes] = useState<string[]>([]);

  // 获取规格类型列表（用于模板表单）
  const fetchSpecTypes = async () => {
    try {
      const response = await VmPricingApi.getSpecs({ size: 1000 });
      const types = [...new Set((response.data || []).map((item: VmSpecItem) => item.spec_type))];
      setSpecTypes(types);
    } catch (error) {
      console.error('获取规格类型失败:', error);
    }
  };

  // 获取规格数据
  const fetchSpecs = async (searchParams: any = {}) => {
    setLoading(true);
    try {
      const response = await VmPricingApi.getSpecs({
        ...searchParams,
        page: specsPage,
        size: specsPageSize,
      });
      setSpecsData(response.data || []);
      setSpecsTotal(response.total || 0);
    } catch (error) {
      console.error('获取规格数据失败:', error);
      message.error('获取规格数据失败');
    } finally {
      setLoading(false);
    }
  };

  // 获取模板数据
  const fetchTemplates = async (searchParams: any = {}) => {
    setLoading(true);
    try {
      const response = await VmPricingApi.getTemplates({
        ...searchParams,
        page: templatesPage,
        size: templatesPageSize,
      });
      setTemplatesData(response.data || []);
      setTemplatesTotal(response.total || 0);
    } catch (error) {
      console.error('获取模板数据失败:', error);
      message.error('获取模板数据失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSpecTypes(); // 获取规格类型列表
    if (activeTab === 'specs') {
      fetchSpecs();
    } else {
      fetchTemplates();
    }
  }, [specsPage, specsPageSize, templatesPage, templatesPageSize, activeTab]);

  useEffect(() => {
    // 当规格数据更新时，更新规格类型列表
    if (specsData.length > 0) {
      const types = [...new Set(specsData.map(item => item.spec_type))];
      setSpecTypes(types);
    }
  }, [specsData]);

  // 更新规格
  const handleUpdateSpec = async (id: number, field: string, value: number | boolean) => {
    try {
      await VmPricingApi.updateSpec(id, { [field]: value });
      message.success('更新成功');
      setEditingCell(null);
      fetchSpecs();
    } catch (error) {
      message.error('更新失败');
      console.error('更新规格失败:', error);
    }
  };

  // 更新状态
  const handleUpdateStatus = async (id: number, isActive: boolean) => {
    handleUpdateSpec(id, 'is_active', isActive);
  };

  // 搜索规格
  const handleSpecsSearch = (values: any) => {
    setSpecsPage(1);
    fetchSpecs(values);
  };

  // 重置规格搜索
  const handleSpecsReset = () => {
    specsForm.resetFields();
    setSpecsPage(1);
    fetchSpecs();
  };

  // 搜索模板
  const handleTemplatesSearch = (values: any) => {
    setTemplatesPage(1);
    fetchTemplates(values);
  };

  // 重置模板搜索
  const handleTemplatesReset = () => {
    templatesForm.resetFields();
    setTemplatesPage(1);
    fetchTemplates();
  };

  // 开始编辑
  const handleEdit = (rowId: number, field: string, value: number) => {
    setEditingCell({ rowId, field });
    setEditingValue(value);
  };

  // 保存编辑
  const handleSaveEdit = (rowId: number, field: string) => {
    let valueToSave = editingValue;
    // 加价率需要转换为小数（前端显示为百分比，后端存储为小数）
    if (field === 'markup_rate') {
      valueToSave = editingValue / 100;
    }
    handleUpdateSpec(rowId, field, valueToSave);
  };

  // 取消编辑
  const handleCancelEdit = () => {
    setEditingCell(null);
  };

  // 创建规格
  const handleCreateSpec = async (values: any) => {
    try {
      // 转换加价率：前端输入百分比，后端存储小数
      const data = {
        ...values,
        markup_rate: values.markup_rate ? values.markup_rate / 100 : undefined,
      };
      await VmPricingApi.createSpec(data);
      message.success('规格创建成功');
      setSpecModalVisible(false);
      specForm.resetFields();
      fetchSpecs();
      fetchSpecTypes(); // 刷新规格类型列表
    } catch (error: any) {
      message.error(error?.response?.data?.message || '规格创建失败');
      console.error('创建规格失败:', error);
    }
  };

  // 创建模板
  const handleCreateTemplate = async (values: any) => {
    try {
      await VmPricingApi.createTemplate(values);
      message.success('模板创建成功');
      setTemplateModalVisible(false);
      templateForm.resetFields();
      fetchTemplates();
    } catch (error: any) {
      message.error(error?.response?.data?.message || '模板创建失败');
      console.error('创建模板失败:', error);
    }
  };

  // 删除规格
  const handleDeleteSpec = async (id: number) => {
    try {
      await VmPricingApi.deleteSpec(id);
      message.success('规格删除成功');
      fetchSpecs();
      fetchSpecTypes(); // 刷新规格类型列表
    } catch (error) {
      message.error('规格删除失败');
      console.error('删除规格失败:', error);
    }
  };

  // 删除模板
  const handleDeleteTemplate = async (id: number) => {
    try {
      await VmPricingApi.deleteTemplate(id);
      message.success('模板删除成功');
      fetchTemplates();
    } catch (error) {
      message.error('模板删除失败');
      console.error('删除模板失败:', error);
    }
  };

  // 设置默认模板
  const handleSetDefaultTemplate = async (id: number) => {
    try {
      await VmPricingApi.setDefaultTemplate(id);
      message.success('默认模板设置成功');
      fetchTemplates();
    } catch (error) {
      message.error('设置默认模板失败');
      console.error('设置默认模板失败:', error);
    }
  };


  // 规格表格列
  const specsColumns = [
    {
      title: '配置类型',
      dataIndex: 'spec_type',
      key: 'spec_type',
      width: 120,
    },
    {
      title: 'CPU核心',
      dataIndex: 'cpu_cores',
      key: 'cpu_cores',
      width: 100,
    },
    {
      title: '内存(GB)',
      dataIndex: 'memory_gb',
      key: 'memory_gb',
      width: 100,
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
      width: 150,
      render: (text: string) => text || '-',
    },
    {
      title: '成本价($/分钟)',
      dataIndex: 'cost_price_per_minute',
      key: 'cost_price_per_minute',
      width: 160,
      render: (value: number, record: VmSpecItem) => {
        if (editingCell?.rowId === record.id && editingCell?.field === 'cost_price_per_minute') {
          return (
            <Space.Compact>
              <InputNumber
                value={editingValue}
                onChange={(val) => setEditingValue(val || 0)}
                precision={8}
                min={0}
                style={{ width: 120 }}
                autoFocus
              />
              <Button
                type="primary"
                size="small"
                onClick={() => handleSaveEdit(record.id, 'cost_price_per_minute')}
              >
                保存
              </Button>
              <Button size="small" onClick={handleCancelEdit}>
                取消
              </Button>
            </Space.Compact>
          );
        }
        return (
          <div
            style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
            onClick={() => handleEdit(record.id, 'cost_price_per_minute', value)}
          >
            <span>${value.toFixed(8)}</span>
            <EditOutlined style={{ marginLeft: 8, fontSize: 12, color: '#1890ff' }} />
          </div>
        );
      },
    },
    {
      title: '加价率(%)',
      dataIndex: 'markup_rate',
      key: 'markup_rate',
      width: 140,
      render: (value: number, record: VmSpecItem) => {
        if (editingCell?.rowId === record.id && editingCell?.field === 'markup_rate') {
          return (
            <Space.Compact>
              <InputNumber
                value={editingValue}
                onChange={(val) => setEditingValue(val || 0)}
                precision={4}
                min={0}
                max={100}
                style={{ width: 100 }}
                autoFocus
                formatter={(value) => `${value}%`}
                parser={(value) => value!.replace('%', '')}
              />
              <Button
                type="primary"
                size="small"
                onClick={() => handleSaveEdit(record.id, 'markup_rate')}
              >
                保存
              </Button>
              <Button size="small" onClick={handleCancelEdit}>
                取消
              </Button>
            </Space.Compact>
          );
        }
        return (
          <div
            style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
            onClick={() => handleEdit(record.id, 'markup_rate', value * 100)}
          >
            <span>{(value * 100).toFixed(2)}%</span>
            <EditOutlined style={{ marginLeft: 8, fontSize: 12, color: '#1890ff' }} />
          </div>
        );
      },
    },
    {
      title: '状态',
      dataIndex: 'is_active',
      key: 'is_active',
      width: 80,
      render: (value: boolean, record: VmSpecItem) => (
        <Switch
          checked={value}
          onChange={(checked) => handleUpdateStatus(record.id, checked)}
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      render: (_: any, record: VmSpecItem) => (
        <Popconfirm
          title="确定要删除这个规格吗？"
          description="删除后该规格的所有配置将无法使用"
          onConfirm={() => handleDeleteSpec(record.id)}
          okText="确定"
          cancelText="取消"
        >
          <Button
            type="link"
            danger
            size="small"
            icon={<DeleteOutlined />}
          >
            删除
          </Button>
        </Popconfirm>
      ),
    },
  ];

  // 模板表格列
  const templatesColumns = [
    {
      title: '配置类型',
      dataIndex: 'spec_type',
      key: 'spec_type',
      width: 120,
    },
    {
      title: '模板ID',
      dataIndex: 'template_id',
      key: 'template_id',
      width: 200,
    },
    {
      title: '默认模板',
      dataIndex: 'is_default',
      key: 'is_default',
      width: 100,
      render: (value: boolean, record: VmTemplateItem) => (
        value ? (
          <span style={{ color: '#52c41a' }}>
            <CheckOutlined /> 是
          </span>
        ) : (
          <Button
            type="link"
            size="small"
            onClick={() => handleSetDefaultTemplate(record.id)}
          >
            设为默认
          </Button>
        )
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_: any, record: VmTemplateItem) => (
        <Popconfirm
          title="确定要删除这个模板吗？"
          onConfirm={() => handleDeleteTemplate(record.id)}
          okText="确定"
          cancelText="取消"
        >
          <Button
            type="link"
            danger
            size="small"
            icon={<DeleteOutlined />}
          >
            删除
          </Button>
        </Popconfirm>
      ),
    },
  ];

  return (
    <Card title={<Title level={4}>虚拟机价格配置</Title>}>
      <Tabs activeKey={activeTab} onChange={setActiveTab}>
        <TabPane tab="规格价格" key="specs">
          <Space style={{ marginBottom: 16 }}>
            <Form form={specsForm} onFinish={handleSpecsSearch} layout="inline">
              <Form.Item name="spec_type">
                <Input placeholder="配置类型" style={{ width: 150 }} />
              </Form.Item>
              <Form.Item name="status">
                <Select placeholder="状态" allowClear style={{ width: 120 }}>
                  <Option value="active">启用</Option>
                  <Option value="inactive">禁用</Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                    搜索
                  </Button>
                  <Button onClick={handleSpecsReset} icon={<ReloadOutlined />}>
                    重置
                  </Button>
                </Space>
              </Form.Item>
            </Form>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setSpecModalVisible(true)}
            >
              添加规格
            </Button>
          </Space>

          <Table
            dataSource={specsData}
            columns={specsColumns}
            rowKey="id"
            loading={loading}
            pagination={{
              current: specsPage,
              pageSize: specsPageSize,
              total: specsTotal,
              showSizeChanger: true,
              showTotal: (total) => `共 ${total} 条`,
              onChange: (page, pageSize) => {
                setSpecsPage(page);
                setSpecsPageSize(pageSize || 10);
              },
            }}
          />
        </TabPane>

        <TabPane tab="模板配置" key="templates">
          <Space style={{ marginBottom: 16 }}>
            <Form form={templatesForm} onFinish={handleTemplatesSearch} layout="inline">
              <Form.Item name="spec_type">
                <Input placeholder="配置类型" style={{ width: 150 }} />
              </Form.Item>
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                    搜索
                  </Button>
                  <Button onClick={handleTemplatesReset} icon={<ReloadOutlined />}>
                    重置
                  </Button>
                </Space>
              </Form.Item>
            </Form>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setTemplateModalVisible(true)}
            >
              添加模板
            </Button>
          </Space>

          <Table
            dataSource={templatesData}
            columns={templatesColumns}
            rowKey="id"
            loading={loading}
            pagination={{
              current: templatesPage,
              pageSize: templatesPageSize,
              total: templatesTotal,
              showSizeChanger: true,
              showTotal: (total) => `共 ${total} 条`,
              onChange: (page, pageSize) => {
                setTemplatesPage(page);
                setTemplatesPageSize(pageSize || 10);
              },
            }}
          />
        </TabPane>
      </Tabs>

      {/* 添加规格模态框 */}
      <Modal
        title="添加规格"
        open={specModalVisible}
        onCancel={() => {
          setSpecModalVisible(false);
          specForm.resetFields();
        }}
        footer={null}
      >
        <Form
          form={specForm}
          layout="vertical"
          onFinish={handleCreateSpec}
        >
          <Form.Item
            name="spec_type"
            label="配置类型"
            rules={[{ required: true, message: '请输入配置类型' }]}
          >
            <Input placeholder="如：2c4g, 4c8g, 6c12g" />
          </Form.Item>
          <Form.Item
            name="cpu_cores"
            label="CPU核心数"
            rules={[{ required: true, message: '请输入CPU核心数' }]}
          >
            <InputNumber min={1} style={{ width: '100%' }} placeholder="请输入CPU核心数" />
          </Form.Item>
          <Form.Item
            name="memory_gb"
            label="内存(GB)"
            rules={[{ required: true, message: '请输入内存大小' }]}
          >
            <InputNumber min={1} style={{ width: '100%' }} placeholder="请输入内存大小(GB)" />
          </Form.Item>
          <Form.Item
            name="description"
            label="描述"
          >
            <Input placeholder="配置描述（可选）" />
          </Form.Item>
          <Form.Item
            name="cost_price_per_minute"
            label="成本价($/分钟)"
            rules={[{ required: true, message: '请输入成本价' }]}
          >
            <InputNumber
              min={0}
              precision={8}
              style={{ width: '100%' }}
              placeholder="请输入成本价（美元/分钟）"
            />
          </Form.Item>
          <Form.Item
            name="markup_rate"
            label="加价率(%)"
            initialValue={30}
          >
            <InputNumber
              min={0}
              max={100}
              precision={2}
              style={{ width: '100%' }}
              placeholder="默认30%"
              formatter={(value) => `${value}%`}
              parser={(value) => value!.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="is_active"
            label="启用"
            valuePropName="checked"
            initialValue={true}
          >
            <Switch />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                创建
              </Button>
              <Button onClick={() => {
                setSpecModalVisible(false);
                specForm.resetFields();
              }}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      {/* 添加模板模态框 */}
      <Modal
        title="添加模板"
        open={templateModalVisible}
        onCancel={() => {
          setTemplateModalVisible(false);
          templateForm.resetFields();
        }}
        footer={null}
      >
        <Form
          form={templateForm}
          layout="vertical"
          onFinish={handleCreateTemplate}
        >
          <Form.Item
            name="spec_type"
            label="配置类型"
            rules={[{ required: true, message: '请选择配置类型' }]}
          >
            <Select placeholder="请选择配置类型" showSearch>
              {specTypes.map(type => (
                <Option key={type} value={type}>{type}</Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="template_id"
            label="模板ID"
            rules={[{ required: true, message: '请输入模板ID' }]}
          >
            <Input placeholder="请输入E2B模板ID" />
          </Form.Item>
          <Form.Item
            name="is_default"
            label="设为默认模板"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                创建
              </Button>
              <Button onClick={() => {
                setTemplateModalVisible(false);
                templateForm.resetFields();
              }}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
};

export default VmPricing;