import type { CSSProperties } from "react";
import type { CertificateTemplateComponentProps } from "@/lib/certificate";
import { TemplateShell } from "@/templates/template-primitives";

const width = 1576;
const height = 1080;
const backgroundSrc = "/lobster-birth-tx-blank.png";

const fieldTextBaseStyle: CSSProperties = {
  position: "absolute",
  height: 50,
  paddingInline: 0,
  fontSize: 38,
  fontWeight: 500,
  lineHeight: "50px",
  color: "#202020",
  fontFamily: '"Microsoft YaHei", "PingFang SC", sans-serif',
  whiteSpace: "nowrap",
  overflow: "hidden",
  textOverflow: "ellipsis",
};

const fieldLayouts = {
  childName: { left: 470, top: 340, minWidth: 470 },
  familyAddress: { left: 420, top: 420, minWidth: 470 },
  parentName: { left: 420, top: 510, minWidth: 470 },
  birthDate: { left: 420, top: 600, minWidth: 470 },
  birthAddress: { left: 420, top: 690, minWidth: 470 },
} as const;

function normalizeFieldValue(value: string) {
  return value.replace(/[\r\n]+/g, " ").replace(/\s+/g, " ").trim();
}

function FieldText({
  value,
  style,
}: {
  value: string;
  style: CSSProperties;
}) {
  const text = normalizeFieldValue(value);

  if (!text) {
    return null;
  }

  return <div style={{ ...fieldTextBaseStyle, ...style }}>{text}</div>;
}

export function LobsterBirthTxTemplate({ formData, qrSrc, currentCount }: CertificateTemplateComponentProps) {
  return (
    <TemplateShell
      width={width}
      height={height}
      style={{
        position: "relative",
        borderRadius: 0,
        boxShadow: "none",
      }}
    >
      <img
        src={backgroundSrc}
        alt="小龙虾出生证明腾讯云版背景"
        style={{
          width,
          height,
          objectFit: "cover",
          display: "block",
          userSelect: "none",
          pointerEvents: "none",
        }}
      />

      <img
        src={qrSrc}
        alt="二维码"
        style={{
          position: "absolute",
          left: 200,
          top: 776,
          width: 165,
          height: 165,
          objectFit: "cover",
          borderRadius: 8
        }}
      />
      <FieldText value={formData.childName} style={fieldLayouts.childName} />
      <FieldText value={formData.familyAddress} style={fieldLayouts.familyAddress} />
      <FieldText value={formData.parentName} style={fieldLayouts.parentName} />
      <FieldText value={formData.birthDate} style={fieldLayouts.birthDate} />
      <FieldText value={formData.birthAddress} style={fieldLayouts.birthAddress} />

      <div
        style={{
          position: "absolute",
          left: 820,
          top: 915,
          width: 520,
          fontSize: 40,
          fontWeight: 700,
          lineHeight: "1.22",
          color: "#323232",
          fontFamily: '"Alimama ShuHeiTi", "Microsoft YaHei", sans-serif',
          WebkitTextStroke: "4px #ffffff",
          paintOrder: "stroke fill",
          textAlign: "center",
        }}
      >
        第 <span style={{ color: "#e53e3e" }}>{currentCount}</span> 个出生的龙虾宝宝
      </div>
    </TemplateShell>
  );
}