import React, { useState, useEffect, useMemo } from "react";
import {
  Card,
  Form,
  Input,
  InputNumber,
  Button,
  Space,
  Typography,
  message,
  Select,
  Modal,
  Divider,
  Popconfirm,
} from "antd";
import {
  PlusOutlined,
  DeleteOutlined,
  ArrowLeftOutlined,
  EditOutlined,
  CloseOutlined,
  CheckOutlined,
} from "@ant-design/icons";
import { useNavigate, useParams, useLocation } from "react-router-dom";
import { supabase } from "@/config/supabase";
const { Title, Text } = Typography;

const ServiceForm = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const { id } = useParams();
  const [loading, setLoading] = useState(false);
  const location = useLocation();
  const isEdit = location.search.includes("edit=true");
  const [editingSectionIndex, setEditingSectionIndex] = useState(null);
  const [availableSections, setAvailableSections] = useState([]);
  const [formValues, setFormValues] = useState({
    sections: [{ items: [{}] }],
    currency: "CNY"
  });
  const [templateModalVisible, setTemplateModalVisible] = useState(false);
  const [categories, setCategories] = useState([]);
  const [units, setUnits] = useState([]);

  useEffect(() => {
    if (id) {
      fetchServiceTemplate();
    }
    fetchAvailableSections();
    fetchCategories();
    fetchUnits();
  }, [id]);

  const fetchServiceTemplate = async () => {
    try {
      setLoading(true);
      const { data, error } = await supabase
        .from("resources")
        .select("*")
        .eq("id", id)
        .single();

      if (error) throw error;
      const formData = {
        templateName: data.attributes.templateName,
        description: data.attributes.description,
        category:data.attributes.category.map(v=>v.id),
        sections: data.attributes.sections,
      };
      form.setFieldsValue(formData);
      setFormValues(formData);
    } catch (error) {
      console.error("获取服务模版失败:", error);
      message.error("获取服务模版失败");
    } finally {
      setLoading(false);
    }
  };

  const fetchAvailableSections = async () => {
    try {
      const { data: sections, error } = await supabase
        .from('resources')
        .select('*')
        .eq('type', 'sections')
        .order('created_at', { ascending: false });

      if (error) throw error;
      setAvailableSections(sections || []);
    } catch (error) {
      message.error('获取小节模版失败');
      console.error(error);
    }
  };

  const fetchCategories = async () => {
    try {
      const { data: categoriesData, error } = await supabase
        .from('resources')
        .select('*')
        .eq('type', 'categories')
        .order('created_at', { ascending: false });

      if (error) throw error;
      
      const formattedCategories = (categoriesData || []).map(category => ({
        value:category.id,
        label: category.attributes.name
      }));
      
      setCategories(formattedCategories);
    } catch (error) {
      message.error('获取分类数据失败');
      console.error(error);
    }
  };

  const fetchUnits = async () => {
    try {
      const { data: unitsData, error } = await supabase
        .from('resources')
        .select('*')
        .eq('type', 'units')
        .order('created_at', { ascending: false });

      if (error) throw error;
      
      const formattedUnits = (unitsData || []).map(unit => ({
        value: unit.attributes.name,
        label: unit.attributes.name
      }));
      
      setUnits(formattedUnits);
    } catch (error) {
      console.error('获取单位数据失败:', error);
      message.error('获取单位数据失败');
    }
  };

  const onFinish = async (values) => {
    try {
      setLoading(true);
      const totalAmount = values.sections.reduce((sum, section) => {
        return (
          sum +
          (section.items || []).reduce((sectionSum, item) => {
            return sectionSum + (item.quantity * item.price || 0);
          }, 0)
        );
      }, 0);
      const categoryData = values.category.map(categoryId => {
        const category = categories.find(c => c.value === categoryId);
        return {
          id: categoryId,
          name: category.label
        };
      });
      const serviceData = {
        type: "serviceTemplate",
        attributes: {
          templateName: values.templateName,
          description: values.description,
          sections: values.sections,
          category: categoryData, 
          totalAmount,
        },
      };

      let result;
      if (id) {
        result = await supabase
          .from("resources")
          .update(serviceData)
          .eq("id", id)
          .select();
      } else {
        result = await supabase
          .from("resources")
          .insert([serviceData])
          .select();
      }

      if (result.error) throw result.error;
      message.success("保存成功");
      navigate("/company/serviceTeamplate");
    } catch (error) {
      console.error("保存失败:", error);
      message.error("保存失败");
    } finally {
      setLoading(false);
    }
  };

  const handleAddExistingSection = (sectionId) => {
    const section = availableSections.find((s) => s.id === sectionId);
    if (section) {
      const sections = form.getFieldValue("sections") || [];
      form.setFieldsValue({
        sections: [
          ...sections,
          {
            ...section.attributes,
            sectionId: section.id,
          },
        ],
      });
    }
  };

  const currencyOptions = [
    { value: "CNY", label: "人民币 (¥)" },
    { value: "TWD", label: "台币 (NT$)" },
    { value: "USD", label: "美元 ($)" },
  ];

  const calculateItemAmount = useMemo(
    () => (quantity, price) => {
      const safeQuantity = Number(quantity) || 0;
      const safePrice = Number(price) || 0;
      return safeQuantity * safePrice;
    },
    []
  );

  const calculateSectionTotal = useMemo(
    () =>
      (items = []) => {
        if (!Array.isArray(items)) return 0;

        return items.reduce((sum, item) => {
          if (!item) return sum;
          return sum + calculateItemAmount(item.quantity, item.price);
        }, 0);
      },
    [calculateItemAmount]
  );

  const calculateTotalAmount = useMemo(
    () =>
      (sections = []) => {
        if (!Array.isArray(sections)) return 0;

        return sections.reduce((sum, section) => {
          if (!section) return sum;
          return sum + calculateSectionTotal(section.items);
        }, 0);
      },
    [calculateSectionTotal]
  );

  const formatCurrency = useMemo(
    () =>
      (amount, currency = form.getFieldValue("currency")) => {
        const safeAmount = Number(amount) || 0;
        const currencySymbol =
          {
            CNY: "¥",
            TWD: "NT$",
            USD: "$",
          }[currency] || "";

        return `${currencySymbol}${safeAmount.toLocaleString("zh-CN", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })}`;
      },
    []
  );

  const handleValuesChange = (changedValues, allValues) => {
    setFormValues(allValues);
  };

  const [editingSectionName, setEditingSectionName] = useState('');

  // 处理小节名称编辑
  const handleSectionNameEdit = (sectionIndex, initialValue) => {
    setEditingSectionIndex(sectionIndex);
    setEditingSectionName(initialValue || '');
  };

  // 保存小节名称
  const handleSectionNameSave = () => {
    if (!editingSectionName.trim()) {
      message.error('请输入小节名称');
      return;
    }

    const sections = form.getFieldValue('sections');
    const newSections = [...sections];
    newSections[editingSectionIndex] = {
      ...newSections[editingSectionIndex],
      sectionName: editingSectionName.trim()
    };
    form.setFieldValue('sections', newSections);
    setEditingSectionIndex(null);
    setEditingSectionName('');
  };

  // 取消编辑
  const handleSectionNameCancel = () => {
    setEditingSectionIndex(null);
    setEditingSectionName('');
  };

  // 使用选中的模版
  const handleUseTemplate = (template) => {
    const currentSections = form.getFieldValue('sections') || [];
    
    // 确保所有必要的字段都存在
    const newSection = {
      sectionName: template.attributes.name,
      items: (template.attributes.items || []).map(item => ({
        name: item.name || '',
        description: item.description || '',
        price: item.price || 0,
        quantity: item.quantity || 1,
        unit: item.unit || '',
      }))
    };

    const newSections = [...currentSections, newSection];
    
    // 更新表单值
    form.setFieldValue('sections', newSections);
    
    // 更新 formValues 以触发金额计算
    setFormValues(prev => ({
      ...prev,
      sections: newSections
    }));
    
    setTemplateModalVisible(false);
    message.success('套用模版成功');
  };

  // 创建自定义小节
  const handleCreateCustom = () => {
    const currentSections = form.getFieldValue('sections') || [];
    const newSection = {
      sectionName: `服务类型 ${currentSections.length + 1}`,
      items: [{ name: '', description: '', price: 0, quantity: 1, unit: '' }]
    };
    const newSections = [...currentSections, newSection];
    
    // 更新表单值
    form.setFieldValue('sections', newSections);
    
    // 更新 formValues 以触发金额计算
    setFormValues(prev => ({
      ...prev,
      sections: newSections
    }));
    
    setTemplateModalVisible(false);
  };

  // 修改新增小节按钮的点击事件处理
  const handleAddSection = () => {
    setTemplateModalVisible(true);
    fetchAvailableSections();
  };

  // 修改移除小节的处理方法
  const handleRemoveSection = (sectionIndex) => {
    const currentSections = form.getFieldValue('sections') || [];
    const newSections = currentSections.filter((_, index) => index !== sectionIndex);
    
    // 更新表单值
    form.setFieldValue('sections', newSections);
    
    // 更新 formValues 以触发金额计算
    setFormValues(prev => ({
      ...prev,
      sections: newSections
    }));
    
    message.success('删除成功');
  };

  // 优化模版选择弹窗内容
  const renderTemplateModalContent = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {availableSections.map(section => (
          <div
            key={section.id}
            className="group relative bg-white dark:bg-gray-800 rounded-lg shadow-sm 
              border border-gray-200 dark:border-gray-700 hover:shadow-lg 
              transition-all duration-300 cursor-pointer"
            onClick={() => handleUseTemplate(section)}
          >
            <div className="p-6">
              {/* 标题和项目数量 */}
              <div className="text-center mb-4">
                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 
                  group-hover:text-blue-500 transition-colors">
                  {section.attributes.name}
                </h3>
                <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                  {section.attributes.items?.length || 0} 个项目
                </div>
              </div>

              {/* 项目列表预览 */}
              <div className="space-y-2 mt-4 border-t dark:border-gray-700 pt-4">
                {(section.attributes.items || []).slice(0, 3).map((item, index) => (
                  <div key={index} className="flex justify-between items-center">
                    <span className="text-sm text-gray-600 dark:text-gray-300 truncate flex-1">
                      {item.name}
                    </span>
                    <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
                      {formatCurrency(item.price)}
                    </span>
                  </div>
                ))}
                {(section.attributes.items || []).length > 3 && (
                  <div className="text-sm text-gray-500 dark:text-gray-400 text-center">
                    还有 {section.attributes.items.length - 3} 个项目...
                  </div>
                )}
              </div>

              {/* 小节总金额 */}
              <div className="mt-4 pt-4 border-t dark:border-gray-700 flex justify-between items-center">
                <span className="text-sm text-gray-600 dark:text-gray-300">总金额</span>
                <span className="text-base font-medium text-blue-500">
                  {formatCurrency(
                    (section.attributes.items || []).reduce(
                      (sum, item) => sum + (item.price * (item.quantity || 1) || 0),
                      0
                    )
                  )}
                </span>
              </div>
            </div>

            {/* 悬边框效果 */}
            <div className="absolute inset-0 border-2 border-transparent 
              group-hover:border-blue-500 rounded-lg transition-colors duration-300" 
            />

            {/* 选择指示器 */}
            <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 
              transition-opacity duration-300">
              <Button
                type="primary"
                size="small"
                className="flex items-center gap-1"
                icon={<PlusOutlined />}
              >
                套用
              </Button>
            </div>
          </div>
        ))}
      </div>

      {availableSections.length === 0 && (
        <div className="text-center py-8">
          <div className="text-gray-500 dark:text-gray-400">
            暂无可用模版
          </div>
        </div>
      )}

      <Divider className="dark:border-gray-700" />

      <div className="flex justify-center">
        <Button
          type="dashed"
          icon={<PlusOutlined />}
          onClick={handleCreateCustom}
          className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500 
            dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400
            transition-all duration-300"
        >
          自定义小节
        </Button>
      </div>
    </div>
  );

  const renderUnitSelect = (itemField, sectionIndex, itemIndex) => {
    const addUnit = async (unitName) => {
      try {
        const { error } = await supabase
          .from('resources')
          .insert([{
            type: 'units',
            attributes: {
              name: unitName
            },
            schema_version: 1
          }]);

        if (error) throw error;
        
        message.success('新增单位成功');
        await fetchUnits();
        
        // 自动选中新添加的单位
        form.setFieldValue(['sections', sectionIndex, 'items', itemIndex, 'unit'], unitName);
        
      } catch (error) {
        message.error('新增单位失败');
        console.error(error);
      }
    };

    return (
      <Form.Item
        {...itemField}
        name={[itemField.name, "unit"]}
        className="!mb-0"
      >
        <Select
          placeholder="选择或输入单位"
          options={units}
          showSearch
          allowClear
          onSearch={(value) => {
            // 当输入的值不在现有选项中时，显示添加选项
            if (value && !units.find(unit => unit.value === value)) {
              const newOption = { value, label: `添加 "${value}"` };
              setUnits([...units, newOption]);
            }
          }}
          onSelect={(value, option) => {
            // 如果选择的是新添加的选项
            if (option.label.startsWith('添加 "')) {
              addUnit(value);
            }
          }}
          filterOption={(input, option) =>
            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
          }
        />
      </Form.Item>
    );
  };

  return (
    <Card
      title={
        <span className="text-gray-800 dark:text-gray-200">
          {id ? (isEdit ? "编辑服务模版" : "查看服务模版") : "新增服务模版"}
        </span>
      }
      className="dark:bg-gray-800"
      extra={
        <Space>
          <Button
            icon={<ArrowLeftOutlined />}
            onClick={() => navigate("/company/serviceTeamplate")}
            className="flex items-center"
          >
            返回列表
          </Button>
          {id && !isEdit && (
            <Button
              type="primary"
              onClick={() =>
                navigate(`/company/serviceTemplateInfo/${id}?edit=true`)
              }
              className="flex items-center"
            >
              编辑
            </Button>
          )}
        </Space>
      }
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          sections: [{ items: [{}] }],
          currency: "CNY",
        }}
        disabled={id && !isEdit}
        onValuesChange={handleValuesChange}
      >
        <div className="bg-white dark:bg-gray-800 p-2 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
          <Title level={5} className="mb-4 dark:text-gray-200">
            基本信息
          </Title>
          <div className="grid grid-cols-2 gap-6">
            <Form.Item
              label="模版名称"
              name="templateName"
              rules={[{ required: true, message: "请输入模版名称" }]}
            >
              <Input placeholder="请输入模版名称" />
            </Form.Item>
            <Form.Item
              label="货币单位"
              name="currency"
              rules={[{ required: true, message: "请选择货币单位" }]}
              initialValue="CNY"
            >
              <Select options={currencyOptions} placeholder="请选择货币单位" />
            </Form.Item>
            <Form.Item
              label="模版分类"
              name="category"
              rules={[{ required: true, message: "请选择或输入分类" }]}
            >
              <Select
                placeholder="请选择或输入分类"
                showSearch
                allowClear
                mode="tags"
                options={categories}
                loading={loading}
              />
            </Form.Item>
            <Form.Item
              label="模版描述"
              name="description"
              className="col-span-2"
            >
              <Input.TextArea rows={4} placeholder="请输入模版描述" />
            </Form.Item>
          </div>
        </div>

        <div className="bg-white dark:bg-gray-800 p-2 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
          <div className="flex items-center justify-between mb-6">
            <Title level={5} className="!mb-0 dark:text-gray-200">
              报价明细
            </Title>
           
          </div>

          <Form.List name="sections">
            {(fields, { add, remove }) => (
              <>
                <div className="space-y-6">
                  {fields.map((field, sectionIndex) => (
                    <Card
                      key={field.key}
                      className="!border-gray-200 dark:!border-gray-700 
                        dark:bg-gray-800 hover:shadow-md transition-shadow duration-300"
                    >
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-2">
                          {editingSectionIndex === sectionIndex ? (
                            <div className="flex items-center gap-2">
                              <Input
                                value={editingSectionName}
                                onChange={(e) => setEditingSectionName(e.target.value)}
                                onPressEnter={handleSectionNameSave}
                                autoFocus
                                className="w-48"
                              />
                              <Button
                                type="link"
                                icon={<CheckOutlined />}
                                onClick={handleSectionNameSave}
                                className="text-green-500 hover:text-green-600"
                              />
                              <Button
                                type="link"
                                icon={<CloseOutlined />}
                                onClick={handleSectionNameCancel}
                                className="text-red-500 hover:text-red-600"
                              />
                            </div>
                          ) : (
                            <div className="flex items-center gap-2">
                              <Text strong className="text-lg dark:text-gray-200">
                                {form.getFieldValue([
                                  "sections",
                                  sectionIndex,
                                  "sectionName",
                                ]) || `服务类型 ${sectionIndex + 1}`}
                              </Text>
                              {(!id || isEdit) && (
                                <Button
                                  type="link"
                                  icon={<EditOutlined />}
                                  onClick={() =>
                                    handleSectionNameEdit(
                                      sectionIndex,
                                      form.getFieldValue([
                                        "sections",
                                        sectionIndex,
                                        "sectionName",
                                      ]) || `服务类型 ${sectionIndex + 1}`
                                    )
                                  }
                                  className="text-gray-400 hover:text-blue-500"
                                />
                              )}
                            </div>
                          )}
                        </div>
                        <div className="flex items-center gap-4">
                        
                          {(!id || isEdit) && (
                            <Popconfirm
                              title="确认删除"
                              description="确定要删除这个小节吗？"
                              onConfirm={() => handleRemoveSection(sectionIndex)}
                              okText="确定"
                              cancelText="取消"
                              okButtonProps={{
                                className: "bg-red-500 hover:bg-red-600 border-red-500"
                              }}
                            >
                              <Button
                                type="text"
                                danger
                                icon={<DeleteOutlined />}
                                className="hover:text-red-500 transition-colors"
                              />
                            </Popconfirm>
                          )}
                        </div>
                      </div>

                      {/* 表头 */}
                      <div className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-2 text-gray-500 dark:text-gray-400 px-2">
                        <div>项目明细</div>
                        <div>描述/备注</div>
                        <div className="text-center">数量</div>
                        <div className="text-center">单位</div>
                        <div className="text-center">单价</div>
                        <div className="text-right">小计</div>
                        <div></div>
                      </div>

                      <Form.List name={[field.name, "items"]}>
                        {(itemFields, { add: addItem, remove: removeItem }) => (
                          <>
                            {itemFields.map((itemField, itemIndex) => (
                              <div
                                key={itemField.key}
                                className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
                              >
                                <Form.Item
                                  {...itemField}
                                  name={[itemField.name, "name"]}
                                  className="!mb-0"
                                  
                                >
                                  <Input placeholder="服务项目名称" />
                                </Form.Item>
                                <Form.Item
                                  {...itemField}
                                  name={[itemField.name, "description"]}
                                  className="!mb-0"
                                >
                                  <Input placeholder="请输入描述/备注" />
                                </Form.Item>
                                <Form.Item
                                  {...itemField}
                                  name={[itemField.name, "quantity"]}
                                  className="!mb-0"
                                >
                                  <InputNumber
                                    placeholder="数量"
                                    min={0}
                                    className="w-full"
                                  />
                                </Form.Item>
                                {renderUnitSelect(itemField, sectionIndex, itemIndex)}
                                <Form.Item
                                  {...itemField}
                                  name={[itemField.name, "price"]}
                                  className="!mb-0"
                                >
                                  <InputNumber
                                    placeholder="单价"
                                    min={0}
                                    className="w-full"
                                  />
                                </Form.Item>
                                <div className="text-right">
                                  <Text className="text-gray-500 dark:text-gray-400">
                                    {formatCurrency(
                                      calculateItemAmount(
                                        formValues?.sections?.[sectionIndex]
                                          ?.items?.[itemIndex]?.quantity,
                                        formValues?.sections?.[sectionIndex]
                                          ?.items?.[itemIndex]?.price
                                      )
                                    )}
                                  </Text>
                                </div>

                                {(!id || isEdit) && itemFields.length > 1 && (
                                  <Button
                                    type="text"
                                    danger
                                    icon={<DeleteOutlined />}
                                    onClick={() => removeItem(itemField.name)}
                                    className="flex items-center justify-center"
                                  />
                                )}
                              </div>
                            ))}

                            {(!id || isEdit) && (
                              <Button
                                type="dashed"
                                onClick={() => addItem()}
                                icon={<PlusOutlined />}
                                className="w-full hover:border-blue-400 hover:text-blue-500 mb-4 dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400"
                              >
                                添加服务项目
                              </Button>
                            )}

                            <div className="flex justify-end border-t dark:border-gray-700 pt-4">
                              <Text className="text-gray-500 dark:text-gray-400">
                                小计总额：
                                <span className="text-blue-500 dark:text-blue-400 font-medium ml-2">
                                  {formatCurrency(
                                    calculateSectionTotal(
                                      formValues?.sections?.[sectionIndex]
                                        ?.items
                                    )
                                  )}
                                </span>
                              </Text>
                            </div>
                          </>
                        )}
                      </Form.List>
                    </Card>
                  ))}
                </div>

                {(!id || isEdit) && (
                  <div className="mt-6 flex justify-center">
                    <Button
                      type="dashed"
                      onClick={handleAddSection}
                      icon={<PlusOutlined />}
                      className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500 
                        dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400
                        transition-all duration-300"
                    >
                      新建小节
                    </Button>
                  </div>
                )}

                {/* 总金额统计 */}
                <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                  <div className="flex flex-col gap-2">
                  
                    <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                      <span className="text-base font-medium text-gray-700 dark:text-gray-300">
                        总金额
                      </span>
                      <span className="text-xl font-semibold text-blue-500 dark:text-blue-400">
                        {formatCurrency(
                          calculateTotalAmount(formValues?.sections)
                        )}
                      </span>
                    </div>
                  </div>
                </div>
              </>
            )}
          </Form.List>
        </div>

        {(!id || isEdit) && (
          <div className="mt-6 flex justify-end gap-4">
            <Button
              onClick={() => navigate("/company/serviceTeamplate")}
              className="px-6 hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-200"
            >
              取消
            </Button>
            <Button
              type="primary"
              htmlType="submit"
              loading={loading}
              className="px-6 hover:opacity-90"
            >
              保存
            </Button>
          </div>
        )}

        {/* 模版选择弹窗 */}
        <Modal
          title={
            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
              选择小节模版
            </h3>
          }
          open={templateModalVisible}
          onCancel={() => setTemplateModalVisible(false)}
          footer={null}
          width={800}
          className="dark:bg-gray-800"
          closeIcon={
            <CloseOutlined className="text-gray-500 dark:text-gray-400" />
          }
        >
          {renderTemplateModalContent()}
        </Modal>
      </Form>
    </Card>
  );
};

export default ServiceForm;
