"use client";

import { useId } from "react";

export type StampVariant = "property" | "landlord" | "pending";

interface VerificationStampProps {
  variant: StampVariant;
  size?: number;
  className?: string;
}

const STAMP_CONFIG: Record<
  StampVariant,
  { rotate: number; ringColor: string; dashed: boolean; label: string; checkColor: string }
> = {
  property: {
    rotate: -6,
    ringColor: "#D7A23E",
    dashed: false,
    label: "VERIFIED PROPERTY ·",
    checkColor: "#1E4A3D",
  },
  landlord: {
    rotate: 5,
    ringColor: "#1E4A3D",
    dashed: true,
    label: "VERIFIED LANDLORD ·",
    checkColor: "#D7A23E",
  },
  pending: {
    rotate: -3,
    ringColor: "#9AA89F",
    dashed: true,
    label: "UNDER REVIEW ·",
    checkColor: "#9AA89F",
  },
};

export default function VerificationStamp({
  variant,
  size = 64,
  className = "",
}: VerificationStampProps) {
  const reactId = useId();
  const pathId = `stamp-path-${reactId}`;
  const config = STAMP_CONFIG[variant];

  return (
    <div
      className={`inline-block leading-none ${className}`}
      style={{ width: size, height: size }}
      role="img"
      aria-label={config.label.replace(" ·", "")}
    >
      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" className="block w-full h-full">
        <defs>
          <path
            id={pathId}
            d="M 100,100 m -78,0 a 78,78 0 1,1 156,0 a 78,78 0 1,1 -156,0"
          />
        </defs>
        <g transform={`rotate(${config.rotate} 100 100)`} opacity={variant === "pending" ? 0.9 : 1}>
          <circle
            cx="100"
            cy="100"
            r="92"
            fill="#F4F6F0"
            stroke={config.ringColor}
            strokeWidth="3"
            strokeDasharray={config.dashed ? "2 4" : undefined}
          />
          <circle cx="100" cy="100" r="78" fill="none" stroke={config.ringColor} strokeWidth="3" />
          <text
            fontFamily="IBM Plex Mono, monospace"
            fontSize="13"
            letterSpacing="3"
            fill={config.ringColor}
            fontWeight="600"
          >
            <textPath href={`#${pathId}`} startOffset="2%">
              {config.label}
            </textPath>
          </text>

          {variant === "pending" ? (
            /* Clock icon for pending — communicates "waiting / in progress" */
            <g transform="translate(100 100)">
              <circle r="24" fill="none" stroke={config.checkColor} strokeWidth="2.5" />
              <circle r="2" fill={config.checkColor} />
              <line x1="0" y1="-14" x2="0" y2="0"
                stroke={config.checkColor} strokeWidth="2.5" strokeLinecap="round" />
              <line x1="0" y1="0" x2="10" y2="8"
                stroke={config.checkColor} strokeWidth="2.5" strokeLinecap="round" />
              {[0, 90, 180, 270].map((a) => (
                <line
                  key={a}
                  x1={Math.sin(a * Math.PI / 180) * 19}
                  y1={-Math.cos(a * Math.PI / 180) * 19}
                  x2={Math.sin(a * Math.PI / 180) * 23}
                  y2={-Math.cos(a * Math.PI / 180) * 23}
                  stroke={config.checkColor} strokeWidth="2" strokeLinecap="round"
                />
              ))}
            </g>
          ) : (
            /* Original checkmark for verified variants */
            <path
              d="M68 102 L92 126 L134 76"
              fill="none"
              stroke={config.checkColor}
              strokeWidth="9"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          )}
        </g>
      </svg>
    </div>
  );
}