import { DatePicker, Form, Input, Row, Col, Select, Image } from "antd";
import { COMMITMENT_PARAGRAPHS } from "../../filingCommitment";
import FilingUpload, { resolveFilingUploadUrl } from "./FilingUpload";
import AttachmentUpload from "~/components/AttachmentUpload";

const BLANK_STYLE = {
  display: "inline-block",
  minWidth: 120,
  padding: "0 4px 2px",
  borderBottom: "1px solid #333",
  textAlign: "center",
  lineHeight: 1.6,
};

function renderBlank(value) {
  const text = value?.trim() || "";
  return <span style={BLANK_STYLE}>{text || "\u00A0".repeat(8)}</span>;
}

function CommitmentBody({ legalRepName, filingUnitName }) {
  const values = { legalRepName, filingUnitName };
  return (
    <div style={{ fontSize: 14, lineHeight: 2, color: "rgba(0,0,0,0.85)" }}>
      {COMMITMENT_PARAGRAPHS.map((paragraph) => (
        <p
          key={paragraph.key}
          style={{
            margin: paragraph.key === "intro" ? "0 0 12px" : "0 0 10px",
            textIndent: paragraph.key === "intro" ? 0 : "2em",
          }}
        >
          {paragraph.parts.map((part, index) => {
            if (part.type === "blank") {
              return (
                <span key={`${paragraph.key}-${index}`}>
                  {renderBlank(values[part.field])}
                </span>
              );
            }
            return <span key={`${paragraph.key}-${index}`}>{part.value}</span>;
          })}
        </p>
      ))}
    </div>
  );
}

export default function CommitmentStep({
  form,
  disabled,
  personnelOptions = [],
  commitment,
}) {
  const legalRepName = Form.useWatch("legalRepName", form);
  const filingUnitName = Form.useWatch("filingUnitName", form);

  const handleLegalRepChange = (personnelId) => {
    if (!personnelId) {
      form.setFieldsValue({ legalRepPersonnelId: undefined, legalRepName: "" });
      return;
    }
    const selected = personnelOptions.find(
      (item) => item.value === personnelId,
    );
    form.setFieldsValue({
      legalRepPersonnelId: personnelId,
      legalRepName: selected?.staffName || selected?.label || "",
    });
  };

  return (
    <div style={{ maxWidth: 920 }}>
      <Form form={form} layout="vertical" disabled={disabled}>
        <Form.Item name="legalRepName" hidden>
          <Input />
        </Form.Item>
        <Form.Item name="filingUnitName" hidden>
          <Input />
        </Form.Item>
        <Form.Item name="commitmentContent" hidden>
          <Input />
        </Form.Item>

        <div
          style={{
            border: "1px solid #e8e8e8",
            borderRadius: 4,
            padding: "20px 24px",
            background: "#fafafa",
            marginBottom: 24,
          }}
        >
          <CommitmentBody
            legalRepName={legalRepName}
            filingUnitName={filingUnitName}
          />
        </div>

        <Row gutter={24}>
          <Col xs={24} sm={12} md={8}>
            <Form.Item name="signDate" label="签署日期" rules={[{ required: !disabled, message: "请选择签署日期" }]}>
              <DatePicker style={{ width: "100%" }} placeholder="请选择日期" />
            </Form.Item>
          </Col>
          <Col xs={24} sm={12} md={8}>
            <Form.Item
              name="legalRepPersonnelId"
              label="法定代表人"
              rules={[{ required: !disabled, message: "请选择法定代表人" }]}
            >
              <Select
                allowClear
                placeholder="请选择"
                options={personnelOptions}
                showSearch
                optionFilterProp="label"
                onChange={handleLegalRepChange}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
      {commitment?.legalRepSignatureUrl&&<>
        <h3>电子签名</h3>
        <Image
          src={commitment?.legalRepSignatureUrl}
          alt="电子签名"
          style={{ width: 120, height: 120 }}
          hidden
        />
      </>}
    </div>
  );
}