import React, { useState, useEffect } from "react";
import {
  Form,
  Input,
  Button,
  Space,
  Card,
  Table,
  Typography,
  message,
} from "antd";
import {
  PlusOutlined,
  ArrowLeftOutlined,
  SaveOutlined,
} from "@ant-design/icons";
import { supabase } from "@/config/supabase";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";

const { Title } = Typography;

const ResourceTaskForm = () => {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const isEdit = searchParams.get("edit") === "true";
  const isView = id && !isEdit;
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [dataSource, setDataSource] = useState([{ id: uuidv4(), name: '' }]);

  const columns = [
    {
      title: "名称",
      dataIndex: "name",
      render: (_, record, index) => (
        <Form.Item
          name={["items", index, "name"]}
          rules={[{ required: true, message: "请输入名称" }]}
          style={{ margin: 0 }}
          preserve={true}
        >
          <Input placeholder="请输入名称" maxLength={100} />
        </Form.Item>
      ),
    },
    {
      title: "操作",
      width: 100,
      render: (_, record, index) => (
        <Button
          type="link"
          danger
          disabled={dataSource.length === 1 || isView}
          onClick={() => handleRemoveItem(record.id, index)}
        >
          删除
        </Button>
      ),
    },
  ];

  const handleRemoveItem = (itemId, index) => {
    // 获取当前所有表单项的值
    const allFormValues = form.getFieldsValue();
    const currentItems = allFormValues.items || [];

    // 保留要删除项之外的所有项
    const newItems = currentItems.filter((_, idx) => idx !== index);

    // 更新 dataSource，确保保留其他项的数据
    const newDataSource = dataSource.filter((_, idx) => idx !== index);
    
    // 同步更新 form 和 dataSource
    setDataSource(newDataSource);
    form.setFieldsValue({ items: newItems });
  };

  const handleAddItem = () => {
    const newItem = { id: uuidv4(), name: '' };
    // 获取当前表单值
    const currentItems = form.getFieldValue('items') || [];
    
    // 同步更新表单和 dataSource
    setDataSource(prev => [...prev, newItem]);
    form.setFieldsValue({
      items: [...currentItems, newItem]
    });
  };

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

      if (error) throw error;

      if (data?.attributes) {
        const items = data.attributes.items?.map(item => ({
          ...item,
          id: item.id || uuidv4(),
          name: item.name || ''
        })) || [{ id: uuidv4(), name: '' }];

        // 同步设置表单值和 dataSource
        form.setFieldsValue({
          taskName: data.attributes.taskName,
          items,
        });
        setDataSource(items);
      }
    } catch (error) {
      message.error("获取任务详情失败，请稍后重试");
      console.error("获取任务详情失败:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (id) {
      fetchResourceTaskDetail();
    }
  }, [id]);

  const onFinish = async (values) => {
    try {
      setLoading(true);

      // 验证任务项
      const hasEmptyItems = values.items.some((item) => !item.name?.trim());
      if (hasEmptyItems) {
        message.error("请填写所有任务项的名称");
        return;
      }

      const resourceTaskData = {
        type: "task",
        attributes: {
          taskName: values.taskName.trim(),
          items: values.items.map((item, index) => ({
            id: dataSource[index].id,
            name: item.name?.trim(),
          })),
        },
      };

      if (id) {
        resourceTaskData.id = id;
      }

      const { error } = await supabase
        .from("resources")
        .upsert(resourceTaskData)
        .select();

      if (error) throw error;

      message.success("保存成功");
      navigate("/resource/task");
    } catch (error) {
      message.error("保存失败，请稍后重试");
      console.error("保存失败:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
      <Card
        className="shadow-lg rounded-lg border-0"
        title={
          <div className="flex justify-between items-center py-2">
            <div className="flex items-center space-x-3">
              <Title level={4} className="mb-0 text-gray-800">
                {id ? (isEdit ? "编辑任务" : "查看任务") : "新建任务"}
              </Title>
              <span className="text-gray-400 text-sm">
                {id
                  ? isEdit
                    ? "请修改任务信息"
                    : "任务详情"
                  : "请填写任务信息"}
              </span>
            </div>
            <Space size="middle">
              <Button
                icon={<ArrowLeftOutlined />}
                onClick={() => navigate("/resource/task")}
              >
                返回
              </Button>
              {!isView && (
                <Button
                  type="primary"
                  icon={<SaveOutlined />}
                  onClick={() => form.submit()}
                  loading={loading}
                >
                  保存
                </Button>
              )}
            </Space>
          </div>
        }
      >
        <Form
          form={form}
          onFinish={onFinish}
          layout="vertical"
          initialValues={{
            items: [{ id: uuidv4() }],
          }}
          disabled={isView || loading}
        >
          <Card
            className="mb-4 shadow-sm rounded-lg"
            title={
              <div className="flex items-center">
                <div className="w-1 h-4 bg-blue-500 rounded-full mr-2" />
                <span>基本信息</span>
              </div>
            }
            bordered={false}
          >
            <Form.Item
              name="taskName"
              label="任务名称"
              rules={[{ required: true, message: "请输入任务名称" }]}
            >
              <Input placeholder="请输入任务名称" maxLength={100} />
            </Form.Item>
          </Card>

          <Card
            className="shadow-sm rounded-lg"
            title={
              <div className="flex items-center">
                <div className="w-1 h-4 bg-green-500 rounded-full mr-2" />
                <span>任务明细</span>
              </div>
            }
            extra={
              !isView && (
                <Button
                  type="dashed"
                  icon={<PlusOutlined />}
                  onClick={handleAddItem}
                  disabled={loading}
                >
                  新增一栏
                </Button>
              )
            }
            bordered={false}
          >
            <Table
              dataSource={dataSource}
              columns={columns}
              pagination={false}
              rowKey="id"
              loading={loading}
            />
          </Card>
        </Form>
      </Card>
    </div>
  );
};

export default ResourceTaskForm;
