import React, { useState, useEffect } from 'react';
import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer, Select, Tabs, Badge, Radio } from 'antd';
import { PlusOutlined, FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons';
import { supabaseService } from '@/hooks/supabaseService';

const CategoryDrawer = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [editingKey, setEditingKey] = useState('');
  const [drawerVisible, setDrawerVisible] = useState(false);
  const [activeType, setActiveType] = useState('quotation'); // 当前选中的类型
  const [form] = Form.useForm();

  // 模板类型配置
  const TEMPLATE_TYPES = [
    { 
      value: 'quotation', 
      label: '报价单模板',
      icon: <FileTextOutlined className="text-blue-500" />,
      color: 'blue',
      description: '用于创建标准化的报价单'
    },
    { 
      value: 'project', 
      label: '专案模板',
      icon: <ProjectOutlined className="text-green-500" />,
      color: 'green',
      description: '用于创建项目流程模板'
    },
    { 
      value: 'task', 
      label: '任务模板',
      icon: <CheckSquareOutlined className="text-purple-500" />,
      color: 'purple',
      description: '用于创建标准任务模板'
    }
  ];

  // 获取分类数据
  const fetchCategories = async (type = activeType) => {
    setLoading(true);
    try {
      const { data: categories } = await supabaseService.select('resources', {
        filter: {
          type: { eq: 'categories' },
          'attributes->>type': { eq: type }
        },
        order: {
          column: 'created_at',
          ascending: false
        }
      });

      setData(categories || []);
    } catch (error) {
      message.error('获取分类数据失败');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (drawerVisible) {
      fetchCategories();
    }
  }, [drawerVisible, activeType]);

  // 切换模板类型
  const handleTypeChange = (type) => {
    setActiveType(type);
    setEditingKey(''); // 清除编辑状态
    form.resetFields(); // 重置表单
  };

  // 新增分类
  const handleAdd = (type) => {
    const newData = {
      id: Date.now().toString(),
      attributes: { 
        name: '',
        type: type // 默认类型
      },
      isNew: true
    };
    setData([newData, ...data]);
    setEditingKey(newData.id);
    form.setFieldsValue(newData.attributes);
  };

  // 保存分类数据
  const handleSave = async (record) => {
    try {
      const values = await form.validateFields();
      if (record.isNew) {
        await supabaseService.insert('resources', {
          type: 'categories',
          attributes: {
            name: values.name,
            type: values.type
          },
          schema_version: 1
        });
      } else {
        // 更新
        await supabaseService.update('resources', 
          { id: record.id },
          {
            attributes: {
              name: values.name,
              type: values.type
            },
            updated_at: new Date().toISOString()
          }
        );
      }

      message.success('保存成功');
      setEditingKey('');
      fetchCategories();
    } catch (error) {
      message.error('保存失败');
      console.error(error);
    }
  };

  // 删除分类
  const handleDelete = async (record) => {
    try {
      await supabaseService.delete('resources', { id: record.id });
      message.success('删除成功');
      fetchCategories();
    } catch (error) {
      message.error('删除失败');
      console.error(error);
    }
  };

  const columns = [
    {
      title: '分类名称',
      dataIndex: ['attributes', 'name'],
      render: (text, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Form.Item
            name="name"
            style={{ margin: 0 }}
            rules={[{ required: true, message: '请输入分类名称!' }]}
          >
            <Input placeholder="请输入分类名称" />
          </Form.Item>
        ) : (
          <span className="text-gray-600">{text}</span>
        );
      },
    },
    {
      title: '模板类型',
      dataIndex: ['attributes', 'type'],
      render: (text, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Form.Item
            name="type"
            style={{ margin: 0 }}
            rules={[{ required: true, message: '请选择模板类型!' }]}
          >
            <Select
              options={TEMPLATE_TYPES}
              placeholder="请选择模板类型"
            />
          </Form.Item>
        ) : (
          <span className="text-gray-600">
            {TEMPLATE_TYPES.find(t => t.value === text)?.label || text}
          </span>
        );
      },
    },
    {
      title: '操作',
      render: (_, record) => {
        const isEditing = record.id === editingKey;
        return isEditing ? (
          <Space>
            <Button
              type="link"
              className="text-green-600 hover:text-green-500"
              onClick={() => handleSave(record)}
            >
              保存
            </Button>
            <Button
              type="link"
              className="text-gray-600 hover:text-gray-500"
              onClick={() => {
                setEditingKey('');
                if (record.isNew) {
                  setData(data.filter(item => item.id !== record.id));
                }
              }}
            >
              取消
            </Button>
          </Space>
        ) : (
          <Space>
            <Button
              type="link"
              className="text-blue-600 hover:text-blue-500"
              disabled={editingKey !== ''}
              onClick={() => {
                setEditingKey(record.id);
                form.setFieldsValue({
                  name: record.attributes.name,
                  type: record.attributes.type
                });
              }}
            >
              编辑
            </Button>
            <Popconfirm
              title="确认���除"
              description="确定要删除这个分类吗？"
              onConfirm={() => handleDelete(record)}
              okText="确定"
              cancelText="取消"
              okButtonProps={{
                className: "bg-red-500 hover:bg-red-600 border-red-500"
              }}
            >
              <Button
                type="link"
                className="text-red-600 hover:text-red-500"
                disabled={editingKey !== ''}
              >
                删除
              </Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <>
      <Button 
        type="primary" 
        onClick={() => setDrawerVisible(true)}
        icon={<PlusOutlined />}
      >
        分类管理
      </Button>
      
      <Drawer
        title="分类管理"
        placement="right"
        width={800}
        onClose={() => setDrawerVisible(false)}
        open={drawerVisible}
        className="category-drawer"
      >
        <div className="p-6">
          {/* 类型选择器 */}
          <div className="mb-6">
            <Radio.Group 
              value={activeType} 
              onChange={(e) => handleTypeChange(e.target.value)}
              className="flex space-x-4"
            >
              {TEMPLATE_TYPES.map(type => (
                <Radio.Button 
                  key={type.value} 
                  value={type.value}
                  className={`flex items-center px-4 py-2 ${
                    activeType === type.value ? `bg-${type.color}-50 border-${type.color}-500` : ''
                  }`}
                >
                  <span className="flex items-center space-x-2">
                    {type.icon}
                    <span>{type.label}</span>
                    <Badge 
                      count={data.filter(item => item.attributes.type === type.value).length}
                      className={`bg-${type.color}-100 text-${type.color}-600`}
                    />
                  </span>
                </Radio.Button>
              ))}
            </Radio.Group>
          </div>

          {/* 当前类型说明 */}
          <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
            <h3 className={`text-${TEMPLATE_TYPES.find(t => t.value === activeType)?.color}-500 text-lg font-medium mb-2 flex items-center`}>
              {TEMPLATE_TYPES.find(t => t.value === activeType)?.icon}
              <span className="ml-2">{TEMPLATE_TYPES.find(t => t.value === activeType)?.label}</span>
            </h3>
            <p className="text-gray-500 dark:text-gray-400">
              {TEMPLATE_TYPES.find(t => t.value === activeType)?.description}
            </p>
          </div>

          {/* 新增按钮 */}
          <Button
            type="primary"
            onClick={() => handleAdd(activeType)}
            className="mb-4"
            icon={<PlusOutlined />}
          >
            新增分类
          </Button>

          {/* 分类列表 */}
          <Form form={form}>
            <Table
              scroll={{ x: true }}
              columns={columns}
              dataSource={data}
              rowKey="id"
              loading={loading}
              pagination={{
                pageSize: 10,
                showTotal: (total) => `共 ${total} 条`,
              }}
              className="bg-white dark:bg-gray-800 rounded-lg shadow"
            />
          </Form>
        </div>
      </Drawer>
    </>
  );
};

export default CategoryDrawer;