import React from "react";
import {
  Form,
  Input,
  Select,
  Button,
  Space,
  Divider,
  Card,
  Checkbox,
  Typography,
} from "antd";
import { PlusOutlined, MinusCircleOutlined, LockOutlined } from "@ant-design/icons";
import TagSelector from "../Template/components/TagSelector";

const { Option } = Select;
const { Text } = Typography;

interface TemplateConfigurationFormProps {
  form: any;
  /**
   * 受限编辑模式：选择现有模板时启用
   * - 数据对象部分完全只读
   * - 标签控件的结构（类型、来源名称、目标对象等）只读
   * - 只允许编辑标签/选项的值
   */
  restrictedMode?: boolean;
}

const TemplateConfigurationForm: React.FC<TemplateConfigurationFormProps> = ({
  form,
  restrictedMode = false,
}) => {
  const needsOptions = (type: string) => {
    return ["Choices", "RectangleLabels", "PolygonLabels", "Labels"].includes(
      type
    );
  };

  return (
    <>
      <Divider orientation="left">
        数据对象
        {restrictedMode && (
          <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
            <LockOutlined /> 由模板定义，不可修改
          </Text>
        )}
      </Divider>
      <Form.List name="objects">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Card key={field.key} size="small" style={{ marginBottom: 8 }}>
                <Space align="start" style={{ width: "100%" }}>
                  <Form.Item
                    {...field}
                    label="名称"
                    name={[field.name, "name"]}
                    rules={[{ required: true, message: "必填" }]}
                    style={{ marginBottom: 0, width: 150 }}
                  >
                    <Input placeholder="例如：image" disabled={restrictedMode} />
                  </Form.Item>

                  <Form.Item
                    {...field}
                    label="类型"
                    name={[field.name, "type"]}
                    rules={[{ required: true, message: "必填" }]}
                    style={{ marginBottom: 0, width: 150 }}
                  >
                    <TagSelector type="object" disabled={restrictedMode} />
                  </Form.Item>

                  <Form.Item
                    {...field}
                    label="值"
                    name={[field.name, "value"]}
                    rules={[
                      { required: true, message: "必填" },
                      { pattern: /^\$/, message: "必须以 $ 开头" },
                    ]}
                    style={{ marginBottom: 0, width: 150 }}
                  >
                    <Input placeholder="$image" disabled={restrictedMode} />
                  </Form.Item>

                  {!restrictedMode && fields.length > 1 && (
                    <MinusCircleOutlined
                      style={{ marginTop: 30, color: "red" }}
                      onClick={() => remove(field.name)}
                    />
                  )}
                </Space>
              </Card>
            ))}
            {!restrictedMode && (
              <Button
                type="dashed"
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
              >
                添加对象
              </Button>
            )}
          </>
        )}
      </Form.List>

      <Divider orientation="left">
        标签控件
        {restrictedMode && (
          <Text type="secondary" style={{ fontSize: 12, marginLeft: 8 }}>
            仅可修改来源名称、标签/选项值
          </Text>
        )}
      </Divider>
      <Form.List name="labels">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Card
                key={field.key}
                size="small"
                style={{ marginBottom: 12 }}
                title={
                  <Space>
                    <span>控件 {fields.indexOf(field) + 1}</span>
                    <Form.Item noStyle shouldUpdate>
                      {() => {
                        const controlType = form.getFieldValue([
                          "labels",
                          field.name,
                          "type",
                        ]);
                        const fromName = form.getFieldValue([
                          "labels",
                          field.name,
                          "fromName",
                        ]);
                        if (controlType || fromName) {
                          return (
                            <span
                              style={{
                                fontSize: 12,
                                fontWeight: "normal",
                                color: "#999",
                              }}
                            >
                              ({fromName || "未命名"} -{" "}
                              {controlType || "未设置类型"})
                            </span>
                          );
                        }
                        return null;
                      }}
                    </Form.Item>
                  </Space>
                }
                extra={
                  !restrictedMode && (
                    <MinusCircleOutlined
                      style={{ color: "red" }}
                      onClick={() => remove(field.name)}
                    />
                  )
                }
              >
                <Space
                  direction="vertical"
                  style={{ width: "100%" }}
                  size="middle"
                >
                  {/* Row 1: 控件名称, 标注目标对象, 控件类型 */}
                  <div
                    style={{
                      display: "grid",
                      gridTemplateColumns: "180px 220px 1fr auto",
                      gap: 12,
                      alignItems: "flex-end",
                    }}
                  >
                    <Form.Item
                      {...field}
                      label="来源名称"
                      name={[field.name, "fromName"]}
                      rules={[{ required: true, message: "必填" }]}
                      style={{ marginBottom: 0 }}
                      tooltip="此控件的唯一标识符"
                    >
                      <Input placeholder="例如：choice" />
                    </Form.Item>

                    <Form.Item
                      {...field}
                      label="标注目标对象"
                      name={[field.name, "toName"]}
                      rules={[{ required: true, message: "必填" }]}
                      style={{ marginBottom: 0 }}
                      tooltip="选择此控件将标注哪个数据对象"
                      dependencies={["objects"]}
                    >
                      <Select placeholder="选择数据对象" disabled={restrictedMode}>
                        {(form.getFieldValue("objects") || []).map(
                          (obj: any, idx: number) => (
                            <Option key={idx} value={obj?.name || ""}>
                              {obj?.name || `对象 ${idx + 1}`} (
                              {obj?.type || "未知类型"})
                            </Option>
                          )
                        )}
                      </Select>
                    </Form.Item>

                    <Form.Item
                      {...field}
                      label="控件类型"
                      name={[field.name, "type"]}
                      rules={[{ required: true, message: "必填" }]}
                      style={{ marginBottom: 0 }}
                    >
                      <TagSelector type="control" disabled={restrictedMode} />
                    </Form.Item>

                    <Form.Item
                      {...field}
                      label=" "
                      name={[field.name, "required"]}
                      valuePropName="checked"
                      style={{ marginBottom: 0 }}
                    >
                      <Checkbox disabled={restrictedMode}>必填</Checkbox>
                    </Form.Item>
                  </div>

                  {/* Row 2: 取值范围定义（添加选项） - Conditionally rendered based on type */}
                  <Form.Item
                    noStyle
                    shouldUpdate={(prevValues, currentValues) => {
                      const prevType = prevValues.labels?.[field.name]?.type;
                      const currType = currentValues.labels?.[field.name]?.type;
                      return prevType !== currType;
                    }}
                  >
                    {({ getFieldValue }) => {
                      const controlType = getFieldValue([
                        "labels",
                        field.name,
                        "type",
                      ]);
                      const fieldName =
                        controlType === "Choices" ? "options" : "labels";

                      if (needsOptions(controlType)) {
                        return (
                          <Form.Item
                            {...field}
                            label={
                              <>
                                {controlType === "Choices" ? "选项" : "标签"}
                                {restrictedMode && (
                                  <Text type="success" style={{ fontSize: 11, marginLeft: 6 }}>
                                    可编辑
                                  </Text>
                                )}
                              </>
                            }
                            name={[field.name, fieldName]}
                            rules={[
                              { required: true, message: "至少需要一个选项" },
                            ]}
                            style={{ marginBottom: 0 }}
                          >
                            <Select
                              mode="tags"
                              open={false}
                              placeholder={
                                controlType === "Choices"
                                  ? "输入选项内容，按回车添加。例如：是、否、不确定"
                                  : "输入标签名称，按回车添加。例如：人物、车辆、建筑物"
                              }
                              style={{ width: "100%" }}
                            />
                          </Form.Item>
                        );
                      }
                      return null;
                    }}
                  </Form.Item>

                  {/* Row 3: 描述 */}
                  <Form.Item
                    {...field}
                    label="描述"
                    name={[field.name, "description"]}
                    style={{ marginBottom: 0 }}
                    tooltip="向标注人员显示的帮助信息"
                  >
                    <Input
                      placeholder="为标注人员提供此控件的使用说明"
                      maxLength={200}
                      disabled={restrictedMode}
                    />
                  </Form.Item>
                </Space>
              </Card>
            ))}
            {!restrictedMode && (
              <Button
                type="dashed"
                onClick={() =>
                  add({
                    fromName: "",
                    toName: "",
                    type: "Choices",
                    required: false,
                  })
                }
                block
                icon={<PlusOutlined />}
              >
                添加标签控件
              </Button>
            )}
          </>
        )}
      </Form.List>
    </>
  );
};

export default TemplateConfigurationForm;
