import { LockIconsProps } from "./welcome-types.ts";

/**
 * LockIcons Component
 * Displays encryption status icons (green locked or red unlocked)
 * Centered absolutely within parent container
 *
 * @param isPasswordSet - Whether encryption password is set
 * @param isSkipped - Whether user skipped encryption setup
 * @param onClearSkip - Handler to re-enable encryption setup
 */
export default function LockIcon(
  {
    isPasswordSet,
    isSkipped,
    onClearSkip,
    onChangePin,
    isEncrypted,
    onRequestPin,
  }: LockIconsProps,
) {
  return (
    <>
      {/* Green closed lock icon when encryption is enabled */}
      {isPasswordSet && (
        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <button
            type="button"
            onClick={onChangePin}
            class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-green-300 rounded"
            title="Click to change your PIN"
            aria-label="Change encryption PIN"
          >
            <svg
              class="w-5 h-5 text-green-600"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Encryption enabled"
            >
              <path d="M10 2a4 4 0 00-4 4v2H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-1V6a4 4 0 00-4-4zM8 6a2 2 0 114 0v2H8V6zm2 6a1 1 0 011 1v2a1 1 0 11-2 0v-2a1 1 0 011-1z" />
            </svg>
          </button>
        </div>
      )}

      {/* Red open lock button when encryption is skipped */}
      {isSkipped && (
        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <button
            type="button"
            onClick={onClearSkip}
            class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-red-300 rounded"
            title="Click to enable encryption setup"
            aria-label="Enable encryption"
          >
            <svg
              class="w-5 h-5 text-red-600"
              fill="none"
              viewBox="0 0 20 20"
              stroke="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M7 8V5a3 3 0 116 0"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <rect
                x="4"
                y="9"
                width="13"
                height="9"
                rx="1.5"
                fill="currentColor"
              />
              <rect
                x="9.5"
                y="14.5"
                width="1"
                height="2"
                rx="0.5"
                fill="white"
              />
              <rect
                x="9"
                y="12"
                width="3"
                height="5"
                rx="2"
                fill="white"
              />
            </svg>
          </button>
        </div>
      )}

      {/* Yellow caution icon when account is encrypted but this device has no PIN yet */}
      {isEncrypted && !isPasswordSet && !isSkipped && (
        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <button
            type="button"
            onClick={onRequestPin}
            class="hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-yellow-300 rounded"
            title="Encryption active - click to enter your PIN on this device"
            aria-label="Enter encryption PIN on this device"
          >
            <svg
              class="w-5 h-5 text-yellow-400"
              fill="currentColor"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
              aria-label="Encryption requires PIN on this device"
            >
              <path d="M8.257 3.099c.765-1.36 2.681-1.36 3.446 0l6.518 11.59C19.002 16.37 18.135 18 16.708 18H3.292c-1.427 0-2.294-1.63-1.513-3.31l6.478-11.59z" />
              <path d="M11 14a1 1 0 11-2 0 1 1 0 012 0z" />
              <path d="M10 7a1 1 0 00-1 1v3a1 1 0 102 0V8a1 1 0 00-1-1z" />
            </svg>
          </button>
        </div>
      )}
    </>
  );
}